在 SVG 中,可以使用 <symbol> 定义可重用的图形对象并使用 <use> 引用,但通过在 <defs> 中定义图形对象也可以实现相同的效果。
例如,下面显示以这两种方式定义的两个矩形。(使用不同的位置和尺寸,因此两者都可以看到。否则,可重复使用的对象没有区别。)
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 500 500">
<defs>
<rect id="myRect" x="30" y="30" width="30" height="40" />
</defs>
<symbol id="mySymbol">
<rect x="80" y="80" width="80" height="90" />
</symbol>
<use href="#myRect" />
<use href="#mySymbol" />
</svg>
Run Code Online (Sandbox Code Playgroud)
有功能上的区别吗?或者在某些情况下人们可能想要(或应该)使用 <symbol> 的任何原因?