Внедрение внешнего SVG в HTML для обработки JavaScript

I have a SVG image, showing geographical regions. http://upload.wikimedia.org/wikipedia/commons/7/71/Nederland_gemeenten_2009.svg

Я хочу отобразить изображение SVG на веб-странице и использовать комбинацию JavaScript и CSS для взаимодействия с изображением. (т. е. обнаруживать клики по региону, устанавливая другой цвет фона для региона).

Я знаю, что этот вопрос задается несколько раз в StackOverflow, но я не могу найти полный образец кода для дальнейшей работы. Любые рекомендации по пакетам JavaScript, такие как jQuery или плагины, приветствуются.

 27
добавлено
Просмотры: 3
источник
nl ja de

2 ответы

Мое понимание вопроса заключается в том, что существуют различные аспекты, которые необходимо решить:

  1. Как подготовить изображение для взаимодействия
  2. Как вставить изображение на страницу
  3. Как использовать CSS с SVG
  4. Как использовать JavaScript для взаимодействия

Подготовка изображения

Прежде всего, я бы рекомендовал очистить изображение. Inkscape оставляет все, что вам не нужно, включая элементы и атрибуты в пространствах имен sodipodi: и inkscape: , а также повторяющийся и/или избыточный стиль атрибутов. У вас не есть , чтобы удалить это, но это экономит вам время загрузки/загрузки, а если вы хотите работать с совпадением CSS, то атрибуты стиля на вашем пути.

В вашем файле примера у вас есть 472-кратный один и тот же атрибут стиля. Удалите все из них и создайте эквивалентное правило CSS один раз.

Вы также можете добавить некоторую информацию о муниципалитетах к разметке. Вы можете, например, изменить идентификаторы каждого пути, представляющего муниципалитет, в соответствии с его названием. Для этой цели вы также можете использовать атрибут data - * . Последнее имеет то преимущество, что вы можете использовать пробелы. См. Ниже, как это полезно для взаимодействия, особенно с CSS.

Вставка изображения

Я бы рекомендовал использовать SVG inline, особенно если вы хотите взаимодействовать с CSS/JavaScript. Это означает, что вы просто добавляете разметку SVG в свой HTML или загружаете и вставляете ее с помощью Ajax. Последнее имеет то преимущество, что окружающая страница загружается быстрее и чувствует себя более отзывчивой.

Пример встроенного элемента SVG:

<div id="svgContainer">
  <!-- This is an HTML div, and inside goes the SVG -->
  
    
  
</div>

Упрощенный пример загрузки SVG с использованием Ajax:

xhr = new XMLHttpRequest();
xhr.open("GET","my.svg",false);
// Following line is just to be on the safe side;
// not needed if your server delivers SVG with cилиrect MIME type
xhr.overrideMimeType("image/svg+xml");
xhr.send("");
document.getElementById("svgContainer")
  .appendChild(xhr.responseXML.documentElement);

Как использовать CSS

SVG можно создать так же, как HTML. Конечно, SVG имеет собственный набор свойств, таких как fill-opacity или stroke-dasharray и не поддерживает много свойств HTML, например margin код>, позиция или тому подобное. Но механизмы выбора на 100% одинаковы.

You can mix the CSS fили your inline SVG with the CSS fили your HTML, either inside a