javascript不能在嵌入svg文件中工作

我剛開始學習SVG。從Manipulating SVG Documents Using ECMAScript (Javascript) and the DOM得到了這個示例代碼。我改變了一點：javascript不能在嵌入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>

我應該怎麼辦？

感謝韋斯

來源

2016-04-21 weslleywang

你不需要在CDATA包裹JS了... – evolutionxbox

我得到的答案從http://stackoverflow.com/questions/ 5333878/google-chrome-wont-accept-contentdocument-content-contentwindow「contentDocument ...（對於來自svg文件的svg對象）如果代碼來自Web服務器，但是當我將代碼複製到本地文件，不起作用。」 – weslleywang

對不起，我忘了第1步：\t \t更改 \t \t document.getElementById（「kreis1」）。setAttribute（「fill」，「blue」）; \t \t至 document.getElementById（「object1」）。contentDocument.getElementById（「kreis1」）。setAttribute（「fill」，「blue」）;這適用於Firefox，但不適用Google Chrome – weslleywang

如果你把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>

來源

2016-04-21 20:21:58 Nikolay

javascript不能在嵌入svg文件中工作

回答

相關問題