使用圖示
<use>
元素通常用於與 <symbol>
元素協作的可重複使用的圖示。看起來像這樣:
<svg>
<symbol viewBox="0 0 16 16" id="icon-star">
<path d="M16 6.216l-6.095-.02L7.98.38 6.095 6.196 0 6.215h.02l4.912 3.57-1.904 5.834h.02l4.972-3.59 4.932 3.59-1.904-5.815L16 6.215" />
</symbol>
</svg>
而 <use>
元素:
<svg>
<use xlink:href="#icon-star"/>
</svg>
<use>
元素複製 <symbol>
並顯示它。你還可以在 <symbol>
上覆蓋各個 <use>
元素上的樣式,例如
<style>
.red {
fill: red;
}
</style>
<svg>
<use class="red" xlink:href="#icon-star"/>
</svg>