How to append image tag to svg with jquery?

1

fiddle that works without jquery ( pure html ) : [ https://jsfiddle.net/7q72c35o/ ]
fiddle that doesn’t work with jquery : [ https://jsfiddle.net/p9vuotkm/ ]

i want to cache image with jquery and then to use image with offsets (x,y) to crop image in future on rectangles…

2

Unfortunately jQuery can’t handle SVG images. However, you can use javascript to add your image to your page dynamically. Here’s a link to a Stack Overflow discussion about a similar situation.

In the example, they are using setAttributeNS for each attribute. However, during my testing, I found that you don’t need the “NS” part of the function for any of the attributes that doesn’t need a namespace.

Ex.
instead of:
image.SetAttributeNS(null, 'x', '-32'); // works

you can use:
image.SetAttribute('x', '-32'); // works

but you can’t use:
image.attr('x', '-32'); // doesn't work

1 Like
3

What is story behind NS at the end of function, why we need to provide that?

4

The NS at the end stands for NameSpace. This tells the browser where to find the information they need to render the element correctly. Most elements we use do not need to be namespaced because the browser understands how to render them. However, some are newer, or haven’t been adopted into the browser framework yet, so you need to provide the URL for the definition and instructions on how to render that element.

1 Like