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 al开发者_如何学Pythontering 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.

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

I case you don't want to change the whole style, you can do:

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