html - 如何将字体大小更改为 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 混淆, you can read more about his in this post

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