时间戳

首页 > 解决方案 > 我在修改 React 项目中 svg 组件的一些属性值时遇到问题

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

问题描述

指针属性有效，但填充属性无效。当我在浏览器上打开控制台并查看元素时，我可以更改 element.style，这将影响 svg 组件的样式。

我尝试更改 element.style 并在填充属性旁边使用了 !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 组件

标签： cssreactjssvg

解决方案

看起来这是因为style="fill-opacity:0;"on<circle>元素而发生的。删除它或增加不透明度应该允许填充可见

推荐阅读