在我的HTML文檔中，我有一個& ltsvg & gt這包括許多具有id屬性的項目，如icon-x。

然后我想重復使用這些圖標，比如

<div class=container>
  <svg><use xlink:href=#icon-x /></svg>
</div>

然而，在這種情況下，源SVG中的圖標可能大小不同。我希望它們適合div.container，但是容器中的svg周圍有空白。

我該怎么告訴& lt使用& gt我指向的東西，并且知道那個東西定義了& ltsvg & gt這樣當我做CSS的時候。容器svg {寬度:100%；高度:自動；}它的工作方式與& ltimg & gt標簽？

icon-x必須是一個符號或具有viewBox屬性的嵌套svg

當使用圖標-x時，您給出& lt使用& gt元素有寬度和高度。 你也可以給& lt使用& gt不同的位置(x和y屬性)或不同的填充。

在下一個例子中，我使用了& ltsymbol & gt。您可以選擇使用嵌套的svg。在這種情況下，您可能希望將它放在& ltdefs & gt

svg{
border:solid;
width:90vh;
}

<svg viewBox="0 0 240 240">
<symbol  id="icon-x"  viewBox="0 0 24 24">
   <path d="M21 16v-2l-8-5v-5.5c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v5.5l-8 5v2l8-2.5v5.5l-2 1.5v1.5l3.5-1 3.5 1v-1.5l-2-1.5v-5.5l8 2.5z"></path>
</symbol>
  <use xlink:href="#icon-x" x="10" y="10" width="150" height="150"/>
  <use xlink:href="#icon-x" x="120" y="120" width="50" height="50" fill="blue"/>
</svg>