Konvertieren Sie animiertes SVG in einen Film

21

Ich habe ein animiertes SVG und möchte es in einen Film verwandeln (eine Reihe von Bildern würde auch ausreichen). Die Animation wird in Webkit-Browsern (Safari, Chrome) und in Batiks Squiggle abgespielt . Ich habe versucht, es mit einem Screenshot aufzunehmen. aber der Film endet ziemlich ruckelig.

Gibt es dafür ein gutes Werkzeug?

Hier ist eine Beispielanimation:

<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>

animation svg

— Benjamin Wohlwend
quelle

2

Es gibt einen SVG in APNG-Konverter ( littlesvr.ca/apng/svg2png ). Möglicherweise kann ein anderes Tool verwendet werden, um aus dem APNG einen Film zu konvertieren oder die Frames zu trennen.

— Kartikmohta

1

@kartikmohta: Füge das als Antwort hinzu.

— Mechanische Schnecke

4

Haben Sie versucht, mit squiggle eine Reihe von Frames zu exportieren? Ich fand, dass Kringeln ein Schmerz ist, um Ihre Linie genau dahin zu bringen, wo ich wollte, dass sie eine Reihe von Frames richtig einrichtet. Sobald Sie das haben, können Sie imagemagick verwenden - anscheinend meine Lieblingsantwort in dieser Woche ;-), um es zu transformieren, wie Sie möchten .

Angenommen, Sie speichern die Frames als frame01.svg, frame02.svg usw. ab.

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

macht ein einzelnes animiertes GIF aus Ihren Frames, das sich für immer in einer Schleife befindet, 5 ms zwischen den Frames.

convert konvertiert svg nach, aber imagemagick verarbeitet das animateTransform-Tag nicht, sodass jede Ausgabe statisch ist.

Update: Ich fand es so mühsam, mit Squiggle zu arbeiten (zumindest versuchte ich, die Animation genau an der richtigen Stelle anzuhalten, um ein Bild aufzunehmen. Es war mir peinlich, dass ich es sogar vorgeschlagen hatte!

Hier ist ein Bash-Skript, das imagemagick verwendet, um Ihre Svg in ein animiertes GIF zu konvertieren: Bevor ich dieses Skript ausführe, habe ich Ihre Beispiel-Svg in zwei Teile aufgeteilt: bg.svg enthält die Elipse und das Element 'pit' und hand.svg enthält nur die 'sec'. Element

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

~
Ich bin mir sicher, dass jemand, der klüger als ich ist, herausfinden kann, wie man den Konverter zusammenführt und alles in einem Schritt kombiniert, ohne auch die Datei bg.png zu drehen, aber das bekommt man kostenlos ;-)

Wollte dies auch einfach halten, nur für den Fall, dass es als Windows-Bat-Datei neu implementiert werden muss.

Das i = i + 5 ist ein Kompromiss zwischen dem Aussehen der Animation und der Dateigröße.

Hinweis: Selbst mit -verzögerung 1 (1 ms zwischen Frames) würde Firefox die Hand in 5 Sekunden nicht in einem vollständigen Kreis bewegen. Es war näher an 10 Sekunden.

Und hier ist, was das Skript produziert

— DaveParillo
quelle

4

Ich habe einen Weg gefunden, die Bildserien mit Hilfe von canvg zu erstellen . Um die folgende Seite auszuführen, müssen Sie ein modifiziertes Skript von canvg.js verwenden, damit auf die Zeichenfunktion zugegriffen werden kann.

Änderungen im Skript canvg.js (v1.0):

In Zeile 2321 wechseln von:

var draw = function() {

zu:

svg.draw = function() {

In den Zeilen 2361 und 2390 wird geändert von:

draw();

zu:

svg.draw();

Mein Generationsskript:

<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>

— Manni
quelle

3

Wenn Sie FireFox verwenden, können Sie SVG Render Plug in einem Versuch geben: http://adasek.cz/svgrender/

— IOOI
quelle

Dies ist ein guter Vorschlag. Aber ich kann nicht herausfinden, wie die Aufnahme beginnt und endet, wenn die eigentliche Animation beginnt und endet.

— posfan12