logo标签列表

JavaScript在嵌入的SVG文件中不起作用。

javascriptsvg
4

我刚开始学习SVG。从使用ECMAScript（JavaScript）和DOM操作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 file: 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

你不再需要将JS代码包裹在CDATA中了... - evolutionxbox
1
我从https://dev59.com/9lXTa4cB1Zd3GeqP0Eve得到了答案。"contentDocument ... (对于来自svg文件的svg对象)如果代码来自Web服务器，则可以正常工作，但是当我将代码复制到本地文件时，它将无法工作。" - weslleywang
抱歉，我忘记了第一步：将document.getElementById("kreis1").setAttribute("fill", "blue");更改为document.getElementById("object1").contentDocument.getElementById("kreis1").setAttribute("fill", "blue");这在Firefox中有效，但在Google Chrome中无效。 - weslleywang
Chrome和Firefox有稍微不同的安全模型。Chrome将不允许您尝试做的事情。 - Robert Longson
2个回答
3

如果您将svg放到另一个文件中，它将在另一个文档中，您需要使用getSVGDocument绑定到该文档。是的，在Chrome中仍然无法在本地文件中使用（仅适用于网站，或者除非Chrome使用相应的命令行开关运行）。

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" />
    <text x="40" y="100">Click on rectangle to change it's color.</text>
  </g>
</svg>

HTML

<!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>
0
这是我的经验：getSVGDocument在服务器上（Github可行）可以工作，但对于本地文件则不行。如果你有一台旧电脑（Windows XP），它也可以在那上面运行。
1
你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接