CODEWITHSUNDEEP
javascriptsvg
ACProctor
ACProctor

Reputation: 324

Accessing Image-element URL in SVG

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.

Upvotes: 1

Views: 418

Answers (3)

ccprog
ccprog

Reputation: 21811

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');"

Upvotes: 0

ACProctor
ACProctor

Reputation: 324

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');"

Upvotes: 1

Dmitrijs Čornobiļs
Dmitrijs Čornobiļs

Reputation: 953

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

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

Upvotes: 0

Related Questions