React, .. xlinkHref no longer works with Chrome v71

Question

I've had a React SVG component that had been working fine for the last year... In my SVG component, I have a tag like so:

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

This is rendering in the dom like so:

<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 recently updated to v71 and now this is no longer working. In the Chrome v71 release notes it mentions "Chrome 71 was updated to support the Shadow DOM v1 spec"

In the DOM I see the following inside the <use> tag:

#shadow-root (closed)

I believe use can no longer find the #item-2 element on the page even though it is there...

Any ideas on how I can get this working again?

What is `#item-2`? Please provide a [mcve]. – Paul LeBeau Dec 14 '18 at 06:39 — Paul LeBeau, Dec 14 '18 at 06:39

score 2 · Answer 1 · edited Jan 29 '19 at 15:11

2

I had the same issue, and it was because I had ID's conflicting.
It worked previously on all Chrome versions but not on 71.

Try to resolve these conflicts if any.

edited Jan 29 '19 at 15:11

Kaiido

123,334
13
219
285

answered Jan 29 '19 at 13:59

Ernest

21
2

@reviewers, This answer, while far from being perfect **does try to answer the question**. Vote to close the question instead, which is missing an MCVE. – Kaiido Jan 29 '19 at 15:09

React, .. xlinkHref no longer works with Chrome v71

1 Answers1