SVG坐标系统变换

1、translate变换

SVG坐标系统变换

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    width="200px" height="200px" viewBox="0 0 200 200">
    <g id="square">
        <rect x="10" y="10" width="20" height="20"
              style="fill:none;stroke:black;stroke-width:2;"/>
    </g>
    <use xlink:href="#square" transform="translate(50,50)"/>
</svg>

2、scale变换

SVG坐标系统变换

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    width="200px" height="200px" viewBox="0 0 200 200">
    <g id="square">
        <rect x="10" y="10" width="20" height="20"
              style="fill:none;stroke:black;stroke-width:2;"/>
    </g>
    <use xlink:href="#square" transform="scale(2)"/>
    <use xlink:href="#square" transform="scale(3,1.5)"/>
</svg>

3、变换序列

SVG坐标系统变换

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    width="200px" height="200px" viewBox="0 0 200 200">
    <g id="square">
        <rect x="10" y="10" width="20" height="20"
              style="fill:none;stroke:black;stroke-width:2;"/>
    </g>
    <use xlink:href="#square" transform="translate(50,50) scale(3,1.5)"/>
</svg>
上一篇:html圣杯布局


下一篇:css3有趣的transform形变