Accessing Image-element URL in SVG

Question

I have a number of <image> elements in my SVG. I want to add an onclick handler to them that accesses the image URL associated with the specific node, but I can't find the field name in the DOM documentation. If it was HTML then I would be accessing this.src, but the SVG DOM is clearly different -- I can't find any relevant documentation on this.

Added clarification: if I have something like <image xlink:href="http://example.jpg" onclick="code"> then I need the 'code' to access the image URL for the current node.

ACProctor · Accepted Answer · 2017-10-04 11:00:13Z

1

OK, both of the following seem to work, although I'm not sure which is recommended:

onclick="window.open(this.getAttribute('xlink:href'),'_blank');"

onclick="window.open(this.getAttributeNS('http://www.w3.org/1999/xlink', 'href'), '_blank');"

answered Oct 4, 2017 at 11:00

ACProctor

3642 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dmitrijs Čornobiļs · Accepted Answer · 2017-10-04 10:26:42Z

0

You can use handlers for SVG in <object> tag:

<object type="image/svg+xml" data="picture.svg">
  <img src="picture.png" alt="">
</object>

answered Oct 4, 2017 at 10:26

Dmitrijs Čornobiļs

95310 silver badges15 bronze badges

1 Comment

ACProctor Over a year ago

That's not what I need to do. My SVG includes lots of JPG thumbnails in rect elements, using image elements. I want to add "onclick=..." handlers on each one that accesses the current image-file URL (to view in a different tab). I don't want to hand-code the image-file URL on each onclick attribute.

ccprog · Accepted Answer · 2017-10-04 14:22:18Z

0

SVG DOM properties have one extra trick because many can be animated: add an extra .baseVal (for the non-animated value) to the property name. In the case of href, you can leave off the xlink: part.

onclick="window.open(this.href.baseVal, '_blank');"

answered Oct 4, 2017 at 14:22

ccprog

22.2k4 gold badges32 silver badges48 bronze badges

Collectives™ on Stack Overflow

Accessing Image-element URL in SVG

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related