|
|
A line segment can be rotated with the following SVG snippet:
<g transform="translate(200,200)"> <line x1="0" y1="0" x2="100" y2="0" style="stroke:green;stroke-width:4;"> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="4s"/> </g>
Rotating a rectangle around its upper-left vertex can be done with the following SVG snippet:
<g transform="translate(150,150)"> <rect x="0" y="0" width="100" height="50" style="fill:red;stroke:green;stroke-width:4;"> <animateTransform attributeName="transform" attributeType="XML" type="rotate" fill="freeze" from="0" to="360" dur="4s"/> </rect> <ellipse cx="0" cy="0" rx="4" ry="4" style="fill:blue;stroke:none"/> </g>
Rotating a rectangle around its center can be handled with the following SVG snippet:
<g transform="translate(400,150)"> <rect x="-50" y="-25" width="100" height="50" style="fill:yellow;stroke:green;stroke-width:4;"> <animateTransform attributeName="transform" attributeType="XML" type="rotate" fill="freeze" from="0" to="360" dur="4s"/> </rect> <ellipse cx="0" cy="0" rx="4" ry="4" style="fill:blue;stroke:none"/> </g>
Simple scaling animation with a text string can be done with the following SVG snippet:
<g transform="translate(50,200)"> <text x="0" y="0" fill="green" font-size="96"> <animateTransform attributeName="transform" attributeType="XML" type="scale" from="0" to="1" begin="0s" dur="4s"/> Sample Text </text> </g>
|
|