如何透過 <use> 元素(如圖片)調整 SVG 圖示的大小
P粉184747536
P粉184747536 2023-09-15 21:09:43
0
1
912

在我的 HTML 文件中,我有一個 ,其中包含許多具有 id 屬性的項目,例如 icon-x

然後我想重複使用這些圖標,例如

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

但是,本例中的圖示在來源 SVG 中可能具有不同的大小。我希望它們適合 div.container,但容器中的 svg 周圍有空白。

我怎麼能告訴它我指向的東西,並知道那個東西定義了的大小,這樣當我做CSS像. container svg { width: 100%; height: auto;} 它的運作方式與 標籤一樣嗎?

P粉184747536
P粉184747536

全部回覆(1)
P粉356361722
  1. icon-x 必須是一個符號或具有 viewBox 屬性的巢狀 svg

  2. 使用icon-x時,您可以為元素指定寬度高度代码>. 您也可以為 指定不同的位置(x 和 y 屬性)或不同的填滿。

在下一個範例中,我使用 。您可以選擇使用巢狀 svg。在這種情況下,您可能想要將其放入

#
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>
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板