javascript - 我无法在我的 React 应用程序中修改我的 SVG 组件

Question

我一直在尝试在 React 中填充 SVG 组件的颜色，但它不起作用。

我试过使用图片标签来 React。但是，我在 React 文档中了解到不支持带有 img 标签的 CSS。

//css
.dotSvg{
  position: relative;
  fill: #5AE2EB;
}
//React
//import
import { ReactComponent as Dot } from './dot.svg';

//code itself
<div className="home">
  <Dot className="dotSvg"/>
  <h3>Home</h3>
</div>

我希望能够使用填充和其他类型的 SVG 可修改属性。

更新:这是我的 css 文件代码设置。 .dotSvg 是 .container 类的一个元素。仍然需要帮助

.container{ display: grid;
 text-align: center; 
grid-template-columns: auto auto auto auto auto; 
position: sticky; 
top: 0; 
}

 .dotSvg{ cursor: pointer; 
position: r
elative; 
fill: #5AE2EB; 
}

///svg file
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 2 2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><circle cx="1" cy="1" r="1" style="fill-opacity:0;"/></svg>

解决了!我发现 svg 有一个 fill-opacity: 0;样式，所以我删除了它，或者你可以把它放到一个来解决这个问题。

Answer 1

最常见的情况是 .svg 文件被转换/编辑或未正确导出，没有该文件是最简单的更改方法，例如颜色是在任何文本/代码编辑器中打开该文件，复制不带 xml 标签的代码，从 svg 标签复制到关闭/svg 标签并直接粘贴到代码中。

然后您可以轻松地为整个元素或它的某些部分设置样式，例如

.yourSvgWrapperDivClass svg g {
    fill: #0000FF;
}

您也可以直接引用 svg 文件/代码的某些元素(只需检查它)并尝试样式 g/path 或 rect 元素。