Встраивание внешних SVG в HTML на JavaScript для манипуляции

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

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

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

Во-первых, я'd рекомендую, чтобы очистить изображение. В Inkscape оставляет все вещи там, что вы Дон'т необходимость, которая включает в себя элементы и атрибуты в sodipodi: "и" в Inkscape:` пространства имен, а также повторяющиеся и/или избыточные атрибуты стиля. Вы Don'т у Чтобы удалить это, но это экономит пропускную способность и время загрузки, и если вы хотите работать с соответствующими УСБ, чем атрибуты стиля на вашем пути.

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

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

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

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

Пример инлайн-SVG элемента:

<div id="svgContainer">

  <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px">

  </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 correct MIME type
xhr.overrideMimeType("image/svg+xml");
xhr.send("");
document.getElementById("svgContainer")
  .appendChild(xhr.responseXML.documentElement);

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

СВГ могут быть стилизованы так же, как HTML. Конечно, SVG имеет это'ы собственный набор свойств, как заполнить непрозрачность " или " инсульт-dasharray и не поддерживает множество HTML-код's свойства, как запас, положение или тому подобное. Но механизмы селектора являются 100% то же самое.

Вы можете смешивать CSS для вашего встроенного SVG с помощью CSS для HTML, либо в <стиль и GT; элемента или внешнего CSS-файла. Вы также можете использовать <стиль и GT; элемент внутри SVG-код и атрибуты "стиль".

Если вы дали свой SVG-элементы данных* содержательные идентификаторы или атрибутами, быть два способа выделения муниципальных образований с помощью CSS будет:

#Bronckhorst, #Laarbeek {fill:red}

или

*[data-gemeente=Bronckhorst], *[data-gemeente=Laarbeek] {fill:red}

Или, Конечно, вы можете изменить атрибуты стиля соответствующих элементов. Свойства поддерживаются как атрибут, т. е. стиль="от инсульта-ширина:2" и может также быть определен как тактный-ширина="и 2" в. Если же свойство задается с помощью атрибута и CSS (с помощью атрибута style, элемент стиля или внешней таблицы стилей), в CSS для переопределения атрибута.

Взаимодействие с JavaScript

Это, по сути, никакой разницы между HTML и SVG, касающиеся взаимодействия с JavaScript, по крайней мере до тех пор, как вы используете обычные дом. Это означает, что HTML-код особенности как innerHTML будет не поддерживаются в СВГ (т. е. нетinnerSVG`). Но SVG имеет собственную графическую определенный набор методов дом (см. спецификациях W3C).

Одна вещь, чтобы быть в курсе работы с пространствами имен. Все СВГ элементы должны быть в SVG пространства имен, и при создании их с помощью JavaScript, createElementNS () должен использоваться вместо метода createElement():

var use = document.createElementNS("http://www.w3.org/2000/svg","use")

Аналогично, атрибуты пространство имен xlink (а именно языка xlink:href, в) нужно манипулировать с помощью setAttributeNS() вместо метод setAttribute():

use.setAttributeNS("http://www.w3.org/1999/xlink","href","#foo")

Как библиотеки, такие как jQuery частично опираться на конкретные возможности HTML, это'ы безопаснее избегать их при работе с СВГ. Также существуют специальные библиотеки SVG как Рафаëл и D3.js, которые могут быть полезны для конкретных целей и стоит обратить внимание. РафаëL является особенно полезным для совместимости с pre-HTML5 и интернет Explorer версий 6-8, которые Дон't есть поддержка SVG. Однако, как я понимаю, это's действительно подходит только для полностью создавать графические объекты с помощью JavaScript, а не работа с существующей графикой, потому что это'ы уровень абстракции выше СВГ. D3.js больше подходит для приложений, как Ваша, если вы'повторно не устраивает обычный дом (и, честно говоря, я'м делаешь это несправедливость, когда просто назвав его СВГ конкретной библиотеки, потому что это's больше).

Вы можете использовать щелчку и подобные атрибуты и стандартный дом метода addEventListener(). Очень простой пример с использованием JavaScript событий можно было бы добавить прослушиватель событий в <СВГ> элемент, который сообщает имя муниципалитета, что пользователь щелкнул на:

document.getElementsByTagName("svg")[0]
  .addEventListener("click",function(evt){
    alert(evt.target.getAttribute("data-gemeente"))
  },
  false)

Примечание: Toopltips Тот же эффект, который вы получаете с помощью атрибута title В HTML может быть достигнута, используя в <название> элемент в SVG. Просто поставить в <название&GT; у элемент внутри элемента SVG и при наведении появится подсказка с содержанием в <название> элемент.

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px">

    test

</svg>

Просто для записи (зная это доходит с опозданием на год) я'вэ нашел SnapSVG отлично подходит для манипуляций СВГ. Тот парень, который был за Рафаëл:

http://snapsvg.io