I tried to add a style sheet to an SVG element, like this:
var theSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var theStyle = document.createElementNS("http://www.w3.org/2000/svg", "style");
theSvg.appendChild(theStyle);
console.log("theStyle.sheet=", theStyle.sheet); // undefined, try adding svg to DOM
document.body.appendChild(theSvg);
console.log("theStyle.sheet=", theStyle.sheet); // still undefined
What am I supposed to do to get to the sheet node there in theStyle?
There is a fiddle here: http://jsfiddle.net/XaV7D/2/
As #RobertLongson points out in the comments, the problem is that the SVG specs define a svg:style element interface, but it doesn't implement the CSS OM interfaces associated with a stylesheet's owner element.
Here are a couple work-around approaches (while waiting for the SVG 2 specs to implement the latest CSS OM specs):
Use an (X)HTML style element. If your SVG code is inline within an (X)HTML document, then the HTML <style> element can be used to style the SVG. Just make sure that you either create the style element in the default namespace or explicitly create it in the XHTML namespace, so that you get an instance of HTMLStyleElement, not SVGStyleElement.
Add the newly-created HTMLStyleElement to the head of your document, and the CSS stylesheet object will be created for you:
var hs = document.createElement("style");
hs.type = "text/css";
document.head.insertBefore(hs, null);
hs.sheet.insertRule("circle{fill:red;}", 0);
This answer goes into more detail about dynamically creating stylesheets in HTML, including a working example.
(Theoretically) Use an xml-stylesheet processing instruction. If your SVG code is in a stand-alone SVG file, then you can use XML processing instructions to link external stylesheets. The processing instruction node provides access to the stylesheet object.
However, unlike a <style> element, which can be empty, the processing instruction node must link to a file, or the browser will never initialize the stylesheet object. I tried to get around that by defining the external file as an empty data URI of the correct MIME type. It usually, but not consistently, works in FF/Chrome when run from the console, but not from an embedded script. In Chrome, the sheet property is always null, the same way Chrome treats cross-domain stylesheets; Firefox gives an explicit security error. I assume it won't work at all in IE, which doesn't like non-image data URI files.
var xs = document.createProcessingInstruction(
"xml-stylesheet",
"href='data:text/css,' type='text/css'");
document.insertBefore(xs, document.rootElement);
xs.sheet.insertRule("circle{fill:blue;}", 0);
You weren't clear about why you were trying to dynamically create a style sheet. If the intent is to actually link to a valid stylesheet on a same-domain server, then the security problems wouldn't be an issue; the problem is that data URIs are treated as cross-origin.
Use a svg:style element, but then access the stylesheet object using document.styleSheets (from the comments to the other answer, it seems this is what you're already doing). Cycle through all the stylesheets until you find the one that has your style element as the owner node:
var ss = document.createElementNS("http://www.w3.org/2000/svg", "style");
svgElement.appendChild(ss);
var sheets = document.styleSheets,
sheet;
for(var i=0, length=sheets.length; i<length; i++){
sheet=sheets.item(i);
if (sheet.ownerNode == ss) break;
}
sheet.insertRule("circle{fill:green;}", 0);
This should work regardless of whether or not your SVG is in a stand-alone file.
You can use style nodes inside the svg element.
Example from MDN:
<svg width="100%" height="100%" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg">
<style>
/* <![CDATA[ */
circle {
fill: orange;
stroke: black;
stroke-width: 10px;
}
/* ]]> */
</style>
<circle cx="50" cy="50" r="40" />
</svg>
You can just append them like you would do in HTML.
var style = document.createElement('style');
style.setAttribute("type", "text/css");
var svg = document.getElementsByTagName("svg")[0];
svg.appendChild(style);
The "sheet" property is missing in SVGStyleElements in IE11
Based on AmeliaBR's answer i made a polyfill:
if (!('sheet' in SVGStyleElement.prototype)) {
Object.defineProperty(SVGStyleElement.prototype, 'sheet', {
get:function(){
var all = document.styleSheets;
for (var i=0, sheet; sheet=all[i++];) {
if (sheet.ownerNode === this) return sheet;
}
}
});
}
Related
I was trying to work through this tutorial as a practice for a bigger project I'm working on.
My actual SVG is really big, so I would rather not just copy paste the whole giant code directly into HTML.
But here's the practice one I made (i'm also not sure how to clean SVGs made in Inkscape, but I deleted some of the stuff that didn't seem necessary.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
id="svg1"
version="1.1"
viewBox="49.595489 30.040314 84.135223 84.305336"
height="84.305336mm"
width="84.135223mm">
<path class="path5076"
id="path5076"
d="m 70.303571,78.340773 c -4.032971,0.006 -8.033187,1.698025 -10.862132,4.572387 -2.828946,2.874362 -4.455685,6.891674 -4.445904,10.924637 0.0095,3.927963 1.572604,7.841853 4.315065,10.653953 2.74246,2.8121 6.641232,4.47709 10.569138,4.45364 4.633366,-0.0277 9.108311,-2.43049 12.384652,-5.70683 3.574526,-3.57453 6.411017,-6.242046 9.347584,-9.825986 0,0 7.17598,-6.918764 10.743336,-10.51178 3.56737,-3.593016 7.41006,-7.169152 11.08478,-10.843875 3.34645,-3.346446 6.32139,-6.581106 9.51049,-9.812482 3.3753,-3.420038 5.15813,-7.12199 5.18334,-11.661986 0.0216,-3.889398 -1.60848,-8.155743 -4.38434,-10.880165 -2.77587,-2.724421 -6.6563,-4.279784 -10.54572,-4.261811 -3.8759,0.01791 -7.72562,1.595418 -10.48769,4.314587 -2.762056,2.71917 -5.002206,6.149863 -4.776456,11.428746 -0.0484,4.514439 2.874106,9.098792 5.148056,11.372746 3.19237,3.192372 6.9848,6.227335 10.17717,9.419709 3.20164,3.201638 6.0452,5.990107 9.58187,9.526778 1.80732,1.807321 3.93629,5.149881 4.68721,7.593023 0.75092,2.443141 1.01197,5.054051 0.5999,7.576553 -0.55185,3.378163 -2.33545,6.072793 -4.93781,8.296363 -2.60235,2.22358 -5.80201,3.69214 -9.22483,3.7206 -4.69281,0.039 -9.04011,-1.51725 -12.0905,-4.81311 -3.187696,-3.44421 -7.211206,-7.037566 -10.268806,-10.463896 -3.057595,-3.42633 -6.28628,-6.607684 -9.408672,-9.762441 -3.174881,-3.207791 -7.386446,-5.316042 -11.899731,-5.30936 z"
style="fill:none;fill-opacity:1;stroke:#febc00;stroke-width:10.80000019;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</svg>
In the tutorial it says:
Let's target the path with CSS (assuming we're using inline SVG here,
or via an 'object')
which is great because just uploading svg without copy-pasting is exactly what I wanted. But I'm not sure how to proceed now. From what I could find, the only way to access the inside parts of SVG is through javascript, which I've never done before as I don't know javascript.
So I have this
<object id="svg1" data="path.svg" type="image/svg+xml"></object>
Now I'm trying to figure out how to access the path inside the SVG.
I tried putting in this code that I found, but it didn't do anything.
<script>
window.onload=function() {
var a = document.getElementById("svg1");
var svgDoc = a.contentDocument;
var svgItem = svgDoc.getElementById("path5076");
svgItem.setAttribute("fill", "lime");
};
</script>
I then found someone saying that I had to let the SVG load first, so I added
<script>
var mySVG = document.getElementById("svg1");
var svgDoc;
mySVG.addEventListener("load",function() {
svgDoc = mySVG.contentDocument;
alert("SVG contentDocument Loaded!");
}, false);
</script>
but that also didn't seem to work.
This is my first stab at JS, so any help is appreciated.
But if you know how this can be done with CSS PLEASE let me know, I'm much more comfortable with it (as comfortable as I can be after two weeks of learning it, as opposed to 0 weeks with JS)
Edited as per suggestion, but I think I'm still doing it wrong.
Also, I only left "fill:none;fill-opacity:1;stroke:#febc00;stroke-width:10.80000019" in style and removed everything else. Does that mean I can still assign attributes like stroke-dasharray or do they have to be predefined inside style first?
still hoping someone has some other input
The style precedence, from lowest to highest, is
attributes
CSS style sheets
inline styles
Your SVG uses inline styles (style="fill:none;fill-opacity:1;...).
So your code is correct but no matter what you do with the "fill" attribute, it is overridden by the inline style, so svgItem.setAttribute("fill", "lime"); is useless.
You need to alter the inline style somehow.
The easiest solution is to change the inline style by calling:
svgItem.setAttribute("style", svgItem.getAttribute("style").replace("fill:none;","fill:lime;"))
but you can also remove the inline style completely and work with the attributes/external CSS instead.
another option is to convert inline style to attributes:
<script type="text/javascript">
window.onload=function() {
var a = document.getElementById("svg1");
var svgDoc = a.contentDocument;
var svgItem = svgDoc.getElementById("path5076");
// replace inline style with attributes
var styleText = svgItem.getAttribute("style");
svgItem.removeAttribute("style");
for (let pair of styleText.split(';')) {
let [key, value] = pair.split(':');
svgItem.setAttribute(key,value);
}
// now you are ready to work with the attributes
svgItem.setAttribute("fill", "lime");
};
</script>
SVG which was created programmatically does not convert into base64 correctly.
In my application I've got a service which get a response with g-element and then put into created svg-element and convert it into base64, but if I try to open a link I find that svg does not render on the page.
var xmlns = 'http://www.w3.org/2000/svg',
IMAGE_TEMPLATE = document.createElementNS(xmlns, 'svg');
IMAGE_TEMPLATE.appendChild(document.body.querySelector('#ico-appliance-thermostat-128'));
IMAGE_TEMPLATE.setAttribute('id', 'svg');
IMAGE_TEMPLATE.setAttributeNS(null, 'width', 128);
IMAGE_TEMPLATE.setAttributeNS(null, 'height', 128);
IMAGE_TEMPLATE.setAttributeNS(null, 'viewBox', '0 0 128 128');
document.body.querySelector('#test').appendChild(IMAGE_TEMPLATE);
test = function(){
var s = new XMLSerializer().serializeToString(document.getElementById("svg"))
var encodedData = window.btoa(s);
console.log('data:image/svg+xml;base64,' + encodedData);
}
https://jsfiddle.net/6sra5c5L/
Try adding <svg></svg> around <g> element , closing } at test function ; defining test as a named function
var xmlns = 'http://www.w3.org/2000/svg',
IMAGE_TEMPLATE = document.createElementNS(xmlns, 'svg');
IMAGE_TEMPLATE.appendChild(document.body.querySelector('#ico-appliance-thermostat-128'));
IMAGE_TEMPLATE.setAttribute('id', 'svg');
IMAGE_TEMPLATE.setAttributeNS(null, 'width', 128);
IMAGE_TEMPLATE.setAttributeNS(null, 'height', 128);
IMAGE_TEMPLATE.setAttributeNS(null, 'viewBox', '0 0 128 128');
document.body.querySelector('#test').appendChild(IMAGE_TEMPLATE);
function test() {
var s = new XMLSerializer().serializeToString(document.getElementById("svg"))
console.log(document.getElementById("svg"))
console.log(s)
var encodedData = window.btoa(s);
console.log('data:image/svg+xml;base64,' + encodedData);
}
<svg>
<g id="ico-appliance-thermostat-128" transform="scale(2)">
<path d="M106.949,128.009 L105.294,124.692 C115.967,119.333 123.298,108.278 123.298,95.500 C123.298,82.722 115.967,71.666 105.294,66.308 L106.949,62.990 C118.835,68.958 126.999,81.270 126.999,95.500 C126.999,109.730 118.835,122.042 106.949,128.009 ZM117.376,95.500 C117.376,105.954 111.378,115.000 102.645,119.384 L100.990,116.067 C108.510,112.292 113.676,104.502 113.676,95.500 C113.676,86.497 108.510,78.708 100.990,74.933 L102.645,71.615 C111.378,76.000 117.376,85.045 117.376,95.500 ZM106.999,95.213 C106.999,98.063 104.756,100.373 101.988,100.373 C100.251,100.373 98.720,99.462 97.822,98.080 L91.490,98.080 L85.840,116.427 L85.662,116.427 L85.840,117.000 L80.829,117.000 L70.082,82.422 L65.795,97.506 L65.795,98.080 L54.999,98.080 L54.999,92.920 L62.087,92.920 L67.465,74.000 L72.477,74.000 L83.234,108.615 L88.067,92.920 L89.738,92.920 L93.079,92.920 L97.504,92.920 C98.324,91.222 100.021,90.053 101.988,90.053 C104.756,90.053 106.999,92.363 106.999,95.213 ZM24.999,128.000 C11.787,128.000 0.999,117.189 0.999,103.993 C0.999,96.779 4.177,90.380 8.986,85.988 C8.986,85.173 8.986,84.776 8.986,83.981 L8.986,15.997 C8.986,7.193 16.177,-0.000 24.979,-0.000 C33.780,-0.000 40.972,7.193 40.972,15.997 L40.972,83.981 C40.972,84.796 40.972,85.194 40.972,85.988 C45.780,90.380 48.979,96.779 48.999,103.993 C48.999,117.210 38.212,128.000 24.999,128.000 ZM33.999,90.000 L33.999,17.000 C33.999,12.373 29.662,8.009 24.988,8.009 C20.314,8.009 16.000,12.373 16.000,17.000 L16.000,90.000 C10.903,92.952 7.985,97.813 7.985,104.136 C7.985,113.411 15.641,120.990 25.011,120.990 C34.380,120.990 42.037,113.389 41.992,104.114 C41.992,97.791 39.118,92.952 33.999,90.000 ZM24.999,112.990 C19.904,112.990 15.999,109.082 15.999,103.983 C15.999,100.092 18.383,96.796 21.989,95.588 C21.989,95.290 21.989,95.290 21.989,94.992 L21.989,38.991 C21.989,37.500 23.181,35.994 24.984,35.994 C26.787,35.994 27.979,37.187 27.979,38.991 L27.979,95.008 C27.979,95.306 27.979,95.306 27.979,95.604 C31.585,96.812 33.984,100.107 33.999,103.983 C33.999,109.082 30.095,112.990 24.999,112.990 Z"
style="fill: #5aac21;fill-rule: evenodd;"></path>
</g>
</svg>
<div id="test"></div>
<button onclick="test()">Test</button>
jsfiddle https://jsfiddle.net/6sra5c5L/5/
Difference between #guest271314 and my answer:
#guest271314 his answer:
Wrap the g element inside a svg element to make sure that the browser renders the g element onload.
My answer:
Forces the svg element inside #test to render the g element since the g element wasn't rendered onload.
Best answer in this case: #guest271314
Reason: A g element should be inside a svg element in valid html.
When should my answer be used?
In the case that the g element is not an element in the html document.
You didn't close test() with a }.
Code below returns a base64 encoded svg:
https://jsfiddle.net/seahorsepip/6sra5c5L/1/
Edit:
svg render issue is something I ran into myself before, here's the fix with a line of jquery:
https://jsfiddle.net/seahorsepip/6sra5c5L/3/
//Force refresh svg
$("#test").html($("#test").html());
Here's the original SO thread about the issue: jquery's append not working with svg element?
I don't know the javascript equivalent for the jQuery code I added, I tried to write it but it didn't work :/
Edit 2:
Here's the pure js equivalent:
https://jsfiddle.net/seahorsepip/6sra5c5L/4/
//Force refresh svg
var svg = document.body.querySelector('#test').innerHTML;
document.body.querySelector('#test').innerHTML = "";
document.body.querySelector('#test').innerHTML = svg;
HTML elements and SVG elements have different namespaces. By putting the <g> element in your HTML you have created an <html:g> element. When it is moved inside the <svg>, it is still an <html:g> and won't be recognised by the SVG renderer.
You either have to put it inside soem <svg> tags as #guest271314 described. Or, after you append to the SVG, go through all the elements in the <g> and change all their namespaces to the SVG one.
I don't see a full explanation what actually happened anywhere here, so here it goes.
Browsers parse HTML as HTML
While this seems obvious, it is not so in the case, when you put non-HTML (SVG, XML, ...) elements into it.
Browsers are too nice and when you provide valid SGML (parent of XML, HTML, ...) and they find element that doesn't belong there(<g>) according to what you said will be there (HTML) - they don't complain and only treat the unknown elmenents as unknown HTML elements, resulting in class HTMLUnknownElement.
Browsers generally don't change element object class
So you are basically putting HTMLUnknownElement into SVGSVGElement, which will put the tag content into the svg, but since the underlying object is not a valid subelement of SVG (SVGGElement) it won't do anything.
This is the same reason why dynamically created <svg> has to be created with namespace => the namespace, when combined with <svg> element, is telling browser - hey!, this tag is from SVG specification => treat it as an SVG!
Solutions
Your current example code has a syntax error, which I will not address, since that is not the real issue.
Statically defined <g> template
If the template is already in the original document - force browser to take it as SVGSVGElement by wrapping with <svg xmlns="http://www.w3.org/2000/svg"></svg> (browsers may eat it without xmlns attribute, but it is the safer way).
Worried that it would display? Just hide it with CSS display: none; - it will not affect the rendering.
Dynamically defined <g> template
If you are creating <g> element dynamically, you should create it while specifying the namespace using createElementNS() like:
document.createElementNS('http://www.w3.org/2000/svg', 'g');
Static, but non-changable <g> template
If you are stuck in the middle and can't change the static template, you can still build upon the dynamic approach:
create new <g> with the right namespace
var newGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
get the "raw" old <g> - it will be HTMLUnknownElement, but it is ok, since it is built upon HTMLElement and that gives us enaugh API to transfer all we need
var oldGroup = document.querySelector('oldGroupSelector');
possibly transfer old group attributes to new group - handy is element.attributes
for (var i = 0; i < oldGroup.attributes.length; ++i) {
newGroup.setAttribute(
oldGroup.attributes.item(i).name,
oldGroup.attributes.item(i).value
);
}
Now browser already knows contents of newGroup <g> are actually svg - newGroup is SVGGElement - now we can just refill the contents
newGroup.innerHTML = oldGroup.innerHTML;
In my Angular appliation, I want to be able to select the embedded SVG element of an <object> tag using JavaScript or Angular jqLite.
Normally, to do this operation, one must write something similar to:
// Create <object> element of the SVG
var objElement = document.createElement('object');
objElement.setAttribute('type',"image/svg+xml");
// Assume $rootScope.b64 contains the base64 data of the SVG
objElement.setAttribute('data', $rootScope.b64);
// Append the <object> inside the DOM's body
angular.element(document.body).append(objElement);
console.log(objElement);
console.log(objElement.getSVGDocument());
console.log(objElement.contentDocument);
In my console, objElement returns the complete <object> with the <svg> element and its contents (assume that data attribute contains the full base64 data string (b64)).
<object id="svgObject" data="b64" type="image/svg+xml">
#document
<svg>
</svg>
</object>
However, getSVGDocument() returns null and contentDocument returns
#document
<html>
<head></head>
<body></body>
<html>
Why can't I retrieve the SVG element? How can I get the SVG element correctly? I've already looked into many articles and I just can't get the <svg> element. Could this have something to do with cross-origin policy?
I was also unable to select the SVG using things like document.querySelector("svg") even though the SVG was clearly loaded in the DOM. Turned out I needed to do this:
var obj = document.querySelector("object");
var svg = obj.contentDocument.querySelector("svg");
Apparently there's a boundary between the main document and this sub-document, and you have to bridge the divide using contentDocument.
It seems getSVGDocument() is deprecated. Have you tried something like document.querySelector('object svg') ?
The reason you can't see the object is because you are most likely probing for it before DOM load. Try:
// Create <object> element of the SVG
var objElement = document.createElement('object');
objElement.setAttribute('type',"image/svg+xml");
// Assume $rootScope.b64 contains the base64 data of the SVG
objElement.setAttribute('data', $rootScope.b64);
// Append the <object> inside the DOM's body
angular.element(document.body).append(objElement);
objElement.addEventListener('load', doStuff);
function doStuff() {
console.log(objElement);
var svgDoc = getSVGDoc(objElement);
console.log('svgDoc', svgDoc);
}
function getSVGDoc(element) {
console.log('getting obj');
try {
return element.contentDocument;
} catch (e) {
try {
return element.getSVGDocument();
} catch (e) {
console.log('SVG unsupported within this browser');
}
}
}
Ok, so I display some svg using external svg files in which I have some style as follows :
<style type="text/css">
<![CDATA[
.st1 {fill:#ffffff;stroke:#808080;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.5;stroke-width:0.75}
.st2 {fill:#444444;font-family:Calibri;font-size:0.833336em;font-weight:bold}
.st3 {fill:#f8eccc;stroke:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}
.st4 {fill:#444444;font-family:Calibri;font-size:0.75em;font-weight:bold}
]]>
</style>
I want to add some style using javascript doing like this :
console.log("style innerHTML before :\n" + document.querySelector(elementOrSelector).contentDocument.querySelector("style").innerHTML);
var styleContent = document.querySelector(elementOrSelector).contentDocument.querySelector("style").innerHTML;
styleContent = styleContent.slice(0, styleContent.lastIndexOf("}") + 1) + "\n\t\trect:hover {fill:#698B89}\n\t]]>\n";
document.querySelector(elementOrSelector).contentDocument.querySelector("style").innerHTML = styleContent;
console.log("style innerHTML after :\n" + document.querySelector(elementOrSelector).contentDocument.querySelector("style").innerHTML);
It works fine in Firefox, my console shows for the inner HTML after modification :
<![CDATA[
.st1 {fill:#ffffff;stroke:#808080;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.5;stroke-width:0.75}
.st2 {fill:#444444;font-family:Calibri;font-size:0.833336em;font-weight:bold}
.st3 {fill:#f8eccc;stroke:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}
.st4 {fill:#444444;font-family:Calibri;font-size:0.75em;font-weight:bold}
rect:hover {fill:#698B89}
]]>
But in Chrome it fails badly, the console shows :
<![CDATA[
.st1 {fill:#ffffff;stroke:#808080;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.5;stroke-width:0.75}
.st2 {fill:#444444;font-family:Calibri;font-size:0.833336em;font-weight:bold}
.st3 {fill:#f8eccc;stroke:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}
.st4 {fill:#444444;font-family:Calibri;font-size:0.75em;font-weight:bold}
rect:hover {fill:#698B89}
]]>
so my <and > are not set properly, I have the < and > entities instead, and this in Chrome only.
Your problem is caused by differences across various browsers when handling DOM nodes using method Element.innerHTML() .This becomes apparent when inspecting the <style> node before any manipulation takes place. This node contains three child nodes in all browsers: [text, cdata-section, text]. Where the two nodes of type text just contain any whitespace around the cdata-section.
Using method Element.innerHTML() will retain this DOM structure in FF and IE by replacing it with an updated <style> element having the same DOM subtree structure. Chrome, however, will parse the updated styleContent string as character data and create just one node of type text. Since the <style> element only permits character data content Chrome seems to also escape any markup contained within. Hence, your style will afterwards consist of only one text node in Chrome, which is of no use for further processing.
I have set up a Plunk demonstrating a more robust solution:
// Get style node.
var style = document.querySelector("object").contentDocument.querySelector("style");
// Extract CDATA-Section from style's childNodes.
var cdata = getCDATA(style.childNodes);
// Manipulate CDATA content.
var styleContent = cdata.textContent;
styleContent += "\n\t\tpath:hover {fill:#698B89;}";
// Update CDATA-section node.
cdata.textContent = styleContent;
function getCDATA(nodelist) {
for (var i=0; i < nodelist.length; i++) {
var node = nodelist.item(i);
if (node.nodeType == Element.CDATA_SECTION_NODE) {
return node;
}
}
}
Doing it this way, you get a reference to the node of type cdata-section enabling you to easily manipulate its textContent. Because you are not forcing the browser to rebuild part of its DOM tree by using Element.innerHTML() the structure of the <style> DOM subtree will remain unchanged across browsers giving consistent results.
In HTML I can build a simple templating system by providing a template in form of a string, replace some parts of it and then assign it using innerHTML to some container.
var templ = '<span>{myText}</span>'
var newContent = templ.replace( '{myText}', someVariable );
document.querySelector( '#myContainer' ).innerHTML = newContent;
This way I can take advantage of the browser's HTML parser and do not have to repeatedly use document.createElement(). The later can be quite cumbersome, if the templates grows beyond a few elements.
In SVG, however, there is no property on the elements as innerHTML or even innerSVG for that matter.
So my question is: Is there anything I can use in SVG ro resemble the approach from the example above or am I stuck with document.createElement() (or respectivly some lib that uses it)?
As always with my questions: Vanilla JavaScript solutions are preferred, but any pointer to a lib providing a solution is appreciated.
You can use DOMParser to parse XML. You can then use importNode to get that into your existing document if you want via importNode to end up with something like this...
var doc = new DOMParser().parseFromString(
'<svg xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="20"/></svg>',
'application/xml');
someElement.appendChild(
someElement.ownerDocument.importNode(doc.documentElement, true));
Check out the innerSVG javascript shim, it provides the functionality you want.
2014 update: The DOM parsing spec defines innerHTML and outerHTML on Element, which makes these available on svg and xml elements. This has been shipping in Blink for a while now, first versions to support this was Chrome 32 / Opera 19, more details can be found in this bugreport.
Here I write a dirty way...
innerHTML workaround for SVG
http://jsfiddle.net/microbians/8ztNU/
<html>
<body>
<svg id="svgcanvas">
</svg>
<script>
var twocircles='<circle cx="253" cy="562" r="10" stroke="black" stroke-width="2" fill="red"></circle> \
<circle cx="353" cy="562" r="10" stroke="black" stroke-width="2" fill="red"></circle>'
var receptacle = document.createElement('div');
var svgfragment='<svg>'+twocircles+'</svg>';
receptacle.innerHTML=''+svgfragment;
var Nodes=Array.prototype.slice.call(receptacle.childNodes[0].childNodes);
Nodes.forEach(function(el){document.getElementById('svgcanvas').appendChild(el)})
</script>
</body>
</html>
Enjoy!
The short answer is "No, there is nothing equivalent in the world of XML that lets you hand it a bit of markup and have it automatically create all the elements and attributes in the proper namespaces for the location where you insert it."
The closest direct answer is what #Robert has. As noted in my comments, even then you'll need to create any snippets inside an SVG document that has the same namespaces and prefixes as the document into which you'll be inserting the fragment.
Instead, you might find it is as easy (or easier) to use a convenience method on the standard DOM methods:
// Create a named SVG element on a node, with attributes and optional text
function appendTo(node,name,attrs,text){
var p,ns=appendTo.ns,svg=node,doc=node.ownerDocument;
if (!ns){ // cache namespaces by prefix once
while (svg&&svg.tagName!='svg') svg=svg.parentNode;
ns=appendTo.ns={svg:svg.namespaceURI};
for (var a=svg.attributes,i=a.length;i--;){
if (a[i].namespaceURI) ns[a[i].localName]=a[i].nodeValue;
}
}
var el = doc.createElementNS(ns.svg,name);
for (var attr in attrs){
if (!attrs.hasOwnProperty(attr)) continue;
if (!(p=attr.split(':'))[1]) el.setAttribute(attr,attrs[attr]);
else el.setAttributeNS(ns[p[0]]||null,p[1],attrs[attr]);
}
if (text) el.appendChild(doc.createTextNode(text));
return node.appendChild(el);
}
function clear(node){
while (node.lastChild) node.removeChild(node.lastChild);
}
With this you can do things like:
var icons={
Apps : "/images/apps.png",
Games : "/images/games.png"
}
var wrap = document.querySelector('#container');
clear(wrap);
for (var label in icons){
if (!icons.hasOwnProperty(label)) continue;
var icon = appendTo(wrap,'g',{'class':'icon'});
appendTo(icon,'image',{'xlink:href':icons[label]});
appendTo(icon,'text',{x:10,y:20},label);
}
This is IMHO cleaner than trying to construct the raw SVG markup using string concatenation:
var svg = [];
for (var label in icons){
if (!icons.hasOwnProperty(label)) continue;
svg.push('<g class="icon">');
svg.push('<image xlink:href="'+icons[label]+'" />');
svg.push('<text x="10" y="20">'+label+'</text>');
svg.push('</g>');
}
wrap.innerSVG = svg.join(''); // doesn't work, of course
How about my innerSVG shim? CoffeeScript source is below, compiled JavaScript is on https://gist.github.com/2648095
# Important: You must serve your pages as XHTML for this shim to work,
# otherwise namespaced attributes and elements will get messed up.
Object.defineProperty SVGElement.prototype, 'innerHTML',
get: () ->
$temp = document.createElement 'div'
$node = #cloneNode true
for $child in $node.children
$temp.appendChild $child
return $temp.innerHTML
set: (markup) ->
while #firstChild
#firstChild.parentNode.removeChild #firstChild
markup = "<svg id='wrapper' xmlns='http://www.w3.org/2000/svg'>#{markup}</svg>"
$div = document.createElement 'div'
$div.innerHTML = markup
$svg = $div.querySelector 'svg#wrapper'
for $element in $svg.children
#appendChild $element
enumerable : false
configurable : true
With jQuery, you can do it this way:
Let's suppose your svgString contains your svg image after the replacing operations.
$(svgString)[0] to create a svg tag corresponding to your string. Then you can append this element where you want in the dom to draw the image.
I hope this helps
It looks like at least on Chrome and Safari, you can wrap your SVG element in an HTML element and ask for innerHTML. The following HTML file renders a red rectangle, even though the SVG source specifies green.
<body>
<div id="wrapper">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120" height="120" viewBox="0 0 236 120">
<rect x="14" y="23" width="250" height="50" fill="green" stroke="black" stroke-width="1" />
</svg>
</div>
<script>
var el = document.getElementById('wrapper');
var t = el.innerHTML;
t = t.replace(/green/g, "red");
el.innerHTML = t;
</script>
</body>
More simply, document.querySelector('#myContainer').textContent = newContent; has pretty good support, def. to IE9+, Safari, FF, Chrome.
Mike Bostock's my hero for these kinds of things: the D3.js source code is my go-to for SVG questions.