Редактирование SVG разрабатывает из JavaScript

Question

Редактирование SVG разрабатывает из JavaScript

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

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

6

javascript svg styles

задан Chilly 17 March 2010 в 14:57

1 ответ

Другие вопросы по тегам:

javascript svg styles

Похожие вопросы:

score 13 · Accepted Answer

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

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