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

【问题标题】：I can't modify my SVG component in my React Application我无法在我的 React 应用程序中修改我的 SVG 组件
【发布时间】：2019-11-20 10:19:45
【问题描述】：

我一直在尝试在 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;样式，所以我删除了它，或者你可以把它放到一个来解决这个问题。

【问题讨论】：

标签： javascript css reactjs svg

【解决方案1】：

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

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

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

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

【讨论】：

我试过了，结果是一样的。它有一个包装器，例如.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; position: relative; fill: #5AE2EB; }

【解决方案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/

【讨论】：

【解决方案3】：

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

【讨论】：