CODEWITHSUNDEEP
javascriptjqueryhtmlsvgjquery-svg
sirjay
sirjay

Reputation: 1766

Mozilla Firefox doesn't load SVG objects in addEventListener('load'

I don't know why, but it works on Chrome and Safari, not in Mozilla. I have object html tag that loads svg file. File contains .s0 classes. I want to handle event when you click on that class.

Who knows what is wrong? sry, jsfiddle does not show object when I tried to paste code there.

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

Code

$(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);
            }
        });
});

Upvotes: 11

Views: 2502

Answers (3)

naortor
naortor

Reputation: 2089

I solved it by using:

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

It works on Chrome, Firefox and IE9+.

Upvotes: 3

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

It's better to use <svg> tag, instead of <object>. Firefox works better with <embed> anyway. If you can put the svg code inside tag all works fine.

You can try with <embed> tag:

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

I recommend to you to use the <svg> tag, because you can control all elements inside with CSS and Javascript in a easy way:

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

And maybe, Raphaël JS is a good library for you. It allows to control all SVG element with javascript and make a lot of tasks without complexity:

http://raphaeljs.com/

It will be fine if you can use Modernizr.js library, that helps you detecting if there's browser support.

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

To include modernizr: https://modernizr.com/

You can read this interesting and complete article, with how to use svg in all variants:

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

However, you should make that @cetver suggest to you in his answer, don't mix jQuery and native js code.

With all recommendations, you can achieve in a simple way the loading content.

Good luck.

Upvotes: 0

cetver
cetver

Reputation: 11829

Primarily you need to decide use jquery or not and do not mix jquery-code with native javascript-code.

Javascript version:

<!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 version

<!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

Upvotes: 10

Related Questions