从svg颜色更改失败到深度理解svg渲染原理

2024-02-15 22:52:40

踩坑经过

刚入职的新公司，一切都在熟悉阶段。入职第二天就遇到一个小问题，封装的svg组件在处理某个svg图片时，无法修改svg图片的颜色。

起初，我以为是组件出了问题，于是检查了组件的代码，发现一切正常。然后，我尝试使用不同的svg图片，发现只有这个特定的svg图片无法更改颜色。

探索原因

为了找出原因，我查看了svg图片的源代码。我发现这个svg图片与其他图片不同，它使用了<defs>元素定义了一组颜色。

<defs>
  <linearGradient id="gradient1">
    <stop offset="0%" stop-color="#000000" />
    <stop offset="100%" stop-color="#ffffff" />
  </linearGradient>
</defs>

<linearGradient>元素定义了一个渐变，它在svg图片中用于填充形状。渐变由一系列<stop>元素组成，每个<stop>元素定义了渐变中的一个颜色和位置。

解决方案

我意识到，无法更改svg图片颜色的原因是<linearGradient>元素。因为<linearGradient>元素定义了一组颜色，所以无法通过css样式覆盖这些颜色。

要解决这个问题，需要在svg组件中添加一个属性，以覆盖<linearGradient>元素定义的颜色。这个属性是style属性，它可以接受一个css样式字符串。

import React from "react";

const SvgComponent = ({ color }) => {
  return (
    <svg>
      <defs>
        <linearGradient id="gradient1">
          <stop offset="0%" stop-color="#000000" />
          <stop offset="100%" stop-color="#ffffff" />
        </linearGradient>
      </defs>
      <path fill={`url(#gradient1)`} style={{ fill: color }} />
    </svg>
  );
};

export default SvgComponent;