Question

pointer属性起作用，但是fill属性不起作用。当我在浏览器中打开控制台并查看元素时，可以更改element.style，这将影响svg组件的样式。

我尝试更改element.style，并且在fill属性旁边使用了！important，但它仍然无法正常工作

//React file

//This is the import
import { ReactComponent as Dot } from './dot.svg';

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

//css file and outside wrapper
.container{
    display: grid;
    text-align: center;
    grid-template-columns: auto auto auto auto auto;
    /* grid-template-rows: 100px 300px; */
    position: sticky;
    top: 0;
}
.dotSvg{ 
cursor: pointer; 
fill: #5AE2EB; 
}


///the inside of the dot.svg
<?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>

我希望能够使用fill属性填充svg组件

Answer 1

这似乎是由于style="fill-opacity:0;"元素上的<circle>而发生的。删除此选项或增加不透明度应该可以使填充可见

我在修改React项目中的svg组件的一些属性值时遇到问题

1 个答案: