nicht angemeldet
SVG Eine Grafik von zwei seiten knautschen
Hallo
Ich möchte in einem SVG eine Grafik so animieren, daß deren breite quasi von 100% auf 0% geht. Des weiteren soll das aber auch in die andere Richtung geschehen können - soll heissen: das eine Viereck soll auf seiner linken Seite verankert sein, das andere auf der rechten.
Ich habe zwei Probleme:
1. Wie kann ich die "Richtung" der animation ändern?
2. Warum bewegt sich das ganze Rechteck, obwohl ich zum testen ein "scale-beispiel" aus der SVG spezifikation genommen habe?
Hier der testcode soweit:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/Graphics/SVG/1.0/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<rect x="30" y="10" width="30" height="30" >
<animateTransform attributeName="transform" type="scale" from="1,1" to="0,1" dur="5s" fill="freeze"/>
</rect>
<rect x="30" y="50" width="30" height="30" >
<animateTransform attributeName="transform" type="scale" from="1,1" to="0,1" dur="5s" fill="freeze"/>
</rect>
<line x1="30" y1="0" x2="30" y2="100"/>
<line x1="60" y1="0" x2="60" y2="100"/>
</svg>
-
Hi,
versuch es mal damit
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/Graphics/SVG/1.0/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><g transform="translate(30,10)">
<rect x="0" y="0" width="30" height="30" >
<animateTransform attributeName="transform" type="scale" from="1,1" to="0,1" dur="5s" fill="freeze"/>
</rect>
</g><g transform="translate(60,50)">
<rect x="0" y="0" width="30" height="30" >
<animateTransform attributeName="transform" type="scale" from="-1,1" to="0,1" dur="5s" fill="freeze"/>
</rect>
</g>
<line x1="30" y1="0" x2="30" y2="100"/>
<line x1="60" y1="0" x2="60" y2="100"/>
</svg>beim rechten Quadrat wird von -1 bis 0 skaliert.
Damit die Position nicht mitskaliert wird, werden die Rechtecke bei 0,0 positioniert und in ein <g> gepackt. Das <g> wird anschließend mit translate entsprechend positioniert. -
Hallo,
Ich möchte in einem SVG eine Grafik so animieren, daß deren breite quasi von 100% auf 0% geht. Des weiteren soll das aber auch in die andere Richtung geschehen können - soll heissen: das eine Viereck soll auf seiner linken Seite verankert sein, das andere auf der rechten.
Alternative zum Vorschlag von gk:
<rect x="30" y="10" width="30" height="30">
<animate attributeName="width" to="0" dur="5s" fill="freeze"/>
</rect><rect x="30" y="50" width="30" height="30">
<animate attributeName="width" to="0" dur="5s" fill="freeze"/>
<animate attributeName="x" to="60" dur="5s" fill="freeze"/>
</rect>MfG, Thomas