1

SVG ドキュメントを操作して JavaScript を稼ごうとしています。次のコードがあります。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="24" width="400" id="tmcBarLoading">    
    <rect id="outerrect" width="400" height="24" x="0" y="0" style="stroke-width:2px;stroke:grey;fill:none;"/>
    <rect id="innerrect" x="2" y ="2" width="0" height="20" style="stroke-width:0px;" fill="blue">
        <animate attributeName="width" attributeType="XML" begin="0s" dur="2s" fill="freeze" from="0" to="396"/>
    </rect>
</svg>

そして、SVG ドキュメント内の要素がクリックされたときに簡単なアラートを設定しようとしています:

    $(document).ready(function () {
    'use strict';

    var img = document.getElementById("spikeroad");
        console.log(img);
    var delta = img.getElementById("outerrect");
        delta.addEventListener("click", function() {
           alert('Delta clicked');
        }, false);
});

スクリプトは画像を十分に見つけることができますが、クリックされたときに画像にアラートを添付できません。JavaScript を使用してアニメーション イベントをオブジェクトに動的にアタッチできるようにしたいと考えていますが、最初にそれらを識別する方法を考え出す必要があります。

これはすべてこのhtmlにあります：

<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>
</html>
4

2 に答える 2

0

まず、要素を使用する場合<img>、JavaScript で操作できないため、これを行うことはできません。それを<object>要素に置き換えます。

次に、getElementById を呼び出すドキュメントが必要です。要素<object>で contentDocument を呼び出すことにより、タグに埋め込まれているドキュメントを取得できます。<object>古い IE 9 未満の Adob​​e プラグインをターゲットにしている場合、それは contentDocument をサポートしていないため、代わりに getSVGDocument() を呼び出す必要があります。それは私たちにこのようなものを与えます...

function init() {
    'use strict';

    var img = document.getElementById("spikeroad");
    console.log(img);

    var svgdoc;
    if (object && object.contentDocument)
        svgdoc = object.contentDocument;
    else try {
       svgdoc = object.getSVGDocument();
    }

    var delta = svgdoc.getElementById("outerrect");
    delta.addEventListener("click", function() {
       alert('Delta clicked');
    }, false);
});

次に、ボディタグに書き込みます

<body onload="init()">
于 2013-05-30T08:57:15.100 に答える
0

JavaScriptをsvgドキュメントに入れる必要があると思います。img.getElementById も関数ではありません。getElementById はドキュメントでのみ機能します。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="24" width="400" id="tmcBarLoading">

<script>
   window.onload = function() {
     var delta = document.getElementById("outerrect");
     delta.addEventListener("click", function() {
            alert('Delta clicked');
     }, false);
   };
</script>    
<rect id="outerrect" width="400" height="24" x="0" y="0" style="stroke-width:2px;stroke:grey;fill:none;"/>
<rect id="innerrect" x="2" y ="2" width="0" height="20" style="stroke-width:0px;" fill="blue">
    <animate attributeName="width" attributeType="XML" begin="0s" dur="2s" fill="freeze" from="0" to="396"/>
</rect>

于 2013-05-30T08:01:16.010 に答える