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

Question

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

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

Answer 1

Вы можете применить стили CSS к элементам SVG. Излишне говорить, что для этого требуется подходящая разметка. Так, например, если ваша карта будет выглядеть примерно так (очень упрощенно :-)

<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";