0

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>

以前にこの質問をしたことがあります: getElementByID は SVG ドキュメントに分類できますか?

私はそれを読み、ここで見られる他の人からのフィードバックを考慮に入れました: Javascript を使用して SVG 要素にアクセスする方法(すべての追加の回答を含む) ですが、これを機能させることができないようです。

イベントに関してはブラックボックスであり、使用する必要がありますか? （少なくとも私には）これに関していくつかの誤った情報があります。ただし、私のコードはどちらでも機能しません。

私の主な難点は、(私には) 'load' イベントを発生させているように見えます。

これは私の最新バージョンです：

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

これ以上のフィードバックをいただければ幸いです。

4

1 に答える 1

1

contentDocument要素のを取得できませんimg。iframe代わりにan を使用すると機能するはずです。

于 2013-06-10T08:45:24.260 に答える