Question

我试图通过操纵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>

Answer 1

我认为你应该把你的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>

Answer 2

如果您使用<img>元素，则无法执行此操作，因为无法使用javascript操作它们。将其替换为<object>元素。

然后您需要调用getElementById的文档，您可以通过调用<object>元素上的contentDocument来获取嵌入在<object>标记中的文档。如果您的目标是IE的过时Adobe插件＆lt; 9然后它不支持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()">

getElementByID可以下载到SVG文档中吗？

2 个答案: