我无法在React应用程序中修改SVG组件 [英] I can't modify my SVG component in my React Application

问题描述

我一直在尝试在React中填充SVG组件的颜色，但无法正常工作.

I have been trying to fill the color of an SVG component in React, but it won't work.

我尝试使用图像标签进行反应.但是，我在React文档上读到，不支持带有img标签的CSS.

I've tried using an image tag to React. However, I read on the React docs that CSS with the img tag isn't supported.

//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>

我希望能够使用fill和其他类型的SVG可修改属性.

I would like to be able to use fill and other kinds of SVG modifiable attributes.

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

update:This is my css file code setup. .dotSvg is a item of .container class. Still need help

.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具有填充不透明度:0;样式，因此我将其删除，也可以将其放在一个样式上进行修复.

Solved! I found out that the svg had a fill-opacity: 0; style on it so I removed it or you could put it to one to fix this.

推荐答案

我从svg文件本身中删除了svg样式fill-opacity:0.如果您适合自己，也可以将0更改为1.

I removed the svg style fill-opacity:0 from the svg file itself. You could also change the 0 to 1 if you that works for you.

这篇关于我无法在React应用程序中修改SVG组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！