Mozilla Firefox не загружает объекты SVG в addEventListener ("загрузка")

Я не знаю, почему, но он работает на Chrome и Safari, а не в Mozilla. У меня object HTML-тег, который загружает файл SVG. Файл содержит .s0 классы. Я хочу обрабатывать событие, когда вы нажимаете на этот класс.

кто знает, что это неправильно? sry, jsfiddle не показывает object когда я попытался вставить код там.

<object data="jo.svg" type="image/svg+xml" id="obj"></object>

код

$(function() {
    var a = document.getElementById('obj');
        a.addEventListener("load", function() {

            // !!!
            console.log('this line is not reachable in Mozilla or reached before svg loaded');

            var svgDoc = a.contentDocument;
            var els = svgDoc.querySelectorAll(".s0");
            for (var i = 0, length = els.length; i < length; i++) {
                els[i].addEventListener("click", function() {
                    alert('clicked');
                }, false);
            }
        });
});
11
html javascript jquery jquery-svg svg

3 ответов

в первую очередь вам нужно решить использовать jquery или нет и не смешивать jQuery-код с собственным javascript-кодом.

версия Javascript:

<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<object data="http://gbip.ru/poselki/genplan/5/full/gp.svg" type="image/svg+xml" id="obj"></object>
<script type="text/javascript">
    window.addEventListener('DOMContentLoaded', function() {
        var obj = document.getElementById('obj');
        obj.addEventListener('load', function(){
            console.log('loaded');
        });
    });
</script>
</body>
</html>

версия Jquery

<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<object data="http://gbip.ru/poselki/genplan/5/full/gp.svg" type="image/svg+xml" id="obj"></object>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var $obj = $('#obj');
        $obj.on('load', function () {
            console.log('loaded');
        })
    });
</script>
</body>
</html>

Ubuntu 14.04.3 LTS, Firefox 40.0.3

8

лучше использовать <svg> тег вместо <object>. Firefox работает лучше с <embed> в любом случае. Если вы можете поместить код svg внутри тега, все работает нормально.

С <embed> tag:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed

Я рекомендую вам использовать <svg> тег, потому что вы можете легко управлять всеми элементами внутри с помощью CSS и Javascript путь:

https://developer.mozilla.org/en-US/docs/SVG_In_HTML_Introduction

а может быть,Рафаэль JS хорошая библиотека для вас. Он позволяет управлять всеми элементами SVG с помощью javascript и выполнять множество задач без сложности:

http://raphaeljs.com/

это будет хорошо, если вы можете использовать Modernizr.js библиотека, которая поможет вам обнаружить, есть ли браузер поддержка.

 if (!Modernizr.svg) {
    $(".logo img").attr("src", "images/logo.png");
 }

включить modernizr:https://modernizr.com/

вы можете прочитать эту интересную и полную статью, с тем, как использовать svg во всех вариантах:

https://css-tricks.com/using-svg/

однако вы должны сделать так, чтобы @cetver предложил вам в своем ответе не смешивать jQuery и родной код js.

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

удачи.

0

Я решил это, используя:

$('#svg').load('"image/svg+xml"', function () {
    alert('svg loaded');
});

он работает на Chrome, Firefox и IE9+.

0