Editing SVG styles from javascript

Question

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. EG I want to tint the UK blue to reflect the upcoming tory victory (ahem).

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

Answer 1

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>
    ...