javascript 無法在嵌入 svg 文件中工作

Question

我剛開始學習 SVG。 從Manipulating SVG Documents Using ECMAScript (Javascript) and the DOM得到這個示例代碼。 我稍微改變一下：

<!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 文件：example3a.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>

我該怎么辦？

謝謝韋斯

Answer 1

如果將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>

Answer 2

這是我的經驗：它 getSVGDocument 在服務器上工作（Github 工作），但不適用於本地文件。 如果您有一台較舊的計算機 (Windows XP)，它也可以使用。

javascript 無法在嵌入 svg 文件中工作

問題描述

2 個解決方案

解決方案1
2 已采納 2016-04-21 20:21:58

解決方案2
0 2021-09-17 16:26:38

javascript 無法在嵌入 svg 文件中工作

問題描述

2 個解決方案

解決方案1 2 已采納 2016-04-21 20:21:58

解決方案2 0 2021-09-17 16:26:38

解決方案1
2 已采納 2016-04-21 20:21:58

解決方案2
0 2021-09-17 16:26:38