Добавить событие click для элементов встроенного SVG в javascript

Ответ 1

Хорошо, используя ваши комментарии, я нашел ответ на свою проблему. Я добавил этот код в сам 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?

Ответ 2

Здесь пример, который должен быть очень похож на то, что вы пытаетесь сделать. Он использует <object> вместо <embed> , но это только незначительная деталь. См. Этот другой пример о том, как добраться до DOM встроенного документа из родительского документа, он немного отличается от двух.

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

Ответ 3

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

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

Изменить: более конкретный пример http://jsfiddle.net/EzfwV/3/

Ответ 4

Обновление июля 2016 года

Теперь можно реагировать на события из embed элементов, при условии, что вы вставляете что-то из того же домена. Я быстро продемонстрировал это как JSFiddle. Наиболее важная часть заключается в том, что доступ к встроенному документу возможен через embeddingElement.contentDocument. Оттуда можно получить доступ к элементу 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>

Ответ 5

Простым методом является

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

Script

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

Live Demo в JSFiddle