Jump to content
Search Community

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

JasonD test
Moderator Tag

Recommended Posts

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.1039975324_App_js__infoGraphic.thumb.png.bf9d5c1b6864e62f69cae0684b2e0c39.png

 

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?989493134_App_js__infoGraphic.thumb.png.0cde5b4afff8383cba83d05d17fbce11.png

 

Link to comment
Share on other sites

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. 

 

 

  • Like 2
Link to comment
Share on other sites

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.

 

 

Link to comment
Share on other sites

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.

 

  • Like 3
Link to comment
Share on other sites

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!!!

  • Like 5
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...