javascript - How can I get the natural width and height of an svg image element? - Stack Overflow

I'm trying to do something relatively simple. I'm trying to get the following working in D3:

• Draw an image as an SVG element in its natural width and height.
• Be able to click on this image to draw circles with D3.

I'm stuck on how to draw the image as an SVG element. So far I have:

content.append("image")
    .attr("xlink:href",this.store.image_url);

But how can I get the natural width / height of this element?

I'm trying to do something relatively simple. I'm trying to get the following working in D3:

• Draw an image as an SVG element in its natural width and height.
• Be able to click on this image to draw circles with D3.

I'm stuck on how to draw the image as an SVG element. So far I have:

content.append("image")
    .attr("xlink:href",this.store.image_url);

But how can I get the natural width / height of this element?

• javascript
• svg
• d3.js

Share Improve this question Follow asked Jul 29, 2014 at 2:52 JamieJamie 2,30111 gold badge2222 silver badges3838 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

You can do this with a bit of javascript

var img = new Image();
img.onload = function(){

        img.naturalWidth and img.naturalHeight can be read off within here

};
img.src = this.store.image_url;