Comment redimensionner les icônes SVG via des éléments <use> tels que des images

Question

Dans mon document HTML, j'ai un ，其中包含许多具有 id 属性的项目，例如 icon-x.

Ensuite, je veux réutiliser ces icônes comme

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

Cependant, les icônes de cet exemple peuvent avoir des tailles différentes dans le SVG source. Je veux qu'ils tiennent div.container mais qu'il y ait un espace blanc autour du svg dans le conteneur.

Comment puis-je le savoir我指向的东西，并知道那个东西定义了的大小，这样当我做CSS像 .container svg { width: 100%; height: auto;} 它的工作原理与 L'étiquette est-elle la même ?

Answer 1

1. icon-x doit être un symbole ou un svg imbriqué avec un attribut viewBox

2. Lorsque vous utilisez icon-x时，您可以为元素指定宽度, vous pouvez spécifier la width et la 代码>height pour l'élément

   . Vous pouvez également spécifier différentes positions (attributs x et y) ou un remplissage différent pour
.

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

Dans l'exemple suivant, j'utilise

. Vous pouvez éventuellement utiliser des svg imbriqués. Dans ce cas, vous souhaiterez peut-être le mettre dans

🎜🎜 🎜

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>