Search code examples
javascriptsvgstyles

Editing SVG styles from javascript

I have an SVG map of the world, and I want to colour each region by various metrics in real time by altering style attributes for each region in the svg. For example, I want to tint the UK blue.

This needs to be dynamic as the data changes often and is pushed out to the browser.

Solution

  • You can apply CSS styling to SVG Elements. Needless to say, this requires a suitable markup. So for instance, if your map looks something like (VERY simplified :-)

    <svg>
    <g id="USA">...</g>
    <g id="UK">...</g>
</svg>

    You could simply do the following:

    var country = document.getElementById("UK");
country.setAttribute("style", "fill: blue; stroke: black");

    Of course it is also possible to embed stylesheets into an SVG document:

    <svg>
  <defs>
    <style type="text/css">
      <![CDATA[
      // insert CSS rules here
      ]]>
    </style>
  </defs>
</svg>

    And finally, it is also possible to include an external stylesheet into an SVG document:

    <?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="style.css" type="text/css"?>
<svg>
    ...