CODEWITHSUNDEEP
javascripthtmlcsssvg
Dmitry
Dmitry

Reputation: 1706

How to embed SVG styling with javascript?

I'm trying to embed a CSS styling into a SVG content (like in this example) using JavaScript. The SVG itself is embedded into a HTML5 file. The purpose of style embedding is to save a SVG online created content into a standalone *.svg file.

Here is the first tested content: http://jsfiddle.net/3L8a2oxy/

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SVG embedded styling</title>
</head>

<body>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs></defs>
        <circle  cx="50" cy="50"  r="25"/>
    </svg>

    <script>
        var svg = document.getElementsByTagName("svg")[0];
        var defs = svg.getElementsByTagName('defs')[0];
        var style = document.createElement('style');
        defs.appendChild(style);
        style.setAttribute('type', 'text/css');

        var node = document.createTextNode('<![CDATA[circle { fill: red; }]]>');
        style.appendChild(node);

    </script>
</body>

</html>

In that example styling doesn't work:

enter image description here

and Firefox (v 34.0.5) gives the error:

Selector expected. Rulset ignore due to bad selector.

However, if you make a separate html file with this code, save it, and reopen in a browser, the styling can be seen, i.e. it is parsed by browser correctly.

If one changes the style code as to:

var node = document.createTextNode('circle { fill: red; }');

enter image description here

then styling works online with no errors (http://jsfiddle.net/8grf344g/). But it's not what the specifications told us to do. I can save the SVG part into a file in then open it in the browser, and it appears to be styled correctly, but I'm not sure how it will behave in other applications.

So, the question is in the subject.

PS. There is another issue for which I haven't found any solution yet. If you try to merge style data with style tag as follows:

var node = document.createTextNode('<style type=\'text/css\'><![CDATA[circle { fill: red; }]]></style>');
defs.appendChild(node);

then to goes into the document encoded:

&lt;style type='text/css'&gt;&lt;![CDATA[circle { fill: red; }]]&gt;&lt;/style&gt;

I know it happens for the inner content of html elements, but why it doesn't happen in the above first case?

P.S. Since the answers to the subject kindly provided by the community point to a right direction, but don't give a working example, I put one to jsfiddle (http://jsfiddle.net/26wfwa12/1/). Feel free to use it and comment.

Upvotes: 1

Views: 2329

Answers (1)

Robert Longson
Robert Longson

Reputation: 123985

You've two main bugs. Firstly, you need to create the style element in the SVG namespace i.e. 

var style = document.createElementNS('http://www.w3.org/2000/svg', 'style');

Secondly you can't use <![CDATA[ in html it's an xhtml only thing so you want

var node = document.createTextNode('circle { fill: red; }');

Finally (and this bit is optional), the text/css attribute can be omitted if you wish. All of which gives you this

The specifications certainly do not tell you to use <![CDATA[ with html, but they do tell you to use it with xhtml and xml and SVG at one time was an xml only language. If you intend to have standalone svg files (which will be served as image/svg+xml) then you may need to put the <![CDATA[ back in.

Upvotes: 5

Related Questions