Я не могу изменить свой SVG-компонент в приложении React

Question

Я пытался залить цвет компонента SVG в React, но он не работает.

Я пытался использовать тег изображения для React.Тем не менее, я прочитал в документации React, что CSS с тегом img не поддерживается.

//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 имеет непрозрачность заполнения: 0;стиль, так что я удалил его, или вы можете положить его на один, чтобы исправить это.

Answer 1

Похоже, что лучший способ справиться с этим - использовать сам код SVG в качестве компонента, а затем использовать реквизиты для передачи цветов заливки по мере необходимости.

// 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 / создание-SVG-пиктограммы система реагирует /

Answer 2

Я удалил непрозрачность заполнения стиля svg: 0 из самого файла svg. Вы также можете изменить 0 на 1, если вы работаете на вас.

Answer 3

Наиболее распространенным случаем является то, что файл .svg конвертируется / редактируется или не экспортируется должным образом, без этого файла проще всего изменить, например, цвет - открыть этот файл в любом текстовом редакторе или коде кода, скопировать код без тега xml из svg.tag..to закрытие / svg tag и вставка прямо в код.

Затем вы можете легко стилизовать весь элемент или некоторые его части, например,

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

Вы также можете напрямую обратиться к некоторым элементам файла / кода svg (просто проверить его) и попробовать стильЭлементы g / path или rect.