Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
BrownsFanForLife

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

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

 

Share this post


Link to post
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

Share this post


Link to post
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.

 

 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

  • Like 1
  • Haha 1

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×