Question

当用户选择其他图像时，我正在尝试更改svg的背景图像，将这些图像放入数组中并传递到react组件中，然后使用背景图像更新该图像，这将添加第一个图片，但它添加了第二张图片，大概是我用来在svg中定位#img2的代码不正确，或者我在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

您可以使用帮助CSS更改背景颜色。

首先检查并找到svg元素的内部组件的类/ id /属性，然后为其编写css属性。

Answer 2

我已使用此代码用2种不同的背景更新svg图像

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

更改SVG图像的背景

2 个答案: