Assuming this:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("svg").append('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
});
</script>
</head>
<body>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
</svg>
</body>
Why don't I see anything?
When you pass a markup string into $, it's parsed as HTML using the browser's innerHTML property on a <div> (or other suitable container for special cases like <tr>). innerHTML can't parse SVG or other non-HTML content, and even if it could it wouldn't be able to tell that <circle> was supposed to be in the SVG namespace.
innerHTML is not available on SVGElement—it is a property of HTMLElement only. Neither is there currently an innerSVG property or other way(*) to parse content into an SVGElement. For this reason you should use DOM-style methods. jQuery doesn't give you easy access to the namespaced methods needed to create SVG elements. Really jQuery isn't designed for use with SVG at all and many operations may fail.
HTML5 promises to let you use <svg> without an xmlns inside a plain HTML (text/html) document in the future. But this is just a parser hack(**), the SVG content will still be SVGElements in the SVG namespace, and not HTMLElements, so you'll not be able to use innerHTML even though they look like part of an HTML document.
However, for today's browsers you must use XHTML (properly served as application/xhtml+xml; save with the .xhtml file extension for local testing) to get SVG to work at all. (It kind of makes sense to anyway; SVG is a properly XML-based standard.) This means you'd have to escape the < symbols inside your script block (or enclose in a CDATA section), and include the XHTML xmlns declaration. example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
</head><body>
<svg id="s" xmlns="http://www.w3.org/2000/svg"/>
<script type="text/javascript">
function makeSVG(tag, attrs) {
var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
for (var k in attrs)
el.setAttribute(k, attrs[k]);
return el;
}
var circle= makeSVG('circle', {cx: 100, cy: 50, r:40, stroke: 'black', 'stroke-width': 2, fill: 'red'});
document.getElementById('s').appendChild(circle);
circle.onmousedown= function() {
alert('hello');
};
</script>
</body></html>
*: well, there's DOM Level 3 LS's parseWithContext, but browser support is very poor. Edit to add: however, whilst you can't inject markup into an SVGElement, you could inject a new SVGElement into an HTMLElement using innerHTML, then transfer it to the desired target. It'll likely be a bit slower though:
<script type="text/javascript"><![CDATA[
function parseSVG(s) {
var div= document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
div.innerHTML= '<svg xmlns="http://www.w3.org/2000/svg">'+s+'</svg>';
var frag= document.createDocumentFragment();
while (div.firstChild.firstChild)
frag.appendChild(div.firstChild.firstChild);
return frag;
}
document.getElementById('s').appendChild(parseSVG(
'<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" onmousedown="alert(\'hello\');"/>'
));
]]></script>
**: I hate the way the authors of HTML5 seem to be scared of XML and determined to shoehorn XML-based features into the crufty mess that is HTML. XHTML solved these problems years ago.
The accepted answer shows too complicated way. As Forresto claims in his answer, "it does seem to add them in the DOM explorer, but not on the screen" and the reason for this is different namespaces for html and svg.
The easiest workaround is to "refresh" whole svg. After appending circle (or other elements), use this:
$("body").html($("body").html());
This does the trick. The circle is on the screen.
Or if you want, use a container div:
$("#cont").html($("#cont").html());
And wrap your svg inside container div:
<div id="cont">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
</svg>
</div>
The functional example:
http://jsbin.com/ejifab/1/edit
The advantages of this technique:
you can edit existing svg (that is already in DOM), eg. created using Raphael or like in your example "hard coded" without scripting.
you can add complex element structures as strings eg. $('svg').prepend('<defs><marker></marker><mask></mask></defs>'); like you do in jQuery.
after the elements are appended and made visible on the screen using $("#cont").html($("#cont").html()); their attributes can be edited using jQuery.
EDIT:
The above technique works with "hard coded" or DOM manipulated ( = document.createElementNS etc.) SVG only. If Raphael is used for creating elements, (according to my tests) the linking between Raphael objects and SVG DOM is broken if $("#cont").html($("#cont").html()); is used. The workaround to this is not to use $("#cont").html($("#cont").html()); at all and instead of it use dummy SVG document.
This dummy SVG is first a textual representation of SVG document and contains only elements that are needed. If we want eg. to add a filter element to Raphael document, the dummy could be something like <svg id="dummy" style="display:none"><defs><filter><!-- Filter definitons --></filter></defs></svg>. The textual representation is first converted to DOM using jQuery's $("body").append() method. And when the (filter) element is in DOM, it can be queried using standard jQuery methods and appended to the main SVG document which is created by Raphael.
Why this dummy is needed? Why not to add a filter element strictly to Raphael created document? If you try it using eg. $("svg").append("<circle ... />"), it is created as html element and nothing is on screen as described in answers. But if the whole SVG document is appended, then the browser handles automatically the namespace conversion of all the elements in SVG document.
An example enlighten the technique:
// Add Raphael SVG document to container element
var p = Raphael("cont", 200, 200);
// Add id for easy access
$(p.canvas).attr("id","p");
// Textual representation of element(s) to be added
var f = '<filter id="myfilter"><!-- filter definitions --></filter>';
// Create dummy svg with filter definition
$("body").append('<svg id="dummy" style="display:none"><defs>' + f + '</defs></svg>');
// Append filter definition to Raphael created svg
$("#p defs").append($("#dummy filter"));
// Remove dummy
$("#dummy").remove();
// Now we can create Raphael objects and add filters to them:
var r = p.rect(10,10,100,100);
$(r.node).attr("filter","url(#myfilter)");
Full working demo of this technique is here: http://jsbin.com/ilinan/1/edit.
( I have (yet) no idea, why $("#cont").html($("#cont").html()); doesn't work when using Raphael. It would be very short hack. )
The increasingly popular D3 library handles the oddities of appending/manipulating svg very nicely. You may want to consider using it as opposed to the jQuery hacks mentioned here.
HTML
<svg xmlns="http://www.w3.org/2000/svg"></svg>
Javascript
var circle = d3.select("svg").append("circle")
.attr("r", "10")
.attr("style", "fill:white;stroke:black;stroke-width:5");
JQuery can't append elements to <svg> (it does seem to add them in the DOM explorer, but not on the screen).
One workaround is to append an <svg> with all of the elements that you need to the page, and then modify the attributes of the elements using .attr().
$('body')
.append($('<svg><circle id="c" cx="10" cy="10" r="10" fill="green" /></svg>'))
.mousemove( function (e) {
$("#c").attr({
cx: e.pageX,
cy: e.pageY
});
});
http://jsfiddle.net/8FBjb/1/
I haven't seen someone mention this method but document.createElementNS() is helpful in this instance.
You can create the elements using vanilla Javascript as normal DOM nodes with the correct namespace and then jQuery-ify them from there. Like so:
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
var $circle = $(circle).attr({ //All your attributes });
$(svg).append($circle);
The only down side is that you have to create each SVG element with the right namespace individually or it won't work.
Found an easy way which works with all browsers I have (Chrome 49, Edge 25, Firefox 44, IE11, Safari 5 [Win], Safari 8 (MacOS)) :
// Clean svg content (if you want to update the svg's objects)
// Note : .html('') doesn't works for svg in some browsers
$('#svgObject').empty();
// add some objects
$('#svgObject').append('<polygon class="svgStyle" points="10,10 50,10 50,50 10,50 10,10" />');
$('#svgObject').append('<circle class="svgStyle" cx="100" cy="30" r="25"/>');
// Magic happens here: refresh DOM (you must refresh svg's parent for Edge/IE and Safari)
$('#svgContainer').html($('#svgContainer').html());
.svgStyle
{
fill:cornflowerblue;
fill-opacity:0.2;
stroke-width:2;
stroke-dasharray:5,5;
stroke:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="svgContainer">
<svg id="svgObject" height="100" width="200"></svg>
</div>
<span>It works if two shapes (one square and one circle) are displayed above.</span>
I can see circle in firefox, doing 2 things:
1) Renaming file from html to xhtml
2) Change script to
<script type="text/javascript">
$(document).ready(function(){
var obj = document.createElementNS("http://www.w3.org/2000/svg", "circle");
obj.setAttributeNS(null, "cx", 100);
obj.setAttributeNS(null, "cy", 50);
obj.setAttributeNS(null, "r", 40);
obj.setAttributeNS(null, "stroke", "black");
obj.setAttributeNS(null, "stroke-width", 2);
obj.setAttributeNS(null, "fill", "red");
$("svg")[0].appendChild(obj);
});
</script>
Based on #chris-dolphin 's answer but using helper function:
// Creates svg element, returned as jQuery object
function $s(elem) {
return $(document.createElementNS('http://www.w3.org/2000/svg', elem));
}
var $svg = $s("svg");
var $circle = $s("circle").attr({...});
$svg.append($circle);
The accepted answer by Bobince is a short, portable solution. If you need to not only append SVG but also manipulate it, you could try the JavaScript library "Pablo" (I wrote it). It will feel familiar to jQuery users.
Your code example would then look like:
$(document).ready(function(){
Pablo("svg").append('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
});
You can also create SVG elements on the fly, without specifying markup:
var circle = Pablo.circle({
cx:100,
cy:50,
r:40
}).appendTo('svg');
If the string you need to append is SVG and you add the proper namespace, you can parse the string as XML and append to the parent.
var xml = jQuery.parseXML('<circle xmlns="http://www.w3.org/2000/svg" cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
$("svg").append(xml.documentElement)
I would suggest it might be better to use ajax and load the svg element from another page.
$('.container').load(href + ' .svg_element');
Where href is the location of the page with the svg. This way you can avoid any jittery effects that might occur from replacing the html content. Also, don't forget to unwrap the svg after it's loaded:
$('.svg_element').unwrap();
A much simpler way is to just generate your SVG into a string, create a wrapper HTML element and insert the svg string into the HTML element using $("#wrapperElement").html(svgString). This works just fine in Chrome and Firefox.
var svg; // if you have variable declared and not assigned value.
// then you make a mistake by appending elements to that before creating element
svg.appendChild(document.createElement("g"));
// at some point you assign to svg
svg = document.createElementNS('http://www.w3.org/2000/svg', "svg")
// then you put it in DOM
document.getElementById("myDiv").appendChild(svg)
// it wont render unless you manually change myDiv DOM with DevTools
// to fix assign before you append
var svg = createElement("svg", [
["version", "1.2"],
["xmlns:xlink", "http://www.w3.org/1999/xlink"],
["aria-labelledby", "title"],
["role", "img"],
["class", "graph"]
]);
function createElement(tag, attributeArr) {
// .createElementNS NS is must! Does not draw without
let elem = document.createElementNS('http://www.w3.org/2000/svg', tag);
attributeArr.forEach(element => elem.setAttribute(element[0], element[1]));
return elem;
}
// extra: <circle> for example requires attributes to render. Check if missing.
I have made a small function for that. As for jQuery append method, the problem is the requirement for specifying namespace for SVG which is "http://www.w3.org/2000/svg" More
So what if I prepare it for append method? In that case the only thing you need to offer is some parameters like:
tagName: It can be every SVG element like rect, circle, text, g etc.
text: If you are using something like text tagname, you'll need to specify text
And other known attributes for an SVG elements.
Thus what I'm going to do is defining a function named createSvgElem() which uses document.createElementNS() internally.
Here is an example:
$("svg").append(
createSvgElem({tagName: "text", x: 10, y: 10, text: "ABC", style: "fill: red"})
)
And here's the function:
function createSvgElem(options){
var settings = $.extend({
}, options);
if(!$.isEmptyObject(settings.tagName)){
var el = document.createElementNS('http://www.w3.org/2000/svg', settings.tagName);
for (var k in settings)
if(k != "tagName" && k != "text" && settings[k] != "")//If attribute has value
el.setAttribute(k, settings[k]);
if ("text" in settings)
el.textContent = settings.text; //el.innerText; For IE
return el;
}
}
Here you can try it yourself:
//Definition:
function createSvgElem(options){
var settings = $.extend({
}, options);
if(!$.isEmptyObject(settings.tagName)){
var el = document.createElementNS('http://www.w3.org/2000/svg', settings.tagName);
for (var k in settings)
if(k != "tagName" && k != "text" && settings[k] != "")//If attribute has value
el.setAttribute(k, settings[k]);
if ("text" in settings)
el.textContent = settings.text; //el.innerText; For IE
return el;
}
}
//Usage:
$(function(){
$("#svg-elem").append(
createSvgElem({tagName: "rect", width: 130, height: 500, style: "fill: #000000a3;"})
)
$("#svg-elem").append(
createSvgElem({tagName: "text", x: 30, y: 30, text: "ABCD", style: "fill: red"})
)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg id="svg-elem" width="200" height="200">
</svg>
With jquery you can do just that.
setting the DataType to 'text'.
$.ajax({
url: "url-to-svg.svg",
dataType : 'text'
})
.done(function(svg) {
let svg_live = $(svg);
svg_live.append('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
$('#selector-id').html(svg_live);
});
Alternative 1: native js insertAdjacentHTML()
Provided you don't consider switching to native JavaScript at all ...
You could also use native javaScript method insertAdjacentHTML() for similarly convenient notation.
$("#svg")[0].insertAdjacentHTML(
"beforeEnd",
'<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>'
);
$("#svg")[0] makes your jQuery object selectable in native JS.
Alternative 2: write a native js DOMParser() helper
mdn web docs: DOMParser.parseFromString()
function createSvgEl(markup) {
markup = `<svg xmlns="http://www.w3.org/2000/svg">
${markup}</svg>`;
const svgEl = new DOMParser().parseFromString(markup, "image/svg+xml")
.documentElement.children[0];
return svgEl;
}
Usage in jQuery:
$("#svgXML").append(
createSvgEl(
'<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>'
)
);
Demo
// native js helper
function createSvgEl(markup) {
markup = `<svg xmlns="http://www.w3.org/2000/svg">
${markup}</svg>`;
const svgEl = new DOMParser().parseFromString(markup, "image/svg+xml")
.documentElement.children[0];
return svgEl;
}
$(document).ready(function() {
// works - but will remove existing children
$("#svg1").html(
'<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>'
);
// works
// $("#svg")[0] makes your jQueryObject selectable in native JS
$("#svg")[0].insertAdjacentHTML(
"beforeEnd",
'<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>'
);
$("#svgXML").append(
createSvgEl(
'<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>'
)
);
// jquery still works! Vanilla doesn't harm!
$("#svgXML circle:nth-of-type(2)").attr('fill', 'orange');
//insert after()
$("#svgAfter circle").after(
createSvgEl(
'<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>'
)
);
//insert after native
$("#svgAfterNative circle")[0].insertAdjacentHTML(
"afterEnd",
'<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>'
);
});
svg {
border: 1px solid red;
overflow: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Append via native js insertAdjacentHTML()</p>
<svg id="svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
<circle cx="10" cy="10" r="5" fill="green" />
</svg>
<p>Append via DOMParser() helper</p>
<svg id="svgXML" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
<circle cx="10" cy="10" r="5" fill="green" />
</svg>
<p>Append via jquery html() - will strip existing child nodes</p>
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
<circle cx="10" cy="10" r="5" fill="green" />
</svg>
<p>Insert after existing element with jQuery after() using DOMParser() helper</p>
<svg id="svgAfter" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
<circle cx="10" cy="10" r="5" fill="green" />
</svg>
<p>Insert after existing element with native js insertAdjacentHTML()</p>
<svg id="svgAfterNative" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
<circle cx="10" cy="10" r="5" fill="green" />
</svg>
jquery's after() or before() methods will also fail to add a SVG DOM (depending on the correct namespace) element.
Using the aforementioned workarounds will fix this issue as well.
This is working for me today with FF 57:
function () {
// JQuery, today, doesn't play well with adding SVG elements - tricks required
$(selector_to_node_in_svg_doc).parent().prepend($(this).clone().text("Your"));
$(selector_to_node_in_svg_doc).text("New").attr("x", "340").text("New")
.attr('stroke', 'blue').attr("style", "text-decoration: line-through");
}
Makes:
Related
Assuming this:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("svg").append('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
});
</script>
</head>
<body>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
</svg>
</body>
Why don't I see anything?
When you pass a markup string into $, it's parsed as HTML using the browser's innerHTML property on a <div> (or other suitable container for special cases like <tr>). innerHTML can't parse SVG or other non-HTML content, and even if it could it wouldn't be able to tell that <circle> was supposed to be in the SVG namespace.
innerHTML is not available on SVGElement—it is a property of HTMLElement only. Neither is there currently an innerSVG property or other way(*) to parse content into an SVGElement. For this reason you should use DOM-style methods. jQuery doesn't give you easy access to the namespaced methods needed to create SVG elements. Really jQuery isn't designed for use with SVG at all and many operations may fail.
HTML5 promises to let you use <svg> without an xmlns inside a plain HTML (text/html) document in the future. But this is just a parser hack(**), the SVG content will still be SVGElements in the SVG namespace, and not HTMLElements, so you'll not be able to use innerHTML even though they look like part of an HTML document.
However, for today's browsers you must use XHTML (properly served as application/xhtml+xml; save with the .xhtml file extension for local testing) to get SVG to work at all. (It kind of makes sense to anyway; SVG is a properly XML-based standard.) This means you'd have to escape the < symbols inside your script block (or enclose in a CDATA section), and include the XHTML xmlns declaration. example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
</head><body>
<svg id="s" xmlns="http://www.w3.org/2000/svg"/>
<script type="text/javascript">
function makeSVG(tag, attrs) {
var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
for (var k in attrs)
el.setAttribute(k, attrs[k]);
return el;
}
var circle= makeSVG('circle', {cx: 100, cy: 50, r:40, stroke: 'black', 'stroke-width': 2, fill: 'red'});
document.getElementById('s').appendChild(circle);
circle.onmousedown= function() {
alert('hello');
};
</script>
</body></html>
*: well, there's DOM Level 3 LS's parseWithContext, but browser support is very poor. Edit to add: however, whilst you can't inject markup into an SVGElement, you could inject a new SVGElement into an HTMLElement using innerHTML, then transfer it to the desired target. It'll likely be a bit slower though:
<script type="text/javascript"><![CDATA[
function parseSVG(s) {
var div= document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
div.innerHTML= '<svg xmlns="http://www.w3.org/2000/svg">'+s+'</svg>';
var frag= document.createDocumentFragment();
while (div.firstChild.firstChild)
frag.appendChild(div.firstChild.firstChild);
return frag;
}
document.getElementById('s').appendChild(parseSVG(
'<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" onmousedown="alert(\'hello\');"/>'
));
]]></script>
**: I hate the way the authors of HTML5 seem to be scared of XML and determined to shoehorn XML-based features into the crufty mess that is HTML. XHTML solved these problems years ago.
The accepted answer shows too complicated way. As Forresto claims in his answer, "it does seem to add them in the DOM explorer, but not on the screen" and the reason for this is different namespaces for html and svg.
The easiest workaround is to "refresh" whole svg. After appending circle (or other elements), use this:
$("body").html($("body").html());
This does the trick. The circle is on the screen.
Or if you want, use a container div:
$("#cont").html($("#cont").html());
And wrap your svg inside container div:
<div id="cont">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
</svg>
</div>
The functional example:
http://jsbin.com/ejifab/1/edit
The advantages of this technique:
you can edit existing svg (that is already in DOM), eg. created using Raphael or like in your example "hard coded" without scripting.
you can add complex element structures as strings eg. $('svg').prepend('<defs><marker></marker><mask></mask></defs>'); like you do in jQuery.
after the elements are appended and made visible on the screen using $("#cont").html($("#cont").html()); their attributes can be edited using jQuery.
EDIT:
The above technique works with "hard coded" or DOM manipulated ( = document.createElementNS etc.) SVG only. If Raphael is used for creating elements, (according to my tests) the linking between Raphael objects and SVG DOM is broken if $("#cont").html($("#cont").html()); is used. The workaround to this is not to use $("#cont").html($("#cont").html()); at all and instead of it use dummy SVG document.
This dummy SVG is first a textual representation of SVG document and contains only elements that are needed. If we want eg. to add a filter element to Raphael document, the dummy could be something like <svg id="dummy" style="display:none"><defs><filter><!-- Filter definitons --></filter></defs></svg>. The textual representation is first converted to DOM using jQuery's $("body").append() method. And when the (filter) element is in DOM, it can be queried using standard jQuery methods and appended to the main SVG document which is created by Raphael.
Why this dummy is needed? Why not to add a filter element strictly to Raphael created document? If you try it using eg. $("svg").append("<circle ... />"), it is created as html element and nothing is on screen as described in answers. But if the whole SVG document is appended, then the browser handles automatically the namespace conversion of all the elements in SVG document.
An example enlighten the technique:
// Add Raphael SVG document to container element
var p = Raphael("cont", 200, 200);
// Add id for easy access
$(p.canvas).attr("id","p");
// Textual representation of element(s) to be added
var f = '<filter id="myfilter"><!-- filter definitions --></filter>';
// Create dummy svg with filter definition
$("body").append('<svg id="dummy" style="display:none"><defs>' + f + '</defs></svg>');
// Append filter definition to Raphael created svg
$("#p defs").append($("#dummy filter"));
// Remove dummy
$("#dummy").remove();
// Now we can create Raphael objects and add filters to them:
var r = p.rect(10,10,100,100);
$(r.node).attr("filter","url(#myfilter)");
Full working demo of this technique is here: http://jsbin.com/ilinan/1/edit.
( I have (yet) no idea, why $("#cont").html($("#cont").html()); doesn't work when using Raphael. It would be very short hack. )
The increasingly popular D3 library handles the oddities of appending/manipulating svg very nicely. You may want to consider using it as opposed to the jQuery hacks mentioned here.
HTML
<svg xmlns="http://www.w3.org/2000/svg"></svg>
Javascript
var circle = d3.select("svg").append("circle")
.attr("r", "10")
.attr("style", "fill:white;stroke:black;stroke-width:5");
JQuery can't append elements to <svg> (it does seem to add them in the DOM explorer, but not on the screen).
One workaround is to append an <svg> with all of the elements that you need to the page, and then modify the attributes of the elements using .attr().
$('body')
.append($('<svg><circle id="c" cx="10" cy="10" r="10" fill="green" /></svg>'))
.mousemove( function (e) {
$("#c").attr({
cx: e.pageX,
cy: e.pageY
});
});
http://jsfiddle.net/8FBjb/1/
I haven't seen someone mention this method but document.createElementNS() is helpful in this instance.
You can create the elements using vanilla Javascript as normal DOM nodes with the correct namespace and then jQuery-ify them from there. Like so:
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
var $circle = $(circle).attr({ //All your attributes });
$(svg).append($circle);
The only down side is that you have to create each SVG element with the right namespace individually or it won't work.
Found an easy way which works with all browsers I have (Chrome 49, Edge 25, Firefox 44, IE11, Safari 5 [Win], Safari 8 (MacOS)) :
// Clean svg content (if you want to update the svg's objects)
// Note : .html('') doesn't works for svg in some browsers
$('#svgObject').empty();
// add some objects
$('#svgObject').append('<polygon class="svgStyle" points="10,10 50,10 50,50 10,50 10,10" />');
$('#svgObject').append('<circle class="svgStyle" cx="100" cy="30" r="25"/>');
// Magic happens here: refresh DOM (you must refresh svg's parent for Edge/IE and Safari)
$('#svgContainer').html($('#svgContainer').html());
.svgStyle
{
fill:cornflowerblue;
fill-opacity:0.2;
stroke-width:2;
stroke-dasharray:5,5;
stroke:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="svgContainer">
<svg id="svgObject" height="100" width="200"></svg>
</div>
<span>It works if two shapes (one square and one circle) are displayed above.</span>
I can see circle in firefox, doing 2 things:
1) Renaming file from html to xhtml
2) Change script to
<script type="text/javascript">
$(document).ready(function(){
var obj = document.createElementNS("http://www.w3.org/2000/svg", "circle");
obj.setAttributeNS(null, "cx", 100);
obj.setAttributeNS(null, "cy", 50);
obj.setAttributeNS(null, "r", 40);
obj.setAttributeNS(null, "stroke", "black");
obj.setAttributeNS(null, "stroke-width", 2);
obj.setAttributeNS(null, "fill", "red");
$("svg")[0].appendChild(obj);
});
</script>
Based on #chris-dolphin 's answer but using helper function:
// Creates svg element, returned as jQuery object
function $s(elem) {
return $(document.createElementNS('http://www.w3.org/2000/svg', elem));
}
var $svg = $s("svg");
var $circle = $s("circle").attr({...});
$svg.append($circle);
The accepted answer by Bobince is a short, portable solution. If you need to not only append SVG but also manipulate it, you could try the JavaScript library "Pablo" (I wrote it). It will feel familiar to jQuery users.
Your code example would then look like:
$(document).ready(function(){
Pablo("svg").append('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
});
You can also create SVG elements on the fly, without specifying markup:
var circle = Pablo.circle({
cx:100,
cy:50,
r:40
}).appendTo('svg');
If the string you need to append is SVG and you add the proper namespace, you can parse the string as XML and append to the parent.
var xml = jQuery.parseXML('<circle xmlns="http://www.w3.org/2000/svg" cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
$("svg").append(xml.documentElement)
I would suggest it might be better to use ajax and load the svg element from another page.
$('.container').load(href + ' .svg_element');
Where href is the location of the page with the svg. This way you can avoid any jittery effects that might occur from replacing the html content. Also, don't forget to unwrap the svg after it's loaded:
$('.svg_element').unwrap();
A much simpler way is to just generate your SVG into a string, create a wrapper HTML element and insert the svg string into the HTML element using $("#wrapperElement").html(svgString). This works just fine in Chrome and Firefox.
var svg; // if you have variable declared and not assigned value.
// then you make a mistake by appending elements to that before creating element
svg.appendChild(document.createElement("g"));
// at some point you assign to svg
svg = document.createElementNS('http://www.w3.org/2000/svg', "svg")
// then you put it in DOM
document.getElementById("myDiv").appendChild(svg)
// it wont render unless you manually change myDiv DOM with DevTools
// to fix assign before you append
var svg = createElement("svg", [
["version", "1.2"],
["xmlns:xlink", "http://www.w3.org/1999/xlink"],
["aria-labelledby", "title"],
["role", "img"],
["class", "graph"]
]);
function createElement(tag, attributeArr) {
// .createElementNS NS is must! Does not draw without
let elem = document.createElementNS('http://www.w3.org/2000/svg', tag);
attributeArr.forEach(element => elem.setAttribute(element[0], element[1]));
return elem;
}
// extra: <circle> for example requires attributes to render. Check if missing.
I have made a small function for that. As for jQuery append method, the problem is the requirement for specifying namespace for SVG which is "http://www.w3.org/2000/svg" More
So what if I prepare it for append method? In that case the only thing you need to offer is some parameters like:
tagName: It can be every SVG element like rect, circle, text, g etc.
text: If you are using something like text tagname, you'll need to specify text
And other known attributes for an SVG elements.
Thus what I'm going to do is defining a function named createSvgElem() which uses document.createElementNS() internally.
Here is an example:
$("svg").append(
createSvgElem({tagName: "text", x: 10, y: 10, text: "ABC", style: "fill: red"})
)
And here's the function:
function createSvgElem(options){
var settings = $.extend({
}, options);
if(!$.isEmptyObject(settings.tagName)){
var el = document.createElementNS('http://www.w3.org/2000/svg', settings.tagName);
for (var k in settings)
if(k != "tagName" && k != "text" && settings[k] != "")//If attribute has value
el.setAttribute(k, settings[k]);
if ("text" in settings)
el.textContent = settings.text; //el.innerText; For IE
return el;
}
}
Here you can try it yourself:
//Definition:
function createSvgElem(options){
var settings = $.extend({
}, options);
if(!$.isEmptyObject(settings.tagName)){
var el = document.createElementNS('http://www.w3.org/2000/svg', settings.tagName);
for (var k in settings)
if(k != "tagName" && k != "text" && settings[k] != "")//If attribute has value
el.setAttribute(k, settings[k]);
if ("text" in settings)
el.textContent = settings.text; //el.innerText; For IE
return el;
}
}
//Usage:
$(function(){
$("#svg-elem").append(
createSvgElem({tagName: "rect", width: 130, height: 500, style: "fill: #000000a3;"})
)
$("#svg-elem").append(
createSvgElem({tagName: "text", x: 30, y: 30, text: "ABCD", style: "fill: red"})
)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg id="svg-elem" width="200" height="200">
</svg>
With jquery you can do just that.
setting the DataType to 'text'.
$.ajax({
url: "url-to-svg.svg",
dataType : 'text'
})
.done(function(svg) {
let svg_live = $(svg);
svg_live.append('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
$('#selector-id').html(svg_live);
});
Alternative 1: native js insertAdjacentHTML()
Provided you don't consider switching to native JavaScript at all ...
You could also use native javaScript method insertAdjacentHTML() for similarly convenient notation.
$("#svg")[0].insertAdjacentHTML(
"beforeEnd",
'<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>'
);
$("#svg")[0] makes your jQuery object selectable in native JS.
Alternative 2: write a native js DOMParser() helper
mdn web docs: DOMParser.parseFromString()
function createSvgEl(markup) {
markup = `<svg xmlns="http://www.w3.org/2000/svg">
${markup}</svg>`;
const svgEl = new DOMParser().parseFromString(markup, "image/svg+xml")
.documentElement.children[0];
return svgEl;
}
Usage in jQuery:
$("#svgXML").append(
createSvgEl(
'<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>'
)
);
Demo
// native js helper
function createSvgEl(markup) {
markup = `<svg xmlns="http://www.w3.org/2000/svg">
${markup}</svg>`;
const svgEl = new DOMParser().parseFromString(markup, "image/svg+xml")
.documentElement.children[0];
return svgEl;
}
$(document).ready(function() {
// works - but will remove existing children
$("#svg1").html(
'<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>'
);
// works
// $("#svg")[0] makes your jQueryObject selectable in native JS
$("#svg")[0].insertAdjacentHTML(
"beforeEnd",
'<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>'
);
$("#svgXML").append(
createSvgEl(
'<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>'
)
);
// jquery still works! Vanilla doesn't harm!
$("#svgXML circle:nth-of-type(2)").attr('fill', 'orange');
//insert after()
$("#svgAfter circle").after(
createSvgEl(
'<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>'
)
);
//insert after native
$("#svgAfterNative circle")[0].insertAdjacentHTML(
"afterEnd",
'<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>'
);
});
svg {
border: 1px solid red;
overflow: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Append via native js insertAdjacentHTML()</p>
<svg id="svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
<circle cx="10" cy="10" r="5" fill="green" />
</svg>
<p>Append via DOMParser() helper</p>
<svg id="svgXML" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
<circle cx="10" cy="10" r="5" fill="green" />
</svg>
<p>Append via jquery html() - will strip existing child nodes</p>
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
<circle cx="10" cy="10" r="5" fill="green" />
</svg>
<p>Insert after existing element with jQuery after() using DOMParser() helper</p>
<svg id="svgAfter" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
<circle cx="10" cy="10" r="5" fill="green" />
</svg>
<p>Insert after existing element with native js insertAdjacentHTML()</p>
<svg id="svgAfterNative" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
<circle cx="10" cy="10" r="5" fill="green" />
</svg>
jquery's after() or before() methods will also fail to add a SVG DOM (depending on the correct namespace) element.
Using the aforementioned workarounds will fix this issue as well.
This is working for me today with FF 57:
function () {
// JQuery, today, doesn't play well with adding SVG elements - tricks required
$(selector_to_node_in_svg_doc).parent().prepend($(this).clone().text("Your"));
$(selector_to_node_in_svg_doc).text("New").attr("x", "340").text("New")
.attr('stroke', 'blue').attr("style", "text-decoration: line-through");
}
Makes:
I use getComputedStyle to get css transform value from some SVG Elements while doing CSS animation. For example,
<svg width="100px" height="100px">
<circle cx="50" cy="50" r="10" style="transform:translate(50%,50%)"/>
</svg>
<script>
var ret = window.getComputedStyle(circle).transform;
/* ret = matrix(1,0,0,1,0,0) in chrome */
/* ret = matrix(1,0,0,1,50,50) in firefox */
</script>
however I got "matrix(1,0,0,1,0,0)" (identity matrix) in ret, which ignored the style I set with translate(50%,50%).
If I use pixel as unit then it works correctly:
<svg width="100px" height="100px">
<circle cx="50" cy="50" r="10" style="transform:translate(10px,10px)"/>
</svg>
<script>
var ret = window.getComputedStyle(circle).transform;
/* ret = matrix(1,0,0,1,10,10) in both chrome and firefox */
</script>
Since percentage here should be related to element's dimension, the result from getComputedStyle should have the identical result as matrix(1,0,0,1,10,10).
Not sure if this is a bug in browsers or what, but - is there any way for now to get correct and consistent value in at least both Chrome and Firefox?
Can you try it with your element.getBoundingClientRect().transform. Sometimes window.getComputedStyle return different values for different browsers.
Assuming this:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("svg").append('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
});
</script>
</head>
<body>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
</svg>
</body>
Why don't I see anything?
When you pass a markup string into $, it's parsed as HTML using the browser's innerHTML property on a <div> (or other suitable container for special cases like <tr>). innerHTML can't parse SVG or other non-HTML content, and even if it could it wouldn't be able to tell that <circle> was supposed to be in the SVG namespace.
innerHTML is not available on SVGElement—it is a property of HTMLElement only. Neither is there currently an innerSVG property or other way(*) to parse content into an SVGElement. For this reason you should use DOM-style methods. jQuery doesn't give you easy access to the namespaced methods needed to create SVG elements. Really jQuery isn't designed for use with SVG at all and many operations may fail.
HTML5 promises to let you use <svg> without an xmlns inside a plain HTML (text/html) document in the future. But this is just a parser hack(**), the SVG content will still be SVGElements in the SVG namespace, and not HTMLElements, so you'll not be able to use innerHTML even though they look like part of an HTML document.
However, for today's browsers you must use XHTML (properly served as application/xhtml+xml; save with the .xhtml file extension for local testing) to get SVG to work at all. (It kind of makes sense to anyway; SVG is a properly XML-based standard.) This means you'd have to escape the < symbols inside your script block (or enclose in a CDATA section), and include the XHTML xmlns declaration. example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
</head><body>
<svg id="s" xmlns="http://www.w3.org/2000/svg"/>
<script type="text/javascript">
function makeSVG(tag, attrs) {
var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
for (var k in attrs)
el.setAttribute(k, attrs[k]);
return el;
}
var circle= makeSVG('circle', {cx: 100, cy: 50, r:40, stroke: 'black', 'stroke-width': 2, fill: 'red'});
document.getElementById('s').appendChild(circle);
circle.onmousedown= function() {
alert('hello');
};
</script>
</body></html>
*: well, there's DOM Level 3 LS's parseWithContext, but browser support is very poor. Edit to add: however, whilst you can't inject markup into an SVGElement, you could inject a new SVGElement into an HTMLElement using innerHTML, then transfer it to the desired target. It'll likely be a bit slower though:
<script type="text/javascript"><![CDATA[
function parseSVG(s) {
var div= document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
div.innerHTML= '<svg xmlns="http://www.w3.org/2000/svg">'+s+'</svg>';
var frag= document.createDocumentFragment();
while (div.firstChild.firstChild)
frag.appendChild(div.firstChild.firstChild);
return frag;
}
document.getElementById('s').appendChild(parseSVG(
'<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" onmousedown="alert(\'hello\');"/>'
));
]]></script>
**: I hate the way the authors of HTML5 seem to be scared of XML and determined to shoehorn XML-based features into the crufty mess that is HTML. XHTML solved these problems years ago.
The accepted answer shows too complicated way. As Forresto claims in his answer, "it does seem to add them in the DOM explorer, but not on the screen" and the reason for this is different namespaces for html and svg.
The easiest workaround is to "refresh" whole svg. After appending circle (or other elements), use this:
$("body").html($("body").html());
This does the trick. The circle is on the screen.
Or if you want, use a container div:
$("#cont").html($("#cont").html());
And wrap your svg inside container div:
<div id="cont">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
</svg>
</div>
The functional example:
http://jsbin.com/ejifab/1/edit
The advantages of this technique:
you can edit existing svg (that is already in DOM), eg. created using Raphael or like in your example "hard coded" without scripting.
you can add complex element structures as strings eg. $('svg').prepend('<defs><marker></marker><mask></mask></defs>'); like you do in jQuery.
after the elements are appended and made visible on the screen using $("#cont").html($("#cont").html()); their attributes can be edited using jQuery.
EDIT:
The above technique works with "hard coded" or DOM manipulated ( = document.createElementNS etc.) SVG only. If Raphael is used for creating elements, (according to my tests) the linking between Raphael objects and SVG DOM is broken if $("#cont").html($("#cont").html()); is used. The workaround to this is not to use $("#cont").html($("#cont").html()); at all and instead of it use dummy SVG document.
This dummy SVG is first a textual representation of SVG document and contains only elements that are needed. If we want eg. to add a filter element to Raphael document, the dummy could be something like <svg id="dummy" style="display:none"><defs><filter><!-- Filter definitons --></filter></defs></svg>. The textual representation is first converted to DOM using jQuery's $("body").append() method. And when the (filter) element is in DOM, it can be queried using standard jQuery methods and appended to the main SVG document which is created by Raphael.
Why this dummy is needed? Why not to add a filter element strictly to Raphael created document? If you try it using eg. $("svg").append("<circle ... />"), it is created as html element and nothing is on screen as described in answers. But if the whole SVG document is appended, then the browser handles automatically the namespace conversion of all the elements in SVG document.
An example enlighten the technique:
// Add Raphael SVG document to container element
var p = Raphael("cont", 200, 200);
// Add id for easy access
$(p.canvas).attr("id","p");
// Textual representation of element(s) to be added
var f = '<filter id="myfilter"><!-- filter definitions --></filter>';
// Create dummy svg with filter definition
$("body").append('<svg id="dummy" style="display:none"><defs>' + f + '</defs></svg>');
// Append filter definition to Raphael created svg
$("#p defs").append($("#dummy filter"));
// Remove dummy
$("#dummy").remove();
// Now we can create Raphael objects and add filters to them:
var r = p.rect(10,10,100,100);
$(r.node).attr("filter","url(#myfilter)");
Full working demo of this technique is here: http://jsbin.com/ilinan/1/edit.
( I have (yet) no idea, why $("#cont").html($("#cont").html()); doesn't work when using Raphael. It would be very short hack. )
The increasingly popular D3 library handles the oddities of appending/manipulating svg very nicely. You may want to consider using it as opposed to the jQuery hacks mentioned here.
HTML
<svg xmlns="http://www.w3.org/2000/svg"></svg>
Javascript
var circle = d3.select("svg").append("circle")
.attr("r", "10")
.attr("style", "fill:white;stroke:black;stroke-width:5");
JQuery can't append elements to <svg> (it does seem to add them in the DOM explorer, but not on the screen).
One workaround is to append an <svg> with all of the elements that you need to the page, and then modify the attributes of the elements using .attr().
$('body')
.append($('<svg><circle id="c" cx="10" cy="10" r="10" fill="green" /></svg>'))
.mousemove( function (e) {
$("#c").attr({
cx: e.pageX,
cy: e.pageY
});
});
http://jsfiddle.net/8FBjb/1/
I haven't seen someone mention this method but document.createElementNS() is helpful in this instance.
You can create the elements using vanilla Javascript as normal DOM nodes with the correct namespace and then jQuery-ify them from there. Like so:
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
var $circle = $(circle).attr({ //All your attributes });
$(svg).append($circle);
The only down side is that you have to create each SVG element with the right namespace individually or it won't work.
Found an easy way which works with all browsers I have (Chrome 49, Edge 25, Firefox 44, IE11, Safari 5 [Win], Safari 8 (MacOS)) :
// Clean svg content (if you want to update the svg's objects)
// Note : .html('') doesn't works for svg in some browsers
$('#svgObject').empty();
// add some objects
$('#svgObject').append('<polygon class="svgStyle" points="10,10 50,10 50,50 10,50 10,10" />');
$('#svgObject').append('<circle class="svgStyle" cx="100" cy="30" r="25"/>');
// Magic happens here: refresh DOM (you must refresh svg's parent for Edge/IE and Safari)
$('#svgContainer').html($('#svgContainer').html());
.svgStyle
{
fill:cornflowerblue;
fill-opacity:0.2;
stroke-width:2;
stroke-dasharray:5,5;
stroke:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="svgContainer">
<svg id="svgObject" height="100" width="200"></svg>
</div>
<span>It works if two shapes (one square and one circle) are displayed above.</span>
I can see circle in firefox, doing 2 things:
1) Renaming file from html to xhtml
2) Change script to
<script type="text/javascript">
$(document).ready(function(){
var obj = document.createElementNS("http://www.w3.org/2000/svg", "circle");
obj.setAttributeNS(null, "cx", 100);
obj.setAttributeNS(null, "cy", 50);
obj.setAttributeNS(null, "r", 40);
obj.setAttributeNS(null, "stroke", "black");
obj.setAttributeNS(null, "stroke-width", 2);
obj.setAttributeNS(null, "fill", "red");
$("svg")[0].appendChild(obj);
});
</script>
Based on #chris-dolphin 's answer but using helper function:
// Creates svg element, returned as jQuery object
function $s(elem) {
return $(document.createElementNS('http://www.w3.org/2000/svg', elem));
}
var $svg = $s("svg");
var $circle = $s("circle").attr({...});
$svg.append($circle);
The accepted answer by Bobince is a short, portable solution. If you need to not only append SVG but also manipulate it, you could try the JavaScript library "Pablo" (I wrote it). It will feel familiar to jQuery users.
Your code example would then look like:
$(document).ready(function(){
Pablo("svg").append('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
});
You can also create SVG elements on the fly, without specifying markup:
var circle = Pablo.circle({
cx:100,
cy:50,
r:40
}).appendTo('svg');
If the string you need to append is SVG and you add the proper namespace, you can parse the string as XML and append to the parent.
var xml = jQuery.parseXML('<circle xmlns="http://www.w3.org/2000/svg" cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
$("svg").append(xml.documentElement)
I would suggest it might be better to use ajax and load the svg element from another page.
$('.container').load(href + ' .svg_element');
Where href is the location of the page with the svg. This way you can avoid any jittery effects that might occur from replacing the html content. Also, don't forget to unwrap the svg after it's loaded:
$('.svg_element').unwrap();
A much simpler way is to just generate your SVG into a string, create a wrapper HTML element and insert the svg string into the HTML element using $("#wrapperElement").html(svgString). This works just fine in Chrome and Firefox.
var svg; // if you have variable declared and not assigned value.
// then you make a mistake by appending elements to that before creating element
svg.appendChild(document.createElement("g"));
// at some point you assign to svg
svg = document.createElementNS('http://www.w3.org/2000/svg', "svg")
// then you put it in DOM
document.getElementById("myDiv").appendChild(svg)
// it wont render unless you manually change myDiv DOM with DevTools
// to fix assign before you append
var svg = createElement("svg", [
["version", "1.2"],
["xmlns:xlink", "http://www.w3.org/1999/xlink"],
["aria-labelledby", "title"],
["role", "img"],
["class", "graph"]
]);
function createElement(tag, attributeArr) {
// .createElementNS NS is must! Does not draw without
let elem = document.createElementNS('http://www.w3.org/2000/svg', tag);
attributeArr.forEach(element => elem.setAttribute(element[0], element[1]));
return elem;
}
// extra: <circle> for example requires attributes to render. Check if missing.
I have made a small function for that. As for jQuery append method, the problem is the requirement for specifying namespace for SVG which is "http://www.w3.org/2000/svg" More
So what if I prepare it for append method? In that case the only thing you need to offer is some parameters like:
tagName: It can be every SVG element like rect, circle, text, g etc.
text: If you are using something like text tagname, you'll need to specify text
And other known attributes for an SVG elements.
Thus what I'm going to do is defining a function named createSvgElem() which uses document.createElementNS() internally.
Here is an example:
$("svg").append(
createSvgElem({tagName: "text", x: 10, y: 10, text: "ABC", style: "fill: red"})
)
And here's the function:
function createSvgElem(options){
var settings = $.extend({
}, options);
if(!$.isEmptyObject(settings.tagName)){
var el = document.createElementNS('http://www.w3.org/2000/svg', settings.tagName);
for (var k in settings)
if(k != "tagName" && k != "text" && settings[k] != "")//If attribute has value
el.setAttribute(k, settings[k]);
if ("text" in settings)
el.textContent = settings.text; //el.innerText; For IE
return el;
}
}
Here you can try it yourself:
//Definition:
function createSvgElem(options){
var settings = $.extend({
}, options);
if(!$.isEmptyObject(settings.tagName)){
var el = document.createElementNS('http://www.w3.org/2000/svg', settings.tagName);
for (var k in settings)
if(k != "tagName" && k != "text" && settings[k] != "")//If attribute has value
el.setAttribute(k, settings[k]);
if ("text" in settings)
el.textContent = settings.text; //el.innerText; For IE
return el;
}
}
//Usage:
$(function(){
$("#svg-elem").append(
createSvgElem({tagName: "rect", width: 130, height: 500, style: "fill: #000000a3;"})
)
$("#svg-elem").append(
createSvgElem({tagName: "text", x: 30, y: 30, text: "ABCD", style: "fill: red"})
)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg id="svg-elem" width="200" height="200">
</svg>
With jquery you can do just that.
setting the DataType to 'text'.
$.ajax({
url: "url-to-svg.svg",
dataType : 'text'
})
.done(function(svg) {
let svg_live = $(svg);
svg_live.append('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
$('#selector-id').html(svg_live);
});
Alternative 1: native js insertAdjacentHTML()
Provided you don't consider switching to native JavaScript at all ...
You could also use native javaScript method insertAdjacentHTML() for similarly convenient notation.
$("#svg")[0].insertAdjacentHTML(
"beforeEnd",
'<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>'
);
$("#svg")[0] makes your jQuery object selectable in native JS.
Alternative 2: write a native js DOMParser() helper
mdn web docs: DOMParser.parseFromString()
function createSvgEl(markup) {
markup = `<svg xmlns="http://www.w3.org/2000/svg">
${markup}</svg>`;
const svgEl = new DOMParser().parseFromString(markup, "image/svg+xml")
.documentElement.children[0];
return svgEl;
}
Usage in jQuery:
$("#svgXML").append(
createSvgEl(
'<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>'
)
);
Demo
// native js helper
function createSvgEl(markup) {
markup = `<svg xmlns="http://www.w3.org/2000/svg">
${markup}</svg>`;
const svgEl = new DOMParser().parseFromString(markup, "image/svg+xml")
.documentElement.children[0];
return svgEl;
}
$(document).ready(function() {
// works - but will remove existing children
$("#svg1").html(
'<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>'
);
// works
// $("#svg")[0] makes your jQueryObject selectable in native JS
$("#svg")[0].insertAdjacentHTML(
"beforeEnd",
'<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>'
);
$("#svgXML").append(
createSvgEl(
'<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>'
)
);
// jquery still works! Vanilla doesn't harm!
$("#svgXML circle:nth-of-type(2)").attr('fill', 'orange');
//insert after()
$("#svgAfter circle").after(
createSvgEl(
'<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>'
)
);
//insert after native
$("#svgAfterNative circle")[0].insertAdjacentHTML(
"afterEnd",
'<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>'
);
});
svg {
border: 1px solid red;
overflow: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Append via native js insertAdjacentHTML()</p>
<svg id="svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
<circle cx="10" cy="10" r="5" fill="green" />
</svg>
<p>Append via DOMParser() helper</p>
<svg id="svgXML" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
<circle cx="10" cy="10" r="5" fill="green" />
</svg>
<p>Append via jquery html() - will strip existing child nodes</p>
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
<circle cx="10" cy="10" r="5" fill="green" />
</svg>
<p>Insert after existing element with jQuery after() using DOMParser() helper</p>
<svg id="svgAfter" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
<circle cx="10" cy="10" r="5" fill="green" />
</svg>
<p>Insert after existing element with native js insertAdjacentHTML()</p>
<svg id="svgAfterNative" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
<circle cx="10" cy="10" r="5" fill="green" />
</svg>
jquery's after() or before() methods will also fail to add a SVG DOM (depending on the correct namespace) element.
Using the aforementioned workarounds will fix this issue as well.
This is working for me today with FF 57:
function () {
// JQuery, today, doesn't play well with adding SVG elements - tricks required
$(selector_to_node_in_svg_doc).parent().prepend($(this).clone().text("Your"));
$(selector_to_node_in_svg_doc).text("New").attr("x", "340").text("New")
.attr('stroke', 'blue').attr("style", "text-decoration: line-through");
}
Makes:
How would I go about creating an SVG DOM element from a String?
Example:
var svgStr = '<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg"><!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ --><g><title>background</title><rect fill="#fff" id="canvas_background" height="402" width="502" y="-1" x="-1"/><g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid"><rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/></g></g><g><title>Layer 1</title><path id="svg_1" d="m118,242l64,-153l63,157c0,0 45,-71 49,-68c4,3 11,146 12,146c1,0 -173,-7 -173,-7c0,0 -61,-72 -61,-72c0,0 110,-156 46,-3z" fill-opacity="0.7" stroke-width="2" stroke="#995757" fill="#995757"/></g></svg>';
You can use DOMParser to parse an XML string.
var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingXMLSource, "image/svg+xml");
The root element for the parsed string will be doc.documentElement
For this to work properly cross-browser you'll need to set the html namespace i.e. your string will need to look like this...
var svg2='<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" ...
Assuming you are using JavaScript, you can simply pass that string as the innerHTML of an existing element obtained via the DOM API:
var svg2 = "<svg ...> ... </svg>";
var container = document.getElementById("container");
container.innerHTML = svg2;
See: JSFiddle
I was building SVG chart and needed to enable user to pass any SVG to make it into a chart annotation. The solution was:
index.html - the root SVG element I am attaching child SVGs to
<svg id="chart_SVG" width="900" height="600" role="img" xmlns="http://www.w3.org/2000/svg"></svg>
api.ts - API to add annotation (written in TypeScript). x, y - coordinates where to place the annotation
function drawAnnotation(x: number, y: number, svgContent: string, svgId: string): SVGElement {
const svgRoot = document.getElementById("chart_SVG");
const svgNode = document.createRange().createContextualFragment(svgString);
svgRoot.appendChild(svgNode);
const newNode = this.svgRoot.lastChild as SVGElement;
newNode.id = svgId;
newNode.setAttribute("x", x.toString());
newNode.setAttribute("y", y.toString());
return newNode;
}
example.ts
drawAnnotation(
100,
100,
'<svg><g><rect x="0" y="0" width="100%" height="100%" stroke="red" stroke-width="10" fill="orange"/><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="24" fill="blue">TEXT</text></g></svg>',
"myNewNode"
)
Reading and writing the innerHTML of an SVG within HTML seems to work well except in Internet Explorer (9-11): http://cs.sru.edu/~ddailey/svg/IframeSVG.htm . If one needs IE compatibility (as in for a real web app) then use DOM methods to create a suitable container (object, iframe or embed) and build the SVG, one childNode at a time, through DOM methods within that container. ) It's a bit of a chore, but the basics are covered at http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_HTML.
instead of returning with parent, you can do the following trick.
const template = `
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 13L13 1M1 1L13 13" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>`
const span = document.createElement('span')
span.innerHTML = template
return span.firstChild
Here is a JS function example to return a SVGELement instance:
function svgElementFromString(str) {
const div = document.createElement('DIV');
div.innerHTML = str;
const svg = div.querySelector('svg');
if (!svg) {
throw Error('<svg> tag not found');
}
return svg;
}
I have an svg file containing a group with a single line element. I can make use of the use element and make several reference copies in any position I want them. However, I want to use javascript to add and remove the use element dynamically. Is there a way to use javascript to insert an svg use element of my line into my group?
<svg version="1.1" id="ex1-3rds-quarter-s" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="323.333px" height="55.333px" viewBox="0 0 323.333 55.333" enable-background="new 0 0 323.333 55.333"
xml:space="preserve">
<g id="ledgerlines">
<line id="MidCLine1" fill="none" stroke="#000000" stroke-width="0.75" stroke-miterlimit="10" x1="48.09" y1="41.694" x2="57.924" y2="41.694"/>
</g>
</svg>
var svgns = "http://www.w3.org/2000/svg";
var xlinkns = "http://www.w3.org/1999/xlink";
// Get a reference to the <g> element
var g = document.getElementById("ledgerlines");
// Create a <use> element
var use = document.createElementNS(svgns, "use");
// Add an 'href' attribute (using the "xlink" namespace)
use.setAttributeNS(xlinkns, "href", "#MidCLine1");
// Offset the line down by 10
use.setAttribute("y", "10"); // offset = y+10
// Add the <use> to the <g>
g.appendChild(use);
Demo here