XML/SVG/translate
Содержание
Rotating a Line Segment
<source lang="xml">
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
<svg width="100%" height="100%">
<g transform="translate(200,180)"> <line x1="0" y1="0" x2="150" y2="0" stroke-dasharray="4 4 4 4" stroke="blue" stroke-width="8"/> <line x1="0" y1="0" x2="150" y2="0" stroke-dasharray="8 8 8 8" stroke="red" stroke-width="8"> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="4s"/> </line> </g>
</svg>
</source>
Rotating Rectangles (rotation point: center)
<source lang="xml">
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg- 20001102.dtd">
<svg width="100%" height="100%">
<g transform="translate(400,150)"> <rect x="-50" y="-25" width="100" height="50" stroke-dasharray="8 8 8 8" 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>
</svg>
</source>
Rotating Rectangles (rotation point: upper-left vertex)
<source lang="xml">
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg- 20001102.dtd">
<svg width="100%" height="100%">
<g transform="translate(150,150)"> <rect x="0" y="0" width="100" height="50" stroke-dasharray="4 4 4 4" 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>
</svg>
</source>
Using the SVG translate Function
<source lang="xml">
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
<svg width="100%" height="100%">
<g transform="translate(0,0)"> <rect x="0" y="0" width="50" height="50" style="fill:red;stroke:yellow" /> </g> <g transform="translate(50,50)"> <rect x="0" y="0" width="50" height="50" style="fill:green;stroke:red" /> </g> <g transform="translate(100,100)"> <rect x="0" y="0" width="50" height="50" style="fill:blue;stroke:green" /> </g>
</svg>
</source>