XML/SVG/transform
Содержание
Transform circle
<source lang="xml">
<svg>
<circle id="myCircle" cx="100" cy="100" r="20" style="stroke: black; fill: linen;"/> <use xlink:href="#myCircle" transform="translate(50, -50) scale(1.5) "/>
</svg>
</source>
transform the coordinate
<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(100,100)"> <rect x="0" y="0" width="50" height="50" style="fill:red;" /> </g> <g transform="translate(300,100)"> <rect x="0" y="0" width="50" height="50" style="fill:red;" /> </g> <g transform="translate(100,300)"> <rect x="0" y="0" width="50" height="50" style="fill:red;" /> </g> <g transform="translate(300,300)"> <rect x="0" y="0" width="50" height="50" style="fill:red;" /> </g>
</svg>
</source>
Using Multiple SVG scale Elements
<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="800" height="500">
<defs> <pattern id="checkerPattern" width="80" height="80" patternUnits="userSpaceOnUse"> <rect fill="red" x="0" y="0" width="40" height="40" /> <rect fill="blue" x="0" y="40" width="40" height="40" /> </pattern> </defs> <g transform="translate(50,50)"> <g transform="scale(1)"> <rect fill="url(#checkerPattern)" style="stroke:white" x="0" y="0" width="320" height="320"> </rect> </g> </g> <g transform="translate(50,50)"> <g transform="scale(.6)"> <rect fill="url(#checkerPattern)" style="stroke:white" x="0" y="0" width="320" height="320"> </rect> </g> </g> <g transform="translate(50,50)"> <g transform="scale(.2)"> <rect fill="url(#checkerPattern)" style="stroke:white" x="0" y="0" width="320" height="320"> </rect> </g> </g>
</svg>
</source>
Using the SVG scale Function with Checkerboards
<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="800" height="500">
<defs> <pattern id="checkerPattern" width="80" height="80" patternUnits="userSpaceOnUse"> <rect fill="red" x="0" y="0" width="40" height="40" /> <rect fill="blue" x="40" y="0" width="40" height="40" /> <rect fill="blue" x="0" y="40" width="40" height="40" /> <rect fill="red" x="40" y="40" width="40" height="40" /> </pattern> </defs> <g transform="translate(50,50)"> <g transform="scale(.5)"> <rect fill="url(#checkerPattern)" style="stroke:white" x="0" y="0" width="320" height="320" /> </g> </g>
</svg>
</source>