Question

我将所有图标都添加为html文件中的符号，例如：

<symbol id="flag-bg"><g fill-rule="evenodd" stroke-width="1pt"><path fill="#d62612" d="M0 319.997h640V480H0z"/><path fill="#fff" d="M0 0h640v160.003H0z"/><path fill="#00966e" d="M0 160.003h640v160.003H0z"/></g></symbol>

我想用它来显示一个32 x 24的图标

<svg width="32" height="24" viewbox="0 0 32 24" id="#lg-bg"><use href="#flag-bg"><title></title></use></svg>

但是它不会调整标志的大小来填充大小。实现它的魔力是什么？

Answer 1

您必须在viewBox元素上设置一个<symbol>属性，使其与内容的实际大小相匹配。要找出大小，可以使用.getBBox()函数。暂时将<symbol>换成<svg>，并且不管介意的输出是否没有意义。您只需要控制台上的数字即可：

console.log(document.querySelector('#flag-bg').getBBox())

<svg>
  <svg id="flag-bg">
    <g fill-rule="evenodd" stroke-width="1pt">
      <path fill="#d62612" d="M0 319.997h640V480H0z"/>
      <path fill="#fff" d="M0 0h640v160.003H0z"/>
      <path fill="#00966e" d="M0 160.003h640v160.003H0z"/>
    </g>
  </svg>
</svg>

然后，将这些值用于您的viewBox。无需在<use>元素上设置大小，默认大小为周围<svg>元素的100％。

<svg width="0" height="0">
  <symbol id="flag-bg" viewbox="0 0 640 480">
    <g fill-rule="evenodd" stroke-width="1pt">
      <path fill="#d62612" d="M0 319.997h640V480H0z"/>
      <path fill="#fff" d="M0 0h640v160.003H0z"/>
      <path fill="#00966e" d="M0 160.003h640v160.003H0z"/>
    </g>
  </symbol>
</svg>

<svg width="32" height="24" viewbox="0 0 32 24" id="#lg-bg">
  <use href="#flag-bg"><title></title></use>
</svg>

Answer 2

您可以使用viewbox属性来缩放svg图标检查下面的代码和参考链接

<h1>Auto-Scaling an SVG Image with a <code>viewBox</code>
<div>&mdash;watch out for IE and table layouts</div></h1>
<figure>
<figcaption><code>img</code>, 100xauto height</figcaption>
<div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91525/potofgold.svg" 
style="width:100px">
</div>
</figure>
<figure>
<figcaption><code>img</code>, auto widthx50</figcaption>
<div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91525/potofgold.svg" 
 style="height:50px">
</div>
</figure>
<figure>
<figcaption><code>img</code>, auto size</figcaption>
<div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91525/potofgold.svg">
</div>
</figure>

您可以使用viewbox属性并在其中缩放svg图标。

参考链接clickhere

如何调整svg图标的大小（使用href）

2 个答案: