Question

我有一个React SVG组件，在过去的一年中一直运行良好...在我的SVG组件中，我有一个像这样的标签：

    <use
      innerRef={(ref) => { this.arcRef.icon = ref; }}
      xlinkHref={this.props.xlinkHref}
      width="10"
      height="10"
      x="240.462"
      y="138"
    />

这在dom中的呈现方式如下：

<use class="sc-dTLGrV fEJmAu" href="#item-2" width="40px" height="40px" x="240.462" y="138" data-svg-origin="240.462 138" transform="matrix(1,0,0,1,38,-26.5)" style="opacity: 1;"></use>

Chrome最近更新到了v71，现在它不再起作用。在Chrome v71 release notes中，它提到“ Chrome 71已更新，以支持Shadow DOM v1规范”

在DOM中，我在<use>标记内看到以下内容：

#shadow-root (closed)

我相信用户即使在页面上也无法再找到#item-2元素...

关于如何使它重新工作的任何想法？

Answer 1

我遇到了同样的问题，这是因为我的ID发生冲突。
以前它可以在所有Chrome版本上使用，但不适用于71。

尝试解决这些冲突（如果有）。

React，<use> .. xlinkHref不再适用于Chrome v71

1 个答案: