How to insert a CSS style into an SVG with JavaScript?

Question

I try to add a CSS style sheet to an SVG. So what I have is the following svg:

<svg>
  <defs id="mydefs">
  </defs>
  <rect class="myclass" x="10" y="10" width="20" height="20"/>
</svg>

And I would like to add a style sheet to this like:

<svg>
  <defs id="mydefs">
    <style type="text/css">
      .myclass {
        fill: red;
      }
    </style>
  </defs>
  <rect class="myclass" x="10" y="10" width="20" height="20"/>
</svg>

I tried

var defs = document.getElementById('mydefs');
var style = document.createElementNS("http://www.w3.org/2000/svg", 'style');
style.type = 'text/css';
style.insertRule('.myclass { fill: red; }', style.cssRules.length);
defs.appendChild(style);

But the insertRule (and cssRules) seems not to be supported. Here is the (not working) codepen:

https://codepen.io/anon/pen/EEoLqg

sneep · Accepted Answer · 2018-03-29 02:29:47Z

2

Works like this:

var defs = document.getElementById('mydefs');
var style = document.createElementNS("http://www.w3.org/2000/svg", 'style');
defs.appendChild(style);
style.type = 'text/css';
style.sheet.insertRule('.myclass { fill: red; }', style.sheet.cssRules.length);

(BTW, you can also just use the parent document's style sheet:)

var style = document.createElement('style');
document.head.appendChild(style);
style.type = 'text/css';
style.sheet.insertRule('.myclass { fill: red; }');

The above approaches don't show any CSS in the inspector. If you need that, you could try something like the following instead:

var defs = document.getElementById('mydefs');
var style = document.createElementNS("http://www.w3.org/2000/svg", 'style');
defs.appendChild(style);
style.innerHTML = '.myclass { fill: red; }';

Update: IE work-around as per Daniel's comment:

(The problem seems to be that IE does not support the .innerHTML for SVG elements.)

Use the .innerHTML of a <div> and set it to <svg><style>.myclass { fill: red }</style></svg> and then append all nodes in the div's .childNodes[0].childNodes[0] to the style element via:

Array.prototype.slice.call(div.childNodes[0].childNodes[0].childNodes).forEach(function(el) {
    element.appendChild(el);
});

where div is the <div> element.

edited Mar 29, 2018 at 2:29

answered Mar 28, 2018 at 10:11

sneep

1,92815 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Daniel Over a year ago

Hmm, where does the style go? I can't see it in the svg's <defs>. Am I missing something? Here is your code: codepen.io/anon/pen/EEoLqg

Daniel Over a year ago

(I need the style to go into the svg since I am using it also as a standalone.)

sneep Over a year ago

Updated my post. Does this address what you were asking?

Daniel Over a year ago

Yes, it does. At least in Firefox and Chrome. But for some reason IE 11 is not playing along.

sneep Over a year ago

Ah... Can't help with IE, sorry

|

Collectives™ on Stack Overflow

How to insert a CSS style into an SVG with JavaScript?

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related