Question

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

我尝试使用图像标签来进行反应。但是，我在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>

我希望能够使用fill和其他种类的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具有填充不透明度：0;样式，因此我将其删除，或者您可以将其放到一个上进行修复。

Answer 1

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

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

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

您还可以直接引用svg文件/代码的某些元素（只需检查一下），然后尝试使用样式g / path或rect元素。

Answer 2

似乎最好的处理方法是将SVG代码本身用作组件，然后根据需要使用props传递填充颜色。

// App
const App = React.createClass({
  render() {
    return (
      <div>
        <div className="switcher">
          <IconOffice />
        </div>
        <IconOffice bookfill="orange" bookside="#39B39B" bookfront="#76CEBD" />
        <IconOffice width="200" height="200" />
      </div>
    )
  }
});

// Icon
const IconOffice = React.createClass({
  getDefaultProps() {
    return {
      width: '100',
      height: '200',
      bookfill: '#f77b55',
      bookside: '#353f49',
      bookfront: '#474f59'
    };
  },
 render() {
   return (
     <svg className="office" xmlns="http://www.w3.org/2000/svg" width={this.props.width} height={this.props.height} viewBox="0 0 188.5 188.5" aria-labelledby="title">
        <title id="title">Office Icon</title>
        <g className="cls-2">
          <circle id="background" className="cls-3" cx="94.2" cy="94.2" r="94.2"/>
          <path className="cls-4" d="M50.3 69.8h10.4v72.51H50.3z"/>
          <path fill={this.props.bookside} d="M50.3 77.5h10.4v57.18H50.3z"/>
          <path fill={this.props.bookfront} d="M60.7 77.5h38.9v57.19H60.7z"/>
          <path className="cls-7" d="M60.7 69.8h38.9v7.66H60.7z"/>
          <path className="cls-5" d="M60.7 134.7h38.9v7.66H60.7z"/>
          ...
      </svg>
   )
 }
});

ReactDOM.render(<App />, document.querySelector("#main"));

https://css-tricks.com/creating-svg-icon-system-react/

Answer 3

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

我无法在React Application中修改SVG组件

3 个答案: