Изменить фон изображения SVG

Question

Я пытаюсь изменить фоновое изображение моего SVG, когда пользователь выбирает другие изображения, изображения помещаются в массив и передаются в компонент реагирования, а затем обновляет изображение с фоновым изображением, это добавит первоеизображение, но оно добавляет второе изображение, предположительно код, который я использую для нацеливания #img2 в svg, неверен или у меня неверный код в svg для использования для нескольких фоновых изображений

svg.find('image').attr("href", this.props.pattern[0]); это работаетsvg.find('pattern').find('#img2').find('image').attr("href", this.props.pattern[1]); это не работает

Как мне настроить таргетинг на fill="url(#img2) со вторым изображением в массиве?

массив данных

{ https://example.com/image1},
{ https://example.com/image2} 

реагирующий компонент

   class InlineSVG extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      image: '',
    };
  }
  componentDidMount() {
    this.loadSVG();
  }
  componentDidUpdate(prevProps) {
    prevProps.src !== this.props.src && this.loadSVG()
    if (this.state.image && prevProps.pattern !== this.props.pattern) {
      this.updateColors()
    }
  }

  setImage = (image) => {
    this.setState({
      ...this.state,
      image,
    });
  }

  loadSVG() {
      fetch(this.props.src)
        .then(
          response => {
            if (!response.ok) return Promise.reject(new Error('Server Error'));
            return response.text();
          }
        ).then(
          svg => this.setState({ image:  svg})
        )
  }

  updateColors() {
    const svg = $(this.state.image);
    if (svg) {
      svg.find('image').attr("href", this.props.pattern[0]);
      svg.find('pattern').find('#img2').find('image').attr("href", this.props.pattern[1]);


      this.setImage(svg.prop('outerHTML') || $('<div>').append($(svg).clone()).html());
    }

  }

svg

<defs>
  <pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="100%">
    <image id="bg" href="" x="0" y="0" width="100%" height="100%" />
  </pattern>
  <pattern id="img2" patternUnits="userSpaceOnUse" width="100%" height="100%">
    <image id="bg" href="" x="0" y="0" width="100%" height="100%" />
  </pattern>
</defs>
<path id="cloth-color-2" fill="url(#img2)" d="M179.4,93l-2.6,5.1v0.1l2.7,5.8v0.1l-2.7,5.1v0.1l2.7,5.8v0.1l-2.7,5.2v0.1l2.7,5.7v0.1
    l-2.7,5.2v0.1l2.7,5.8v0.1l-2.7,5.2v0.1l2.7,5.7v0.1l-2.8,5.2v0.1l2.7,5.6c0,0.1,0,0.2-0.1,0.2H2.3c-0.1,0-0.1-0.1-0.1-0.2l2.7-5.6
    v-0.1l-2.7-5.2v-0.1l2.7-5.7v-0.1l-2.7-5.2v-0.1l2.7-5.8v-0.1l-2.7-5.2v-0.1l2.7-5.7v-0.1l-2.7-5.2v-0.1l2.7-5.8v-0.1l-2.7-5.1V104
    l2.7-5.8v-0.1L2.3,93c0-0.1,0-0.2,0.1-0.2h176.9C179.4,92.9,179.4,93,179.4,93z"/>
<path id="cloth-color-1" fill="url(#img1)" d="M176.8,22.4l2.6-5.1c0-0.1,0-0.2-0.1-0.2H2.4c-0.1,0-0.1,0.1-0.1,0.2l2.6,5.1v0.1l-2.7,5.8
    v0.1l2.7,5.2v0.1l-2.7,5.7v0.1l2.7,5.2v0.1l-2.7,5.7v0.1l2.7,5.2v0.1l-2.7,5.8v0.1L4.9,67v0.1l-2.7,5.7v0.1l2.7,5.2v0.1l-2.5,5.3
    c0,0.1,0,0.2,0.1,0.2h176.6c0.1,0,0.1-0.1,0.1-0.2l-2.5-5.3v-0.1l2.7-5.2v-0.1l-2.7-5.7V67l2.7-5.2v-0.1l-2.7-5.8v-0.1l2.7-5.2v-0.1
    l-2.7-5.7v-0.1l2.7-5.2v-0.1l-2.7-5.8v-0.1l2.7-5.1v-0.1l-2.7-5.8C176.8,22.5,176.8,22.5,176.8,22.4z"/>

Answer 1

Я использовал этот код для обновления изображения SVG с 2 различными фонами

svg.find('#img1').find('image').attr("href", this.props.pattern[0]);
svg.find('#img2').find('image').attr("href", this.props.pattern[1]);

Answer 2

Вы можете изменить цвет фона с помощью CSS.

Фрист проверит и найдет класс / id / атрибут этого внутреннего компонента элемента svg, а затем напишет для этого свойство css.