Редактирование SVG-стилей из JavaScript

Question

У меня есть карта мира SVG, и я хочу раскрасить каждый регион различными метриками в реальном времени, изменив атрибуты стиля для каждого региона в SVG. Например, я хочу подкрасить британский синий цвет, чтобы отразить грядущую победу тори (хм).

Это должно быть динамично, поскольку данные часто изменяются и передаются в браузер.

Answer 1

Вы можете применить стиль CSS к SVG Elements. Само собой разумеется, это требует подходящей разметки. Так, например, если ваша карта выглядит примерно так (ОЧЕНЬ упрощенно: -)

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

Вы можете просто сделать следующее:

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

Конечно, также возможно встраивать таблицы стилей в документ SVG:

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

И, наконец, также можно включить внешнюю таблицу стилей в документ SVG:

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

Answer 2

Если вы не хотите менять весь стиль, вы можете сделать:

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