Преобразуйте анимированный SVG в фильм
Я имею анимированный SVG и хотел бы превратить его в фильм (ряд изображений также сделает). Анимация играет в браузерах WebKit (Safari, Chrome) и в загогулине Батика). Я пытался получить его с экраном capturer., но фильм заканчивается довольно судорожный.
Существует ли хороший инструмент для этого?
Вот анимация в качестве примера:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<rect id="BB" x="0" y="0" height="100%" width="100%" fill="white"/>
<g id="firstone" stroke="black">
<g id="g3" fill="none" stroke-width="2">
<animateTransform attributeName="transform" type="rotate" dur="5s" from="360 100 100" to="0 100 100" repeatCount="indefinite"/>
<g id="g2">
<ellipse id="g1" cx="100" cy="100" rx="75" ry="75">
</ellipse>
<g id="sec">
<line x1="100" y1="100" x2="45" y2="45" style="stroke: rgb(99, 99, 99); stroke-width: 6;"/>
</g>
</g>
</g>
<g id="pit">
<line x1="100" y1="175" x2="100" y2="200" style="stroke: red; stroke-width: 6;"/>
</g>
</g>
</svg>
1 ответ
Вы попытались использовать загогулину для экспорта серии кадров? Я нашел загогулину болью для получения строки, где я хотел, чтобы она была для надлежащей установки серии кадров. Однако, после того как у Вас есть это, можно использовать imagemagick - по-видимому, мой любимый ответ на этой неделе ;-) для преобразования его однако Вам нравится.
Принятие каждого Вы сохраняете кадры прочь как frame01.svg, frame02.svg, и т.д. Затем это:
convert -delay 5 -loop 0 frame??.svg animated.gif
сделает единственный анимационный gif из Ваших кадров что циклы навсегда, 5 мс между кадрами.
преобразование преобразует svg в, но imagemagick не обрабатывает тег animateTransform, таким образом, любой вывод статичен.
Обновление: Я нашел загогулину настолько болезненной для работы с (по крайней мере, пытающийся остановить анимацию в просто правильном пятне для захвата изображения, я был смущен для ровного предложения этого!
Вот сценарий удара с помощью imagemagick для преобразования svg в анимированный gif: Прежде, чем запустить этот скрипт я разделил Ваш пример svg на 2 части: bg.svg содержит эллипс и элемент 'ямы', и hand.svg содержит просто элемент 'секунды'
`#!/bin/bash`
rm *.png
rm anim.gif
convert bg.svg -crop 200x200+0+0 +repage bg.png
convert hand.svg -crop 200x200+0+0 +repage -transparent white hand.png
for ((i=1; i<=359; i=i+3))
do
convert hand.png -gravity center -rotate $i tmp.png
n=`printf "%03d" $i`
composite -gravity center tmp.png bg.png hand${n}.png
rm tmp.png
done
convert -delay 1 -loop 0 hand*.png anim.gif
~
Я уверен, что кто-то более умный, чем я мог выяснить, как объединить преобразование и объединить все на одном шаге, также не поворачивая bg.png, но это - то, что Вы получаете бесплатно ;-)
Кроме того, требуемый для хранения этого простым на всякий случай это должно быть повторно реализовано как bat-файл окон.
i=i+5 является компромиссом между тем, как гладкий анимация смотрит по сравнению с размером файла.
Примечание: Даже с - задерживаются 1 (1 мс между кадрами), Firefox не двигал бы рукой в полном кругу через 5 секунд. Это было ближе к 10 secs.
