如何更改 SVG 的字体大小？

Question

我在我的网站上使用 svg 图标。这是我从 Adob​​e Illustrator 获得的代码：

<svg id="Livello_1" data-name="Livello 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448.05 436.7"><path d="M190.5,66.9l22.2-22.2a23.9,23.9,0,0,1,33.9,0L441,239a23.9,23.9,0,0,1,0,33.9L246.6,467.3a23.9,23.9,0,0,1-33.9,0l-22.2-22.2a24,24,0,0,1,.4-34.3L311.4,296H24A23.94,23.94,0,0,1,0,272V240a23.94,23.94,0,0,1,24-24H311.4L190.9,101.2A23.85,23.85,0,0,1,190.5,66.9Z" transform="translate(0 -37.65)"/></svg>

我已经能够改变它的颜色（在我的 css 中fill:#33453a;），但不能改变它的大小（我尝试使用 和font-size，width但它们都不起作用）。我尝试这样做的原因是我需要一个可以在:hover状态中更改颜色和大小的图标。

Answer 1

这可能是一个棘手的问题。正如其他人指出的那样，您打算做的事情是不可能的，但是不可能font-size并不意味着不可能使其按照您的预期工作。

如果您研究像React-icons这样的大项目，您可以了解他们是如何做到这一点的。

    const computedSize = size || conf.size || "1em";
    let className;
    if (conf.className) className = conf.className;
    if (props.className) className = (className ? className + ' ' : '') + props.className;

    return (
      <svg
        stroke="currentColor"
        fill="currentColor"
        strokeWidth="0"
        {...conf.attr}
        {...attr}
        {...svgProps}
        className={className}
        style={{ color: props.color || conf.color, ...conf.style, ...props.style}}
        height={computedSize}
        width={computedSize}
        xmlns="http://www.w3.org/2000/svg"
      >
      {title && <title>{title}</title>}
      {props.children}
    </svg>
    )
  };

所以你可能有类似的东西：<span style="font-size: 14px">hi <svg ...></svg></span>。

诀窍是分配with和height单位em，它代表ephemeral unit不要与 混淆rem，你可以在这篇文章中阅读更多关于他的内容

该em单元在浏览器中执行的操作是查看最接近的定义font-size并将其附加到 SVG 上下文，这就是获得相同尺寸的方式。

解决办法：添加width:1em和height:1em

<svg height="1em" width="1em" id="Livello_1" data-name="Livello 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448.05 436.7"><path d="M190.5,66.9l22.2-22.2a23.9,23.9,0,0,1,33.9,0L441,239a23.9,23.9,0,0,1,0,33.9L246.6,467.3a23.9,23.9,0,0,1-33.9,0l-22.2-22.2a24,24,0,0,1,.4-34.3L311.4,296H24A23.94,23.94,0,0,1,0,272V240a23.94,23.94,0,0,1,24-24H311.4L190.9,101.2A23.85,23.85,0,0,1,190.5,66.9Z" transform="translate(0 -37.65)"/></svg>

Answer 2

由于它不包含带有字体的文本，因此更好的方法是使用缩放来增加尺寸。:

<style> 
svg
{
   transform: scale(1.3);
}
</style>