Html 如何通过像图像一样的元素来调整 SVG 图标的大小

发布于05月24日

在我的HTML文档中，我有一个<svg>，它包括许多具有id个属性的项，比如icon-x.

然后我想重复使用这些图标，比如

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

然而，这种情况下的图标在源SVG中可能有不同的大小.我希望它们适合div.container，但容器中的SVG周围有空格.

我怎么才能告诉<use>我所指向的东西，并知道它定义了<svg>的大小，这样当我像.container svg { width: 100%; height: auto;}做css时，它的工作方式就像<img>标签一样？

推荐答案

icon-x必须是符号或具有ViewBox属性的嵌套SVG
当使用icon-x时，<use>元素的值是width和height. 您还可以为<use>指定不同的位置(x和y属性)或不同的填充.

在下一个例子中，我使用的是<symbol>.您可以 Select 使用嵌套的SVG.在这种情况下，你可能想把它放在<defs>

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>