SVG符号不会触发onload事件（仅在firefox中）。我正在寻找解决方法

Question

我正在一个项目中与D3.js一起使用SVG绘制图表。 该图使用SVG符号。 而且我有JavaScript代码，可以通过onload事件管理这些项目。

在Webkit引擎之类的浏览器中，浏览器运行得很好。 但是Firefox ... Firefox不会在SVG中运行任何onload事件。

好吧，我看到了这个错误，并认为Firefox是免费软件，这些人喜欢错误跟踪。 而且我已经上传了错误https://bugzilla.mozilla.org/show_bug.cgi?id=1254159 。

这些人的回应是“ WONTFIX”。

用于检查该错误的示例很小而且很清楚：

<html>
    <head>
        <title>test onload event in a svg symbol</title>
        <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    </head>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" pointer-events="all" width="500px" height="500px" style="background: #ffff00;">
            <g class="cat" transform="translate(100 100)">
                <use xlink:href="animals.svg#cat" onload="javascript: console.log('This message is not showed in firefox.');" />
            </g>
        </svg>
        <script type="text/javascript">
            d3.select("svg")
                .append("g")
                    .attr("class", "dog")
                    .attr("transform", "translate(200 200) scale(0.5)")
                    .append("use")
                        .attr("xlink:href", "animals.svg#dog")
                        .on("load", function() {
                            console.log("And this message is not showed in firefox too.");
                        });
        </script>
    </body>
</html>

最后，我在w3c文档中查找并且符号中的事件onload是标准的： https : //www.w3.org/TR/SVG/struct.html#UseElement

有没有人解决这个问题？

Answer 1

解决此问题的一个长途方法是自己（或在d3的帮助下）处理外部资源的加载。

D3具有xml加载器功能（ https://github.com/mbostock/d3/wiki/Requests#d3_xml ），而svg是xml，因此您可以执行以下操作：

准备不使用外部资源的内容
使用d3加载svg
在d3.xml的回调函数中，您将获得一个DOML元素：将其插入图形中的相关位置，然后执行“ onload”事件中要执行的所有工作。

（可能有一种更简单的方法，我只是不知道）

SVG符号不会触发onload事件（仅在firefox中）。我正在寻找解决方法

问题描述

1 个解决方案

解决方案1
0 2016-03-08 08:39:09

SVG符号不会触发onload事件（仅在firefox中）。 我正在寻找解决方法

问题描述

1 个解决方案

解决方案1 0 2016-03-08 08:39:09

SVG符号不会触发onload事件（仅在firefox中）。我正在寻找解决方法

解决方案1
0 2016-03-08 08:39:09