nicht angemeldet
Circles in SVG animieren
Hallo ;)!
Ich probiere mich gerade etwas in svg und möchte eine Animation mit Kreisen erstellen, aber habs momentan nicht so mit den Kreisen in SVG und zwar ist mein Problem, dass ich wenn ich die Koordinaten des Kreises verändere (zB auf cx = "50" cy ="50" anstatt cx = 0 und cy = 0) und dazwischen noch eine scale animation hinzufüge (siehe das bsp unten), wird der Kreis nicht an der Stelle x = 50 und y = 50 einfach hinzugefügt und dann erst skaliert, sondern der kreis bewegt sich dann einfach irgendwo hin.
an der Stelle cx = 0 und cy = 0 funktioniert das ganze aber ganz normal...
wenn ich die animation weglasse, dann wird uach der kreis an die entsprechende stelle gesetzt ...
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg width="240" height="291" viewBox="0 0 240 291"
stroke-miterlimit="2" enable-background="new" zoomAndPan="disable"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xml:space="preserve" version="1.1" tinyProfile="Normal">
<!-- Definitions 0 0 240 291-->
<defs>
</defs>
<!-- Movie Background -->
<rect fill="#fff" x="0" y="0" width="240" height="291"/>
<!-- Scene 1 -->
<g id="Scene_1">
<!-- Scene Background Color -->
<rect fill="#fff" x="0" y="0" width="240" height="291"/>
<!-- Animation -->
<g id="Animation_1">
<text x="100" y="100" id="Text_01_copy" font-size="23.87" font-family="Arial" fill="#fff">Bubbles<animate attributeName="fill"
values="#fff;#6f7472;#6f7472;#6f111"
keyTimes="0;0.22;1"
dur="3.54s" fill="freeze" repeatCount="indefinite"/><animateTransform attributeName="transform" type="translate" additive="replace"
values="-117,0;0,0;0,0"
keyTimes="0;0.22;1"
dur="3.54s" fill="freeze" repeatCount="indefinite"/></text>
<!--circle cx="120" cy="140" r="10" fill="none" stroke="#36e" stroke-width="1"-->
<!--animate attributeName="stroke-width" from="1" to="60" begin="1s" dur="4s" fill="freeze"/-->
<!--/circle-->
<circle cx="100" cy="100" r="30">
<!--animateTransform attributeName="transform" type="rotate" values="0;360" additive="sum" dur="3s" repeatDur="indefinite"/-->
<animateTransform attributeName="transform" type="scale" values="1;2;3;4;5" additive="sum" dur="4s" repeatDur="indefinite"/>
</circle>
</g>
</g>
</svg>
Hoffe ihr könnt mir helfen + danke für jede antwort!
lg
-
Niemand eine Idee :( ? (aja hab evtl noch vergessen zu erwähnen: nutze das tiny profil)