Cara mengubah saiz ikon SVG melalui elemen <use> seperti imej

Question

Dalam dokumen HTML saya, saya mempunyai ，其中包含许多具有 id 属性的项目，例如 icon-x.

Kemudian saya mahu menggunakan semula ikon ini seperti

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

Walau bagaimanapun, ikon dalam contoh ini mungkin mempunyai saiz yang berbeza dalam SVG sumber. Saya mahu mereka muat div.container tetapi mempunyai ruang putih di sekeliling svg dalam bekas.

Bagaimana saya boleh memberitahunya我指向的东西，并知道那个东西定义了的大小，这样当我做CSS像 .container svg { width: 100%; height: auto;} 它的工作原理与 Adakah labelnya sama?

Answer 1

1. icon-x mestilah simbol atau svg bersarang dengan atribut ViewBox

2. Apabila menggunakan icon-x时，您可以为元素指定宽度, anda boleh menentukan lebar dan 代码>height untuk elemen

   . Anda juga boleh menentukan kedudukan berbeza (atribut x dan y) atau pelapik berbeza untuk
.

。您可以选择使用嵌套 svg。在这种情况下，您可能希望将其放入

Dalam contoh seterusnya, saya menggunakan

. Anda boleh menggunakan svg bersarang secara pilihan. Dalam kes ini, anda mungkin mahu memasukkannya ke dalam

🎜🎜 🎜

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>