nicht angemeldet
SVG - externen Path definieren
Guten Tag,
Ich laboriere noch immer an meiner SVG-Datei.
Es geht darum, dass mehrere kleine GIFs denselben Kreis, aber mit unterschiedlichen "begin" and "dur" abfahren. Ich möchte daher wissen ob es eine Möglichkeit gibt den Pfad nur einmal zu definieren, so dass ich nicht für jedes GIF den Path erneut angeben muss.
Mit freundlichen Grüssen,
Sabina
-
Hallo Sabina,
Es geht darum, dass mehrere kleine GIFs denselben Kreis, aber mit unterschiedlichen "begin" and "dur" abfahren. Ich möchte daher wissen ob es eine Möglichkeit gibt den Pfad nur einmal zu definieren, so dass ich nicht für jedes GIF den Path erneut angeben muss.
Ja:
<defs>
<path id="grafik" .... />
</defs>
...
<use xlink:href="#grafik" ..... ></use>http://www.w3.org/TR/SVG/struct.html#UseElement
Grüße
Thomas-
Hallo
Danke für den Vorschlag, aber ich denke er ist nicht ganze was ich wollte. Ich illustrier es mal mit den relevanten Teilen des Quelltextes:
<path id="plr" d="M450,570 l1,0 A150,250 0 1,0 450,570 l1,0
A250,250 0 1,0 450,570 l1,0
A350,250 0 1,0 450,570 l1,0
A50,125 0 0,0 450,320 l1,0
A50,125 0 1,1 460,70 l1,0
A400,250 0 1,1 450,70 l1,0
A300,250 0 1,1 450,70 l1,0
A200,250 0 1,1 450,70 l1,0
A50,125 0 1,1 450,320 l1,0
A50,125 0 0,0 450,570 l1,0
" fill-opacity="0.0" stroke="gold" stroke-width="1px"/><path id="prl" d="M450,570 l1,0 A200,250 0 1,1 452,570 l1,0
A300,250 0 1,1 454,570 l1,0
A400,250 0 1,1 456,570 l1,0
A50,125 0 1,1 450,320 l1,0
A50,125 0 1,0 452,70 l1,0
A350,250 0 1,0 454,70 l1,0
A250,250 0 1,0 456,70 l1,0
A150,250 0 1,0 458,70 l1,0
A50,125 0 1,0 450,320 l1,0
A50,125 0 0,1 450,570 l1,0
" fill-opacity="0.0" stroke="brown" stroke-width="1px"/><image xlink:href="c1.gif" x="0" y="0" width="28" height="20">
<title>Shoot</title>
<animateMotion id="s1" path="M100,570 l1,0 a50,70 0 0,1 87.5,0 l1,0
a50,70 0 0,1 87.5,0 l1,0
a50,70 0 0,1 87.5,0 l1,0
a50,70 0 0,1 87.5,0 l1,0" begin="c2.end" dur="5s"/>
<animateMotion id="s2" path="M450,570 l1,0 A150,250 0 1,0 450,570 l1,0 A250,250 0 1,0 450,570 l1,0 A350,250 0 1,0 450,570 l1,0 A50,125 0 0,0 450,320 l1,0
A50,125 0 1,1 460,70 l1,0
A400,250 0 1,1 450,70 l1,0
A300,250 0 1,1 450,70 l1,0
A200,250 0 1,1 450,70 l1,0
A50,125 0 1,1 450,320 l1,0
A50,125 0 0,0 450,570 l1,0" begin="s1.end; s2.end" dur="30s"/><image xlink:href="c2.gif" x="0" y="0" width="15" height="15">
<title>Calm</title>
<animateMotion id="c2" path="M800,570 l1,0 a50,70 0 0,0 -87.5,0
a50,70 0 0,0 -87.5,0
a50,70 0 0,0 -87.5,0
a50,70 0 0,0 -87.5,0" begin="at1.end+5s" dur="5s"/>
<animateMotion id="c1" path="M440,570 l1,0 A200,250 0 1,1 452,570 l1,0 A300,250 0 1,1 454,570 l1,0 A400,250 0 1,1 456,570 l1,0 A50,125 0 1,1 450,320 l1,0
A50,125 0 1,0 452,70 l1,0
A350,250 0 1,0 454,70 l1,0
A250,250 0 1,0 456,70 l1,0
A150,250 0 1,0 458,70 l1,0
A50,125 0 1,0 450,320 l1,0
A50,125 0 0,1 450,570 l1,0" begin="c2.end; c1.end" fill="freeze" dur="300s"/><image xlink:href="c3.gif" x="0" y="0" width="28" height="20">
<title>Shoot</title>
<animateMotion id="s1" path="M100,570 l1,0 a50,70 0 0,1 87.5,0 l1,0
a50,70 0 0,1 87.5,0 l1,0
a50,70 0 0,1 87.5,0 l1,0
a50,70 0 0,1 87.5,0 l1,0" begin="c2.end" dur="5s"/>
<animateMotion id="s2" path="M450,570 l1,0 A150,250 0 1,0 450,570 l1,0 A250,250 0 1,0 450,570 l1,0 A350,250 0 1,0 450,570 l1,0 A50,125 0 0,0 450,320 l1,0
A50,125 0 1,1 460,70 l1,0
A400,250 0 1,1 450,70 l1,0
A300,250 0 1,1 450,70 l1,0
A200,250 0 1,1 450,70 l1,0
A50,125 0 1,1 450,320 l1,0
A50,125 0 0,0 450,570 l1,0" begin="s1.end; s2.end" dur="30s"/>Jedes ungerade .gif fängt kommt von links und führt dann etliche elliptische Bewegung aus, jedes gerade .gif kommt von rechts und führt die elliptischen Bewegungen rückwärts aus, nun möchte ich aber für jedes Bild den Path im animateMotion angeben, sondern nur einmal und dann darauf verweise mit use funktioniert das, allerdings kann ich dann keine unterschiedlichen begin-Bedingungen und dur-Zeiten festlegen und unterschiedliche Bilddateien ebenfalls nicht, gibt es eine andere Möglichkeit?
Gruß Sabina
-
Hallo Sabina,
Jedes ungerade .gif fängt kommt von links und führt dann etliche elliptische Bewegung aus, jedes gerade .gif kommt von rechts und führt die elliptischen Bewegungen rückwärts aus, nun möchte ich aber für jedes Bild den Path im animateMotion angeben, sondern nur einmal und dann darauf verweise mit use funktioniert das, allerdings kann ich dann keine unterschiedlichen begin-Bedingungen und dur-Zeiten festlegen und unterschiedliche Bilddateien ebenfalls nicht, gibt es eine andere Möglichkeit?
Jetzt habe ich verstanden was du meintest. Du möchtest nur die Attributwerte von 'path', 'begin' und 'dur' neu setzen, ich denke dass das noch ginge, wenn du nicht jedes mal auch ein anderes Bild verwenden würdest. Ich weiss nicht ob das so wie du es meinst ohne Scripting geht (aber ich bin auch kein Weltmeister im SVG ;-) ).
Grüße
Thomas-
Danke
Ich wollte auf Scripting verzichten, aber den der andere Hinweis hat sich schon anderweitig als sehr nützlich erwiesen. Vielleicht findet ja noch jemand einen Weg.
Gruß,
Sabina-
Hallo,
Ich wollte auf Scripting verzichten, aber den der andere Hinweis hat sich schon anderweitig als sehr nützlich erwiesen. Vielleicht findet ja noch jemand einen Weg.
Wenn es Dir um die Einsparung von Schreibarbeit bei den Pfaden geht, kannst Du auch die Pfade als Entity-Referenzen deklarieren und bei den Attributen referenzieren:
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [<!ENTITY pfad1 "M800,570 ...">
<!ENTITY pfad2 "M440,570 ...">]>
<svg>
<animateMotion id="c2" path="&pfad1;" begin="at1.end+5s" dur="5s"/>
<!-- analog weiter mit animateMotion und path="&pfad2;" usw. -->
</svg>
MfG, Thomas
-
-
-
-