Question

我一直试图通过javascript访问部分SVG图像。外部文件（同一域）中的图像由外部js文件（同一域）操纵。

这样的例子：

<html>
<head>
    <title>My Title</title>
    <meta charset="utf-8">
    <script defer="defer" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script defer="defer" src="controls.js" type="text/javascript"></script>
</head>
<body>
    <img id="spikeroad" src="map.svg" alt="loadbarspike"/>
</body>

我之前已经问过这个问题：Can getElementByID decend into SVG docs?

我已经阅读并考虑了其他人看到的反馈：How to access SVG elements with Javascript包括所有额外的答案，但我似乎无法使其发挥作用。

当涉及到事件时是黑盒子吗？我需要使用吗？拖欠（至少对我来说）一些关于此的错误信息。但是，我的代码不起作用。

我的主要观点是（对我而言）使'加载'事件发生火灾。

这是我的最新版本：

$(document).ready(function() {
    'use strict';
    $(window).on("load", function () {
        var svgContainer = document.getElementById("spikeroad");
        var svgDoc = svgContainer.contentDocument;
        var inner = svgDoc.getElementById("innerrect");
        inner.addEventListener("mousedown", function() {
            console.debug('inner box was clicked');
        }, false);
    }, false);
});

我们真的很感激您的反馈。

Answer 1

您无法获得contentDocument元素的img。如果您使用iframe，它应该可以使用。

通过javascript操纵SVG，卡在加载事件上

1 个答案: