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>
Antworten:
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.
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
~
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
quelle
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:
zu:
In den Zeilen 2361 und 2390 wird geändert von:
zu:
Mein Generationsskript:
quelle
Wenn Sie FireFox verwenden, können Sie SVG Render Plug in einem Versuch geben: http://adasek.cz/svgrender/
quelle