В этой теме мы рассмотрим примеры, как делать анимацию в inkscape. Начнем с самого простого.
Как вы, наверное, уже знаете, inkscape - это векторный редактор, который сохраняет свои файлы SVG в формате XML.
XML-файлы можно редактировать также, используя различные текстовые редакторы, даже обычной Блокнот в Windows.
Давайте создадим какую нибудь одну фигуру в inkscape. Я сделал просто круг.

Сохраним файл с фигурой в inkscape в формате SVG.
Откройте созданный файл SVG в тектовом редакторе, например в блокноте и вы увидите:
Код: Выделить всё
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="210mm"
height="297mm"
viewBox="0 0 744.09448819 1052.3622047"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="drawing-1.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.35"
inkscape:cx="-139.28571"
inkscape:cy="520"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1600"
inkscape:window-height="837"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<circle
style="opacity:1;fill:#00ffff;fill-opacity:1;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path4136"
cx="-321.42856"
cy="468.07648"
r="110" />
</g>
</svg>
Кроме удаления не нужных для нашей задачи параметров (это было нужно для большей наглядности, чтобы сделать код по-проще) я изменил:
Ширину и высоту рисунка: width="1500" height="1500".
Начальное положение нарисованного круга: cx="200" cy="200".
Идентификатор круга с автоматического названия на более читаемое: id="BlueCircle".
Код: Выделить всё
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns="http://www.w3.org/2000/svg"
width="1500"
height="1500"
version="1.1">
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<circle
style="opacity:1;fill:#00ffff;fill-opacity:1;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="BlueCircle"
cx="200"
cy="200"
r="110" />
</g>
</svg>
Код: Выделить всё
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns="http://www.w3.org/2000/svg"
onload="Start(evt)"
width="1500"
height="1500"
version="1.1">
<script type="text/ecmascript">
<![CDATA[
var time = 0;
var delta_time = 25;
var max_time = 1000;
var dir = 1;
var the_rect;
function Start(evt) {
the_rect = evt.target.ownerDocument.getElementById("BlueCircle");
Oscillate();
}
function Oscillate() {
time = time + dir * delta_time;
if (time > max_time) dir = -1;
if (time < -max_time) dir = 1;
// Calculate x position
x_pos = (time * 25) / max_time;
the_rect.setAttribute("transform", "translate(" +x_pos+ ", 0.0 )");
// Repeat
setTimeout("Oscillate()", delta_time)
}
window.Oscillate = Oscillate
]]>
</script>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<circle
style="opacity:1;fill:#00ffff;fill-opacity:1;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="BlueCircle"
cx="200"
cy="200"
r="110" />
</g>
</svg>
