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

https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/suto3/SVG:use要素/u.svg

code:u.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>

SVG要素.icon