javascript在嵌入svg文件中不起作用_Javascript_Svg

javascript在嵌入svg文件中不起作用

javascript svg

javascript在嵌入svg文件中不起作用,javascript,svg,Javascript,Svg,我刚开始学习SVG。从中获取此示例代码。我稍微改变一下： <!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300"> <script type="text/ecmascript"> <![CDATA[

我刚开始学习SVG。从中获取此示例代码。我稍微改变一下：

<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
  <script type="text/ecmascript">
  <![CDATA[
    function changeRectColor(evt) {
      var red = Math.round(Math.random() * 255);
      evt.target.setAttributeNS(null,"fill","rgb("+ red +","+ red+","+red+")");
    }
  ]]>
  </script>
  <g id="firstGroup">
    <rect id="myBlueRect" width="100" height="50" x="40" y="20" fill="blue" onclick="changeRectColor(evt)"/>
    <text x="40" y="100">Click on rectangle to change it's color.</text>
  </g>
</svg>
</body>
</html>


单击矩形以更改其颜色。

它很好用。我移动到单独的SVG文件，然后js代码停止工作：

<!DOCTYPE html>
<html>
<body>
<object type="image/svg+xml" data="exampl3a.svg" />   
  <script type="text/ecmascript">
  <![CDATA[
    function changeRectColor(evt) {
      var red = Math.round(Math.random() * 255);
      evt.target.setAttributeNS(null,"fill","rgb("+ red +","+ red+","+red+")");
    }
  ]]>
  </script>
</body>
</html>

SVG文件：exampl3a.SVG

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
  <g id="firstGroup">
    <rect id="myBlueRect" width="100" height="50" x="40" y="20" fill="blue" onclick="changeRectColor(evt)"/>
    <text x="40" y="100">Click on rectangle to change it's color.</text>
  </g>
</svg>


单击矩形以更改其颜色。

我该怎么办

谢谢

Wes

如果您将svg放入另一个文件中，那么它将位于另一个文档中，您需要使用

getSVGDocument

绑定到该文档。是的，这在Chrome中对本地文件仍然不起作用（仅适用于网站，或者除非Chrome使用相应的命令行开关运行）

SVG：


单击矩形以更改其颜色。

HTML


函数changeRectColor（evt）{
var red=Math.round（Math.random（）*255）；
setAttributeNS（null，“fill”，“rgb”（“+red+”，“+red+”，“+red+”，“+red+”））；
}
var obj=document.getElementById（'mySvg'）；
obj.addEventListener（'load'，function（）{
var svgDoc=obj.getSVGDocument（）；
var elem=svgDoc.getElementById（“myBlueRect”）；
元素addEventListener（'click'，changeRectColor）；
});

您不再需要在cdata中包装JS…我从“contentDocument…（用于svg文件中的svg对象）中得到了答案，如果代码来自web服务器，则可以正常工作，但当我将代码复制到本地文件时，则无法正常工作。”抱歉，我忘记了第1步：更改document.getElementById（“kreis1”）.setAttribute（“填充”、“蓝色”）；到document.getElementById（“object1”）.contentDocument.getElementById（“kreis1”）.setAttribute（“填充”、“蓝色”）；这在Firefox（但谷歌ChromeChrome除外）和Firefox（火狐）的安全模型略有不同。Chrome将不允许您尝试执行的操作。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
  <g id="firstGroup">
    <rect id="myBlueRect" width="100" height="50" x="40" y="20" fill="blue" />
    <text x="40" y="100">Click on rectangle to change it's color.</text>
  </g>
</svg>

<!DOCTYPE html>
<html>
<body>
<object id='mySvg' type="image/svg+xml" data="example3a.svg" />
<script type="text/ecmascript">
    function changeRectColor(evt) {
        var red = Math.round(Math.random() * 255);
        evt.target.setAttributeNS(null,"fill","rgb("+ red +","+ red+","+red+")");
    }

    var obj = document.getElementById('mySvg');
    obj.addEventListener('load', function() {
        var svgDoc= obj.getSVGDocument();
        var elem = svgDoc.getElementById("myBlueRect");
        elem.addEventListener('click', changeRectColor);
    });
</script>
</body>
</html>