如何使SVG图像着色？
#css #svg #maskimage #img

您是否厌倦了使用icoMoon来维护您的SVG图标？虽然它是管理图标的绝佳工具，但其用户界面可能会留出很多不足的信息。最重要的是，您可能正在寻求减少对第三方工具的依赖。如果是这样，CDN可以是完美的解决方案。

但是，从Icomoon转换为CDN可以带来一些您应该知道的更改。 CDN不使用基于字体的方法，需要将图标添加为图像。交付和显示的这种转变可能需要一些习惯，但不应影响图标本身的功能。

基于Icomoon字体的方法

在这种方法中，我们使用 icomoon classNames渲染svg图标。

我们可以使用这样的CSS更改SVG图标的颜色。 ð

.icomoon-logo {
  color: red;
}

icomoon-example

带有HTML <img>元素方法的SVG

在这种方法中，我们使用 img 标签来渲染SVG图标。

但是，当我们与 html img 标签一起使用时，我们无法使用CSS更改SVG图标的颜色。这是不起作用的！

我们将SVG图标放在 src 属性中 

<img src="https://cdn.dsmcdn.com/example-icon.svg" alt="example-icon" />

svg-hmtl-img-approach

我们如何更改svg <img>图标的颜色？

1-骇人听闻的方式

我们可以使用骇人听闻的方式来处理这样的方法。 ð

此过滤器能够更改SVG HTML <img>元素的颜色，但您需要通过试用方法找到所需的颜色。

img: {
  filter: invert(20%) sepia(243%) saturate(1576%) hue-rotate(-21deg) brightness(137%) contrast(73%);
}

hacky-way

SOURCE

这是您可以使用它但不是最好的方法！

此时我们还能做什么？让我向您介绍 css mask ！

2- CSS面具

我认为， css蒙版是解决此问题的理想解决方案。通过使用 mask-image 属性，我们可以像字体一样渲染SVG图像。为此，我们需要为SVG图标创建 css类。

这是SVG图标的CSS类。 ð

.icon {
  mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-position: center;
  width: 24px;
  height: 24px;
}

然后，我们将使用 mask-image 属性来像字体一样呈现SVG图像。但是我们将用 React 动态定义它。 ð

我们还需要定义 webkitmaskimage safari 浏览器。

const MenuItem = ({ SvgIcon, selectedName, link }: MenuItemProps) => {
  return (
    <a className={cn("menu-item", selectedName === "my_coupons" && "active")} href={link}>
      <div className="icon" style={{ maskImage: `url(${SvgIcon})`, WebkitMaskImage: `url(${SvgIcon})` }} />
      <p className="name">"My Coupons"</p>
    </a>
  );
};

就是这样！现在，我们可以使用这样的CSS更改SVG图标的颜色。 ð

.icon {
  background-color: red;
}

让我们看一下结果。 ð

CSS Mask

结论

在本文中，我们学会了如何使用字体之类的SVG图像。我们学会了如何使用CSS更改SVG图像的颜色。我们还学会了如何使用HTML <img>标签使用SVG图像。希望您喜欢这篇文章。如果您有任何疑问，请在评论中告诉我。感谢您的阅读！