How can I dynamically style programmatically generated SVG?

I am using a js library (mermaid) to generate svg on a web page. I need to dynamically apply styling to parts of the svg as the user activates various commands using keyboard shortcuts, Particularly, I need to highlight the element in the svg that is currently designated as the selected one in the logical model. Looking at other questions on dynamically styling svg deal with inlined static svg, so they probably don’t apply to my case and none of the methods I tried so far have worked.

The style I am trying to apply is border-radius : 2rem; box-shadow : 0 0 3rem red; when applied to regular html, this gives the element a glowing red border.

First thing I’ve tried was to include this as a class in a element in like this :

<style>
  .highlight {
    border-radius : 2rem; 
    box-shadow : 0 0 3rem red;
  }
</style>

Adding the class to a regular html element ‘s class list like an , , or

, would produce the desired styling. However when I would programmatically get a element and add the class to its class list, then it would remain without the glowing border. Inspecting the svg using chrome developer tools revealed that the relevant class has been added to the element’s class list. Using the same method was successful for regular html. For reference here is the method I used to add the class:

graphicDiv.querySelector(selector).classList.add('highlight')

This having failed, I thought maybe the svg had some styling inside its internal element that overrode my styling, so I added !important to my styles so they would have highest precedence. This still failed to work, so next I tried to set the style property for the element, which should have the highest precedence like this:

graphicDiv.querySelector(selector).setAttribute('style', 'border-radius : 2rem !important; box-shadow : 0 0 3rem red !important;')

This still failed to produce any difference in the styling of the svg. Inspecting the element in chrome dev tools revealed the style attribute was indeed set.

I also tried adding my style definition to the svg’s own element, by getting it after the svg is generated, and appending my class style definition to its text content. It would still not work.

Finally, I thought those css properties might not be supported by , so I changed them to background-color: green; instead, since I think I saw in an article on styling svg with css that this css prop was used on an . This didn’t work. I tried applying to a element in the svg. Didn’t work either.

I am completely baffled why none of this is working. I would massively appreciate if anyone could help me understand how I could dynamically change the styling of svg elements!

Answer

While normal CSS attributes can be given to SVG elements, most do nothing as SVG elements by definition adhere to a different set of styling rules.

A simple example is that in normal CSS you might set left: 25px but for SVG you would need to set x: 25.

For the styling you want, border radius is usually achieved with stroke-width. For background colour just use fill. As for a shadow, it may be a little more complex but you should have a look at feDropShadow.

Besides that, applying those styles with css rules should be roughly the same.

I hope that’s at least some help.

Advertisement

Answer