SVG + IE11 + React (Where is the issue?)

[JasonD]

Hi Gang, 

I'm having an issue accessing attributes or elements inside of an SVG with events and react. I know that sounds like a lot of moving parts.

 

1. If I have an svg in an image tag, and wrap it with an anchor tag, I can access elements just fine.

 

IE11 sees this just fine.

 

However, if I embed the inline svg inside the anchor tag, IE11 can't read anything on the anchor or in the svg.  I have to use event.target.parentElement...which breaks down in ie11.  Thoughts on this?

 

[OSUblake]

17 minutes ago, BrownsFanForLife said:

However, if I embed the inline svg inside the anchor tag, IE11 can't read anything on the anchor or in the svg.  I have to use event.target.parentElement...which breaks down in ie11.  Thoughts on this?

 

Well, this really isn't gsap question, but I have lots of thoughts on this. Stop trying to support IE. It's dead... unless you are working on a banking app for South Koreans.

 

 

If you must support IE, then I would just put the click handler on the <SVG> element itself... or whatever svg element you are trying to target. Based off the code you provided above, there is no reason to even use an <a> element. 

 

 

[JasonD]

Thank you for your response.

1. I wish I could stop supporting IE11, it's not dead in the GOV. sector however, in fact, that probably makes up the 2%.  I'll have to support it for years to come.

2. With respect towards the anchor tag, I put it there to make that section keyboard selectable, unless you know of a way to make svg's keyboard selectable, it makes total sense to use it.

 

Doesn't help me get past the fact that if I use an inline svg that ie11 can't read the data inside...I posted here, because GSAP users use SVG more than most developers.

 

 

[OSUblake]

47 minutes ago, BrownsFanForLife said:

I wish I could stop supporting IE11, it's not dead in the GOV. sector however, in fact, that probably makes up the 2%.  I'll have to support it for years to come.

 

Haha. I wasn't going to bring that up, but I feel your pain. Once upon a time I did stuff for the federal gov because I thought it would be an easy gig. Long story short, I quit after a couple of weeks. After getting out of the army, that was too many rules and regulations for me to handle. ?

 

47 minutes ago, BrownsFanForLife said:

With respect towards the anchor tag, I put it there to make that section keyboard selectable, unless you know of a way to make svg's keyboard selectable, it makes total sense to use it.

 

If you make a simple demo (codepen, stackbltiz, codesandbox, etc), I can take a look... and other members might jump in like @Rodrigo. ?

 

47 minutes ago, BrownsFanForLife said:

Doesn't help me get past the fact that if I use an inline svg that ie11 can't read the data inside...I posted here, because GSAP users use SVG more than most developers.

 

There's nothing wrong with posting generalized questions here, it just might be harder to get a good answer for a question that is not related to gsap.

 

[OSUblake]

And if you're a Browns fan for life, that must mean you're from Ohio. Me too... I do miss my OSU!

[Rodrigo]

But if the event target is a node (which is normally the case) you can use parentNode to get the parent element. parentElement is not supported in IE if the target is an element.

 

On the other hand if you're using react why not create a ref for the title element you want to select and use that to get it's content:

// In the component's logic
let handleClick = () => {
  console.log(this.myTitle.innerHTML);
}

// In the JSX
<title ref={title => this.myTitle = title}>Title Text In Here</title>

Even if you're dynamically adding DOM elements to the JSX, you can still find ways to create a ref and target them in an event handler.

 

As Blake mentions a reduced live demo in codesanbox or stackblitz would be very helpful to see what you're trying to do.

 

Happy Tweening!!!

[JasonD]

I'll try these out and get back to you guys. I'll share what I can. I have some more svg questions. The biggest pertaining to the hit points or pointer issues on an svg I'm using.

[JasonD]

parentNode Worked!  Thank you so much.