SVG:use要素
x="cloned elementの左上隅の x 軸"
y="cloned elementの左上隅の y 軸"
width="the width of the cloned element"
height="the height of the cloned element"
xlink:href="a URI reference to the cloned element"
All
u.svg<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="5" cy="5" r="4" stroke="blue" />
<use href="#myCircle" x="10" fill="blue" />
<use href="#myCircle" x="20" fill="white" stroke="red" />
<!--
stroke="red" will be ignored here, as stroke was already set on myCircle.
Most attributes (except for x, y, width, height and (xlink:)href)
do not override those set in the ancestor.
That's why the circles have different x positions, but the same stroke value.
-->
</svg> 