Добавить событие клика на элементах встроенного SVG в JavaScript

Question

Я получил это изображение SVG из Википедии и встроил его в веб-сайт с помощью этого кода:

<embed src="circle1.svg" type="image/svg+xml"/>

Если вы запустите это, вы можете проверить элемент и увидеть исходный код. Все страны на изображении являются отдельными элементами. Если я нажимаю на страну, я хочу предупредить идентификатор этой страны, поскольку каждая страна имеет идентификатор из двух букв в SVG. Кто-нибудь знает способ сделать это? Было бы легче, если бы я поместил это в элемент?

Answer 1

Вот пример , который должен быть очень похож на то, что вы пытаетесь сделать.Он использует вместо , но это лишь незначительная деталь.Посмотрите этот пример , чтобы узнать, как добраться до DOM встроенного документа из родительского документа, он немного отличается между ними.

Также обратите внимание, что карты svg, которые есть в Википедииони довольно велики, поэтому вы захотите оптимизировать svgs перед использованием на реальном веб-сайте, например, SVG Cleaner или SVG Scour .

Answer 2

Если ваш SVG содержится в DOM, вы можете прикрепить прослушиватели событий к отдельным элементам так же, как базовый HTML. Используя jQuery, одним примером будет: http://jsfiddle.net/EzfwV/

Обновление: большинство современных браузеров поддерживают встроенный svg, поэтому для загрузки вашего источника в DOM все, что вам нужно сделать, это загрузить его из ресурса (используя нечто вроде jQuery's load ()).

Редактировать: более конкретный пример http://jsfiddle.net/EzfwV/3/

Answer 3

Хорошо, используя ваши комментарии, я нашел ответ на мою проблему. Я добавил этот код в самом SVG.

<script type="text/javascript"> <![CDATA[
    function addClickEvents() {
        var countries = document.getElementById('svg1926').childNodes;
        var i;
        for (i=0;i<countries.length;i++){
            countries[i].addEventListener('click', showCountry);
        }
    }

    function showCountry(e) {
        var node = e.target;
        if (node.id != 'ocean') {
            node = getCorrectNode(node);
        }
        alert(node.id);
    }

    function getCorrectNode(node) {
        if (node.id.length == 2 || node.id == 'lakes') {
            return node;
        }
        return getCorrectNode(node.parentNode);
    }
]]> </script>

Функция addClickEvents запускается при загрузке svg. Но у меня все еще есть другая проблема с этим. Я должен внедрить этот SVG (с кодом) в документ HTML, используя

<embed src="circle1.svg" type="image/svg+xml" />

Вместо предупреждения идентификатора, я должен поместить его в div в документе HTML. Как я могу получить этот идентификатор из SVG?

Answer 4

Обновление июль 2016

Теперь можно реагировать на события элементов embed при условии, что вы встраиваете что-то из того же домена. Я создал быструю демонстрацию этого как JSFiddle . Наиболее важной частью является то, что можно получить доступ к встроенному документу через embeddingElement.<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Property/contentDocument" rel="nofollow noreferrer">contentDocument</a>. Оттуда можно получить доступ к элементу SVG и установить обработчики событий щелчка.

Примечание по реализации: в демонстрационной версии я добавляю обработчики событий ко всем элементам path. По соображениям производительности вы, возможно, захотите добавить один обработчик событий в SVG, а затем использовать цель события в обработчике. Редактировать: как в этом обновленная скрипка .

Старый ответ

Быстрый поиск в Google привел меня сюда . Я думаю, что это ответ на вашу проблему, верно?

Подводя итог: здесь невозможно зафиксировать события на элементе embed, к сожалению, единственным решением является изменение файла SVG.

Вот небольшой пример того, как встроить JavaScript в файл SVG ( JSFiddle ). Он основан на примере от IBM developerWorks.

<svg>
  <script type="text/javascript">
    <![CDATA[
    var redVal = 0;
    var greenVal = 0;
    var blueVal = 0;

    function changeCol(evt) {
       redVal = Math.round(Math.random() * 255);
       greenVal = Math.round(Math.random() * 255);
       blueVal = Math.round(Math.random() * 255);
       evt.target.setAttribute("fill",
             "rgb(" + redVal + "," + greenVal + "," + blueVal + ")");

    }
    // ]]>
  </script>
  <circle cx="200" cy="200" r="100" fill="blue"
          onclick="changeCol(evt)" />
</svg>

Answer 5

Простой метод:

• Динамическое создание пути в SVG с использованием javascript
• Динамическое добавление стилей
• Добавление событий в путь
• Добавление ксуществующий SVG.

Сценарий

 <svg id="mySvg"></svg>

---

var XMAX = 500;
var YMAX = 500;
var _xx=10;
var _reg=100;
var _l=10;
// Create PATH element
for(var x=1;x<20;x++)
{
var pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path");
pathEl.setAttribute('d','M'+_l+' 100 Q 100  300 '+_l+' 500' );
pathEl.style.stroke = 'rgb('+(_reg)+',0,0)';
pathEl.style.strokeWidth = '5';
pathEl.style.fill = 'none';
    $(pathEl).mousemove(function(evt){$(this).css({"strokeWidth":"3","stroke":"#ff7200"}).hide(100).show(500).css({"stroke":"#51c000"})});

$('#mySvg').append(pathEl);
_l+=50;
}

Живая демоверсия в JSFiddle