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>