Преобразовать анимированный SVG в фильм

У меня есть анимированный SVG и хотел бы превратить ее в кино (серия картинок тоже). Анимация воспроизводится в браузерах webkit (Safari, Chrome) и в Batik's цифирки). Я пытался поймать его с помощью пленителя. но фильм заканчивается довольно отрывистым.

есть хороший инструмент для этого?

вот пример анимации: 

<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>
18
задан Benjamin Wohlwend
05.01.2023 1:18 Количество просмотров материала 3095
Распечатать страницу

3 ответа

вы пробовали использовать squiggle для экспорта серии кадров? Я нашел squiggle боль, чтобы получить вашу линию именно там, где я хотел, чтобы это было правильно настроить серию кадров. Однако, как только вы это сделаете, вы можете использовать утилиты - видимо, мой любимый ответ на этой неделе; -), чтобы превратить его, как вам нравится.

предполагая, что каждый вы сохраняете кадры как frame01.svg, frame02.СВГ и др. Тогда это:

convert -delay 5 -loop 0 frame??.svg animated.gif

сделает один анимированный gif из вашего кадры, петли навсегда, 5 мс между кадрами.

convert преобразует svg в, но imagemagick не обрабатывает тег animateTransform, поэтому любой вывод статичен.

обновление: Мне было так больно работать с squiggle (по крайней мере, пытаясь остановить анимацию в нужном месте, чтобы захватить изображение, мне было стыдно даже предложить его!

вот сценарий bash, использующий imagemagick для преобразования svg в анимированный gif: Перед запуском скрипта я разделите ваш пример svg на 2 части: bg.svg содержит elipse и элемент "ямы" и руку.svg содержит только элемент 'sec'

`#!/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

~

Я уверен, что кто-то более умный, чем я, мог бы выяснить, как объединить convert и объединить все в один шаг, не поворачивая bg.PNG, но это то, что вы получаете бесплатно ;-)

кроме того, хотел сохранить это простым, на всякий случай, он должен быть переопределен как для Windows bat файл.

i=i+5-это компромисс между тем, насколько плавная анимация выглядит по сравнению с размером файла.

Примечание.: Даже с задержкой 1 (1 мс между кадрами) firefox не будет перемещать руку по полному кругу в течение 5 секунд. Это было ближе к 10 сек.

и вот что произвел скрипт

3
отвечен DaveParillo 2023-01-06 09:06

я нашел способ создать серию изображений с помощью canvg. Для запуска следующей страницы необходимо использовать измененный сценарий canvg.js в том, что функция draw доступна.

изменения в скрипте canvg.в JS (В1.0):

в строке 2321 изменить с:

var draw = function() {

to:

svg.draw = function() {

в строке 2361 и 2390 изменить с:

draw();

to:

svg.draw();

сценарий моего поколения:

<html>
<head>
<script type="text/javascript" src="rgbcolor.js"></script> 
<script type="text/javascript" src="canvg.js"></script> 
<script type="text/javascript">

loadSVG = function() {
  canvg('canvas', '<animated SVG>', { ignoreMouse: true, ignoreAnimation: true });
}

function RenderNext(delta) {
    var c = document.getElementById("canvas");
    var svg = c.svg;

    for (var i=0; i<svg.Animations.length; i++) {
        svg.Animations[i].update(delta);
    }
    svg.draw();
}

function CreateImage(imgStr) {
    var oImg=document.createElement("img");
    oImg.setAttribute('src', imgStr);
    return oImg;
}

function start() {
    var c = document.getElementById("canvas");
    var result = document.getElementById("resultDiv");
    var maxDur = 5; // seconds
    var framerate = 5; // imgages per second

    for (var i = 0; i < framerate * maxDur; i++) {
        RenderNext(1000 / framerate);

        var oImg = CreateImage(c.toDataURL('image/png'));
        result.appendChild(oImg);
    }
}

</script>
</head>
<body onload="loadSVG()">

<canvas id="canvas" width="30px" height="30px"></canvas> 

<p>
<input type="button" id="start" value="Start" onclick="start()" /> 
</p>

<div id="resultDiv">
</div>

</body>
</html>
4
отвечен Manni 2023-01-06 11:23

Если вы используете Firefox, вы могли бы дать СВГ плагин Render в попробовать: http://adasek.cz/svgrender/

2
отвечен IOOI 2023-01-06 13:40

Постоянная ссылка на данную страницу: [ Скопировать ссылку | Сгенерировать QR-код ]

Ваш ответ

Опубликуйте как Гость или авторизуйтесь

Имя
Мы используем cookie. Это позволяет нам анализировать взаимодействие посетителей с сайтом и делать его лучше. Продолжая пользоваться сайтом, вы соглашаетесь с использованием файлов cookie. Политика конфиденциальности
Согласен
Вверх