SVG坐标系统变换

1、translate变换

<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 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 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>

标签：200,变换,SVG,height,width,坐标,viewBox,200px
来源： https://www.cnblogs.com/xl4ng/p/15860129.html