SVG:symbol要素
オブジェクトをグループ化して参照するための要素
<symbol> - SVG: Scalable Vector Graphics | MDN
SVG:オブジェクト - SVG:object
SVG:グループ化 - SVG:grouping
https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/suto3/SVG:symbol要素/s.svg
code:s.svg
<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg">
<!-- Our symbol in its own coordinate system -->
<symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
<circle cx="1" cy="1" r="1" />
</symbol>
<!-- A grid to materialize our symbol positioning -->
<path
d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20"
fill="none"
stroke="pink" />
<!-- All instances of our symbol -->
<use href="#myDot" x="5" y="5" style="opacity:1.0" />
<use href="#myDot" x="20" y="5" style="opacity:0.8" />
<use href="#myDot" x="35" y="5" style="opacity:0.6" />
<use href="#myDot" x="50" y="5" style="opacity:0.4" />
<use href="#myDot" x="65" y="5" style="opacity:0.2" />
</svg>
SVG要素.icon