React: onLoad not working on <svg /> tags

[zabojad]

It seems that the onLoad attribute doesn't work on <svg> tags as it does on <img /> tags...

Could you add support for onLoad on <svg /> ?

[Flaque]

@zabojad How are you calling onLoad?

When I try:

class App extends Component {
  render() {
    return (
      <div className="App">
        <img onLoad={console.log("img loaded")} src="http://i.imgur.com/pU14Lav.jpg"/>

        <svg width="100px" height="100px" onLoad={console.log("svg loaded")}/>
      </div>
    );
  }
}

I get "svg loaded" and "img loaded" in my console.

[davezuko]

@Flaque you aren't passing a function to onLoad, though, you are passing the result of an expression (in this case one which immediately calls console.log but evaluates to undefined). See http://www.react.run/Sy1d54qyZ/2.

That says nothing about whether or not the original issue is reproducible, but I'm confused by your counterexample.

[Flaque]

@davezuko GOOD point. I was wrong.

This:

class App extends Component {

  sayHello() {
    console.log("Hello")
  }

  render() {
    return (
      <div className="App">
        <svg width="100px" height="100px" onLoad={this.sayHello}/>
      </div>
    );
  }
}

Definitely does not print "Hello". Good catch @davezuko.

[Flaque]

I think this might be a duplicate btw: https://github.com/facebook/react/issues/5626

[zabojad]

Hi there !

I confirm that I'm passing a function to the onLoad attr of <svg>. And it indeed looks like a duplicate of #5626...

Thank you for having looked into this!

[aweary]

Closing as a duplicate of https://github.com/facebook/react/issues/5626, which is already closed 😄

[kelvin-homann]

Seems like this Bug still exists, and I don't know why this has been closed when #5626 clearly just had a working PR for image tags inside svg tags but not the svg tag itself.

[BrunoWinck]

Reached the same conclusion as @kelvin-homann after reading all 3 issues.
This shouldn't have been closed, it was similar but not a duplicate. ping @aweary

[emilwikstrom]

I also get this issue. A workaround (that was ok in my case) is to use the "ref" property.

[Siddhchakra]

I also get this issue. A workaround (that was ok in my case) is to use the "ref" property.

Hi emilwikstrom,
Could you please share the workaround?

It would be very helpful.

[emilwikstrom]

I also get this issue. A workaround (that was ok in my case) is to use the "ref" property.

Hi emilwikstrom,
Could you please share the workaround?

It would be very helpful.

By using the callback react ref property [https://reactjs.org/docs/refs-and-the-dom.html#callback-refs] you get a dom element handle when the element is loaded.