如何通过<use>元素来调整SVG图标的大小，就像调整图像一样。

huangapple
go评论48阅读模式
英文:

How to size a SVG icon via a <use> element like an image

问题

在我的HTML文档中，我有一个包含许多带有id属性的&lt;svg&gt;元素，例如icon-x。

然后，我想像这样重用这些图标：

&lt;div class=container&gt;
  &lt;svg&gt;&lt;use xlink:href=#icon-x /&gt;&lt;/svg&gt;
&lt;/div&gt;

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

我该如何告诉它要使用我指向的那个东西，并知道那个东西定义了&lt;svg&gt;的大小，这样当我像这样使用CSS时 .container svg { width: 100%; height: auto;} 它就像使用&lt;img&gt;标签一样工作？

英文:

In my HTML document I have an &lt;svg&gt; that includes many items with id attributes like icon-x.

I then want to reuse these icons like

&lt;div class=container&gt;
  &lt;svg&gt;&lt;use xlink:href=#icon-x /&gt;&lt;/svg&gt;
&lt;/div&gt;

However, the icons in this case may be different sizes within the source SVG. I want them to fit the div.container, but the svg in the container has whitespace around it.

How can I tell it to &lt;use&gt; the thing I point to, and know that that thing defines the size of the &lt;svg&gt;, so that then when I do CSS like .container svg { width: 100%; height: auto;} it works as it would an &lt;img&gt; tag?

答案1

得分: 2

  1. icon-x 必须是一个符号或带有 viewBox 属性的嵌套 svg。

  2. 当使用 icon-x 时，您需要为 &lt;use&gt; 元素指定 width 和 height。您还可以为 &lt;use&gt; 指定不同的位置（x 和 y 属性）或不同的填充。

在下一个示例中，我正在使用一个 &lt;symbol&gt;。您可以选择使用嵌套的 svg 替代。在这种情况下，您可能希望将其放在 &lt;defs&gt; 中。

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

<!-- language: lang-html -->

<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>

<!-- end snippet -->

英文:

  1. The icon-x must be a symbol or a nested svg with a viewBox attribute

  2. When using the icon-x you give the &lt;use&gt; element an width and a height.
    You can also give the &lt;use&gt; a different position (x and y attributes) or a different fill.

In the next example I'm using a &lt;symbol&gt;. You can choose to use a nested svg instead. In this case you may want to put it in a &lt;defs&gt;

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

<!-- language: lang-html -->

&lt;svg viewBox=&quot;0 0 240 240&quot;&gt;
&lt;symbol  id=&quot;icon-x&quot;  viewBox=&quot;0 0 24 24&quot;&gt;
   &lt;path d=&quot;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&quot;&gt;&lt;/path&gt;
&lt;/symbol&gt;
  &lt;use xlink:href=&quot;#icon-x&quot; x=&quot;10&quot; y=&quot;10&quot; width=&quot;150&quot; height=&quot;150&quot;/&gt;
  &lt;use xlink:href=&quot;#icon-x&quot; x=&quot;120&quot; y=&quot;120&quot; width=&quot;50&quot; height=&quot;50&quot; fill=&quot;blue&quot;/&gt;
&lt;/svg&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月24日 18:38:22
  • 转载请务必保留本文链接：https://go.coder-hub.com/76322609.html
  • css
  • html
  • svg
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定