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

该脚本可以很好地找到 img，但在单击该图像时无法将警报附加到图像。我希望能够使用 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

Firsty you can't do this if you use an <img> element as they can't be manipulated with javascript. Swap that for an <object> element.

Then you need document to call getElementById on, you can get that document that is embedded in the <object> tag by calling contentDocument on the <object> element. If you're targetting the obsolete Adobe plugin for IE < 9 then it doesn't support contentDocument and you have to call getSVGDocument() instead. That gives us something like this...

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

Then in your body tag write

<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 回答