Question

我正在一个项目中使用D3.js来制作SVG图表。该图使用SVG符号。我有javascript代码来管理带有onload事件的这些项目。

在webkit等浏览器中，引擎浏览器运行得很好。但Firefox ... Firefox不会将任何onload事件运行到SVG中。

嗯，我看到了这个错误，并认为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元素：将其插入图形中的相关位置，并执行您将在＆＃34; onload＆＃34;中执行的任何工作。事件

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

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

1 个答案: