Javascript funktioniert nicht in Embed Svg-Datei

Ich beginne gerade, SVG zu lernen. habe diesen Beispielcode von Manipulating SVG Documents Using ECMAScript (Javascript) and the DOM. Ich ändere es ein wenig:Javascript funktioniert nicht in Embed Svg-Datei

<!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>

Es funktioniert gut. Ich bewege mich zu getrennten SVG-Datei, dann js Code nicht mehr funktioniert:

<!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-Datei: 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>

, was soll ich tun?

Dank Wes

Quelle

2016-04-21 weslleywang

Sie brauchen nicht mehr JS in cdata zu wickeln ... – evolutionxbox

ich aus http://stackoverflow.com/questions/ bekam die Antwort 5333878/google-chrome-wont-accept-contentdocument-or-contentwindow "contentDocument ... (für SVG-Objekte aus SVG-Dateien) funktioniert einwandfrei, wenn der Code von einem Webserver stammt, aber wenn ich den Code in eine lokale Datei kopiere , es wird nicht funktionieren." – weslleywang

Entschuldigung, ich habe Schritt 1 vergessen: \t \t Änderung \t \t document.getElementById ("kreis1"). SetAttribute ("füllen", "blau"); \t document.getElementById ("object1"). ContentDocument.getElementById ("kreis1"). SetAttribute ("fill", "blue"); das funktioniert Firefox aber nicht Google Chrome – weslleywang

Wenn Sie svg in eine andere Datei setzen, dann wird es in einem anderen Dokument sein, und Sie werden in diesem Dokument binden müssen, getSVGDocument verwenden. Und ja, dies funktioniert immer noch nicht in Chrome für lokale Dateien (nur für die Website oder wenn Chrome mit dem entsprechenden Befehlszeilenschalter ausgeführt wird).

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>

Quelle

2016-04-21 20:21:58 Nikolay

Javascript funktioniert nicht in Embed Svg-Datei

Antwort

Verwandte Themen