我有以下javascript代码，用于操作通过object标签插入的SVG文档，它可以在Chrome，FireFox以及iOS Safari中正常运行。
但是，当我在Microsoft Edge或IE上运行时，我收到以下错误。
＆＃34;对象不支持属性或方法＆＃39; beginElement＆＃39;＆＃34;
有关如何使其适用于Edge的任何想法吗？
PS：尝试添加代码，以便它可以在这里运行，但失败了，不知道为什么。
var object = document.getElementById("basicsvg");
object.onload=function() {
var svgdoc;
// get access to the SVG document object
try {
svgdoc = object.contentDocument;
} catch(e) {
try {
svgdoc = object.getSVGDocument();
} catch (e) {
alert("SVG in object not supported in your environment");
}
}
if (!svgdoc) return;
var r = svgdoc.rootElement;
// get SVG element and modify
var back = svgdoc.getElementById('back');
var base = svgdoc.getElementById('base');
back.onclick = bback;
base.onclick = bback;
function bback() {
//SVG supports namespaces
// var width = parseFloat(square.getAttributeNS(null,"width"));
// width-=50;
// square.setAttributeNS(null,"width",width);
var color = back.getAttributeNS(null,"fill");
if (color == "#32A3D8") {
back.setAttributeNS(null,"fill","#DADAD7");
back.setAttributeNS(null,"stroke","#DADAD7");
base.setAttributeNS(null,"fill", "#32A3D8");
base.setAttributeNS(null,"stroke","#32A3D8");
} else {
back.setAttributeNS(null,"fill","#32A3D8");
back.setAttributeNS(null,"stroke","#32A3D8");
base.setAttributeNS(null,"fill","#DFE3DE");
base.setAttributeNS(null,"stroke","#DFE3DE");
}
}
var lbasic = svgdoc.getElementById('lbasic');
var rbasic = svgdoc.getElementById('rbasic');
lbasic.onclick = lwindow;
rbasic.onclick = rwindow;
function lwindow() {
var windowcolor = lbasic.getAttributeNS(null, "fill");
if (windowcolor == "#32A3D8") {
lbasic.setAttributeNS(null, "fill", "#80b71b");
} else {
lbasic.setAttributeNS(null, "fill", "#32A3D8");
}
}
function rwindow(){
var windowcolor = rbasic.getAttributeNS(null, "fill");
if (windowcolor == "#32A3D8") {
rbasic.setAttributeNS(null, "fill", "#80b71b");
} else {
rbasic.setAttributeNS(null,"fill", "#32A3D8");
}
}
// START OF INCORPORATE ROTATING ASPECT TO GEARS + PAUSE OR STOP FEATURE
var gear3 = svgdoc.getElementById('gear-3');
var gear4 = svgdoc.getElementById('gear-4');
gear3.onclick = rotategears;
gear4.onclick = rotategears;
var gears;
function rotategears(){
var SVGRoot
if (gears == "startgears"){
// svgdoc.pauseAnimations();
// gear3.pauseAnimations();
gears = "stopgears";
// gear3.setAttributeNS(null, "dur", "0");
// gear4.setAttributeNS(null, "dur", "0");
addRotateTransform('gear-3', 0, -1);
addRotateTransform('gear-4', 0, 1);
object.pauseAnimation();
} else {
addRotateTransform('gear-3', 5, -1);
addRotateTransform('gear-4', 6, 1);
gears = "startgears";
}
}
function addRotateTransform(target_id, speed, direction) {
var svgNS = "http://www.w3.org/2000/svg";
var element_to_rotate = svgdoc.getElementById(target_id);
var my_transform = svgdoc.createElementNS(svgNS, "animateTransform");
var bb = element_to_rotate.getBBox();
var cx = bb.x + bb.width/2;
var cy = bb.y + bb.height/2;
my_transform.setAttributeNS(null, "attributeName", "transform");
my_transform.setAttributeNS(null, "attributeType", "XML");
my_transform.setAttributeNS(null, "begin", "target_id.click");
my_transform.setAttributeNS(null, "type", "rotate");
my_transform.setAttributeNS(null, "dur", speed + "s");
my_transform.setAttributeNS(null, "fill", "freeze");
my_transform.setAttributeNS(null, "end", "target_id.click");
my_transform.setAttributeNS(null, "repeatCount", "indefinite");
my_transform.setAttributeNS(null, "from", "0 "+cx+" "+cy);
my_transform.setAttributeNS(null, "to", 360*direction+" "+cx+" "+cy);
element_to_rotate.appendChild(my_transform);
my_transform.beginElement();
}
// END OF INCORPORATE ROTATING ASPECT TO GEARS + PAUSE OR STOP FEATURE
// Hover function library
// In order to select by class atribute, it is important to note that ElementS is plurarl because there may be several instances of the class.
// Further more the value that is brought back is an array.
function basicHover (target_class, speedH, fromColor, toColor) {
var svgNS = "http://www.w3.org/2000/svg";
var element_to_rotate = svgdoc.getElementsByClass(target_id);
var my_transform = svgdoc.createElementNS(svgNS, "animateTransform");
my_transform.setAttributeNS(null, "attributeName", "fill");
my_transform.setAttributeNS(null, "attributeType", "XML");
my_transform.setAttributeNS(null, "begin", "mouseover");
my_transform.setAttributeNS(null, "dur", speedH + "s");
my_transform.setAttributeNS(null, "fill", "freeze");
my_transform.setAttributeNS(null, "end", "target_id.click");
my_transform.setAttributeNS(null, "repeatCount", "indefinite");
my_transform.setAttributeNS(null, "from", fromColor);
my_transform.setAttributeNS(null, "to", toColor);
element_to_rotate.appendChild(my_transform);
my_transform.beginElement();
}
// Add opacity transform
var bulb = svgdoc.getElementById('bulb');
var bulbs = "pauseOpacity";
bulb.onclick = bulbOpacity;
function bulbOpacity(){
if (bulbs === "pauseOpacity") {
bulbs = "startOpacity";
addOpacityTransform('bulb', 6, 1, 0.3);
} else {
bulbs = "pauseOpacity";
addOpacityTransform('bulb', 6, 1, 1);
}
}
function addOpacityTransform (target_id, speed, start_opacity, end_opacity){
var element_to_animate_opacity = svgdoc.getElementById(target_id);
var svgNS = "http://www.w3.org/2000/svg";
var my_transform_opacity = svgdoc.createElementNS(svgNS, "animate");
my_transform_opacity.setAttributeNS(null, "attributeName", "opacity");
my_transform_opacity.setAttributeNS(null, "values", start_opacity+"; "+end_opacity+"; "+start_opacity);
my_transform_opacity.setAttributeNS(null, "dur", speed + "s");
my_transform_opacity.setAttributeNS(null, "repeatCount", "indefinite");
element_to_animate_opacity.appendChild(my_transform_opacity);
my_transform_opacity.beginElement();
}
};<div style="width=211px;">
<svg id="basicsvg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="211.8" height="181.4" viewBox="0 0 211.8 181.4">
<path id="back" fill="#32A3D8" d="M168.2 139.4h-31c-.7-2-1.3-4.6-.4-6.9.3-.7.8-1.4 1.4-2h37v-5.8h-14.6c-1-1-2.4-2.8-3.9-6.1 1.7-4.4.9-9.2.3-11.8h43.5c6.1 0 11.3-5.5 11.3-11.6V16.5c0-6.1-5.2-11.3-11.3-11.3H82.1c-6.1 0-10.8 5.3-10.8 11.3v78.6c0 6.1 4.7 11.6 10.8 11.6h71.6c.4 1.3 1 4.1.8 7.1-.3-.3-.6-.5-1-.5-.8-.1-6.5-.1-12.1-.1h-8.3c-2 0-3.4 0-3.7.1-1.6.1-2.5 3.4-2.5 3.4-1.7 4.5-3.4 6.8-4.6 7.9h-14.5v5.8h26.6c-.1.2-.3.5-.4.7-1.2 2.8-.8 5.7-.1 8.1h-26.5c-5.1 0-8.9 4.3-8.9 9.4V173c0 5 3.8 8.3 8.9 8.3h61c5.1 0 7.8-3.2 7.8-8.3v-24.4c-.2-4.9-3-9.2-8-9.2zm3.1-62.9l-13.8-17.3L144 77l13.5-17.8-14.3-17.9 14.3 17.9 14.5-19-14.5 19 13.8 17.3zM94.5 59.1l14-18.1-14 18.1L107.9 76 94.5 59.1 81.2 76.5l13.3-17.4-14.2-18 14.2 18zm-35.1 54.3v-1.1c0-8.7-5-16.9-15.6-16.9-8.7 0-11.8 5-14.3 10.5-1.4-1.2-3.1-1.9-5-1.9-4.3 0-7.8 3.5-7.8 7.9 0 .5 0 .9.1 1.3-5.9.9-10.4 6.1-10.4 12.3 0 6.9 5.5 12.4 12.3 12.4H57c6.8 0 12.3-5.6 12.3-12.4 0-5.9-4.2-10.9-9.9-12.1z"/>
<path fill="#DADAD7" d="M71.7 6h131.2v90.3H71.7z"/>
<path fill="#E3F0E6" d="M71.7 6h131.2v14.8H71.7z"/>
<path fill="#152C34" d="M195.3 0H76.9C70.8 0 66 5.3 66 11.3v78.6c0 6.1 4.7 11.6 10.8 11.6h118.4c6.1 0 11.3-5.5 11.3-11.6V11.3c.1-6-5.1-11.3-11.2-11.3zm3.5 92.4h-125V9.1h125v83.3z"/>
<path fill="#FBFCFC" d="M155.4 119.5H170v5.8h-67.6v-5.8h14.5c1.2-1.2 2.9-3.5 4.6-7.9 0 0 .9-3.3 2.5-3.4.8-.1 6.5-.1 12.1-.1s11.4 0 12.1.1c1.6.1 2.5 3.4 2.5 3.4 1.8 4.4 3.5 6.7 4.7 7.9z"/>
<path id="base" fill="#DFE3DE" d="M155.4 119.5c-1.2-1.2-2.9-3.5-4.6-7.9 0 0-.9-3.3-2.5-3.4-.8-.1-6.5-.1-12.1-.1h-8.4c7.1 4.9 13.5 10.8 19.3 17.2H170v-5.8h-14.6z"/>
<path fill="#152C34" d="M163 134.2h-61c-5 0-8.9 4.3-8.9 9.4V168c0 5.1 3.8 8.3 8.9 8.3h61c5.1 0 7.8-3.2 7.8-8.3v-24.4c0-5.1-2.8-9.4-7.8-9.4zm-15.3 9.3h6.1v6.1h-6.1v-6.1zm9.2 9.2v6.1h-6.1v-6.1h6.1zm-18.3-9.2h6.1v6.1h-6.1v-6.1zm9.1 9.2v6.1h-6.1v-6.1h6.1zm-18.3-9.2h6.1v6.1h-6.1v-6.1zm9.2 9.2v6.1h-6.1v-6.1h6.1zm-18.3-9.2h6.1v6.1h-6.1v-6.1zm9.1 9.2v6.1h-6.1v-6.1h6.1zm-27.4-9.2h6.1v6.1H102v-6.1zm6.1 24.4H102v-6.1h6.1v6.1zm3-9.1H105v-6.1h6.1v6.1zm0-15.3h6.1v6.1h-6.1v-6.1zm9.2 9.2v6.1h-6.1v-6.1h6.1zm34.3 13.8h-42.1v-3.2h42.1v3.2zm8.4 1.4h-6.1v-6.1h6.1v6.1zm0-18.3h-6.1v-6.1h6.1v6.1z"/>
<path fill="#152C34" d="M130.6 138.8c-.2-.3-4.5-7-2-12.8 1.5-3.5 5.1-5.9 10.6-7 4.2-.8 7.1-2.7 8.7-5.5 3-5.4.3-12.8.3-12.9l3-1.1c.1.4 3.2 8.9-.5 15.6-2.1 3.7-5.8 6.1-10.9 7.1-4.4.9-7.2 2.5-8.2 5-1.8 4.2 1.7 9.7 1.7 9.7l-2.7 1.9z"/>
<path id="bulb" fill="#FABD3B" d="M30.5 24.5V51h-5.9c.2-4.2-.4-5.8-2.3-11.5S20.8 33 20.8 33l9.7-8.5zm8.3 8.5s.3.7-1.5 6.5c-1.9 5.7-2.5 7.3-2.3 11.5h-6V24.5l9.8 8.5zm0-.7c0 5-4.1 9.1-9.1 9.1s-9.1-4.1-9.1-9.1 4.1-9.1 9.1-9.1 9.1 4.1 9.1 9.1z"/>
<path fill="#390E0E" d="M34.8 49.4c0 .3.3 3.7.3 5.2-.1 1.3-1.5 2.8-2.6 3.5v.6s-1.4.1-2.8 0c-1.4.1-2.8 0-2.8 0v-.6c-1.1-.7-2.5-2.2-2.6-3.5-.1-1.4.2-4.9.3-5.2h10.2z"/>
<path fill="#390E0E" d="M34.1 34.7c-.1-.1-.3-.2-.4-.2-.2 0-.3.1-.4.1-.3.3-.4.8-.5 1.6h-.5c-.5 0-.9-.1-1.3-.4.2-.3.2-.6.2-.8 0-.2 0-.4-.3-.5-.1-.1-.2-.1-.4-.1-.1 0-.3 0-.4.1 0 .1-.1.3-.1.5 0 .3.2.5.5.9-.2.2-.5.4-.9.4s-.7-.2-.9-.4c.3-.4.5-.6.5-.9 0-.2-.1-.3-.2-.4-.1-.1-.3-.1-.4-.1-.1 0-.3 0-.4.1-.2.1-.3.3-.3.5s.1.5.2.8c-.4.3-.8.4-1.3.4h-.5c-.1-.8-.2-1.4-.5-1.6 0 0-.2-.1-.4-.1-.1 0-.3 0-.4.2-.1.1-.2.3-.2.6v.1c.1.6.5.9 1.1 1.1.3 2.6.4 7.5.4 10.6v2.6h.4v-2.6c0-2.1 0-5-.1-7.5-.1-1.1-.1-2.1-.2-2.9h.4c.5 0 1.1-.1 1.5-.5.3.3.7.5 1.2.5h.1c.5 0 .8-.2 1.1-.5.5.4 1 .5 1.5.5h.4c-.1.8-.2 1.8-.2 2.9-.1 2.5-.1 5.5-.1 7.5v2.6h.4v-2.6c0-3 .1-8 .4-10.6.6-.2 1.1-.6 1.1-1.1v-.1c.1-.4 0-.6-.1-.7zm-8.8.7v-.1c0-.4.1-.4.2-.4h.2s.2.5.3 1.2c-.4-.2-.7-.4-.7-.7zm3-.4v-.1h.2c.2 0 .2.1.2.1 0 .1-.1.3-.3.6 0-.2-.1-.4-.1-.6zm2.4.6c-.3-.3-.3-.5-.3-.6 0-.1.1-.1.2-.1h.2v.1c.1.2 0 .4-.1.6zm3.2-.2c0 .3-.3.6-.7.7.1-.7.3-1.2.3-1.2h.2c.1 0 .2 0 .2.4v.1z"/>
<path fill="#FFFAF0" d="M153.6 15c0 1.6-1.3 2.9-2.9 2.9h-55c-1.6 0-2.9-1.3-2.9-2.9 0-1.6 1.3-2.9 2.9-2.9h55.1c1.5 0 2.8 1.3 2.8 2.9zm41.9 0c0 1.6-1.3 2.9-2.9 2.9h-26c-1.6 0-2.9-1.3-2.9-2.9 0-1.6 1.3-2.9 2.9-2.9h26c1.6 0 2.9 1.3 2.9 2.9z"/>
<path fill="#3E442B" d="M76.7 31.1v-2.5h118.9v2.5H76.7"/>
<path id="lbasic" fill="#32A3D8" d="M76.8 37.3H102v33H76.8z"/>
<path fill="#3E442B" d="M76.8 73.4h25.3v3H76.8zm0 5.3h25.3v3H76.8zm0 6.3h25.3v3H76.8zm28.1-47.5h27.7v3h-27.7zm0 5.3h27.7v3h-27.7zm0 6.3h27.7v3h-27.7zm0 5.6h27.7v3h-27.7zm0 5.3h27.7v3h-27.7zm0 6.3h27.7v3h-27.7zm0 7h27.7v3h-27.7zm0 5.3h27.7v3h-27.7zm0 6.3h27.7v3h-27.7zm34.9-11.5h25.3v3h-25.3zm0 5.3h25.3v3h-25.3zm0 6.3h25.3v3h-25.3zm28-47.5h27.7v3h-27.7zm0 5.3h27.7v3h-27.7zm0 6.3h27.7v3h-27.7zm0 5.6h27.7v3h-27.7zm0 5.3h27.7v3h-27.7zm0 6.3h27.7v3h-27.7zm0 7h27.7v3h-27.7zm0 5.3h27.7v3h-27.7zm0 6.3h27.7v3h-27.7z"/>
<circle fill="#32A3D8" cx="78.7" cy="15.3" r="2.6"/>
<circle fill="#32A3D8" cx="159.1" cy="15.3" r="2.6"/>
<circle fill="#32A3D8" cx="86.5" cy="15.3" r="2.6"/>
<path fill="none" stroke="#DADAD7" d="M103.3 35.8L76 71.3m26.6-.5L75.1 36"/>
<path id="rbasic" fill="#32A3D8" d="M140.1 37.3h25.2v33h-25.2z"/>
<path fill="none" stroke="#DADAD7" d="M166.5 35.8l-27.3 35.5m26.7-.5L138.4 36"/>
<path fill="#FFF" d="M62.8 119.1c0 6.9-5.5 12.4-12.3 12.4H12.3C5.5 131.5 0 126 0 119.1c0-6.2 4.5-11.3 10.4-12.3-.1-.4-.1-.9-.1-1.3 0-4.3 3.5-7.9 7.8-7.9 1.9 0 3.7.7 5.1 1.9C25.6 94 28.7 89 37.4 89 48 89 53 97.2 53 105.9v1.1c5.6 1.1 9.8 6.1 9.8 12.1z"/>
<path id="gear-4" fill="#32A3D8" d="M44.5,116.2h-0.9c-0.2,0-0.5-0.2-0.6-0.5c-0.1-0.2-0.2-0.5-0.3-0.7c-0.1-0.2-0.1-0.6,0.1-0.8l0.6-0.6
c0.4-0.4,0.4-1.2,0-1.6l-1-1c-0.2-0.2-0.5-0.3-0.8-0.3c-0.3,0-0.6,0.1-0.8,0.3l-0.6,0.6c-0.1,0.1-0.3,0.2-0.5,0.2
c-0.1,0-0.2,0-0.3-0.1c-0.2-0.1-0.5-0.2-0.7-0.3c-0.3-0.1-0.5-0.4-0.5-0.6v-0.9c0-0.6-0.5-1.1-1.1-1.1h-1.5
c-0.6,0-1.1,0.5-1.1,1.1v0.9c0,0.2-0.2,0.5-0.5,0.6c-0.2,0.1-0.5,0.2-0.7,0.3c-0.1,0-0.2,0.1-0.3,0.1c-0.2,0-0.4-0.1-0.5-0.2
l-0.6-0.6c-0.2-0.2-0.5-0.3-0.8-0.3c-0.3,0-0.6,0.1-0.8,0.3l-1,1c-0.2,0.2-0.3,0.5-0.3,0.8c0,0.3,0.1,0.6,0.3,0.8l0.6,0.6
c0.2,0.2,0.2,0.5,0.1,0.8c-0.1,0.2-0.2,0.5-0.3,0.7c-0.1,0.3-0.4,0.5-0.6,0.5h-0.9c-0.6,0-1.1,0.5-1.1,1.1v1.5
c0,0.6,0.5,1.1,1.1,1.1H29c0.2,0,0.5,0.2,0.6,0.5c0.1,0.2,0.2,0.5,0.3,0.7c0.1,0.3,0.1,0.6-0.1,0.8l-0.6,0.6
c-0.4,0.4-0.4,1.2,0,1.6l1,1c0.2,0.2,0.5,0.3,0.8,0.3c0.3,0,0.6-0.1,0.8-0.3l0.6-0.6c0.1-0.1,0.3-0.2,0.5-0.2c0.1,0,0.2,0,0.3,0.1
c0.2,0.1,0.5,0.2,0.7,0.3c0.3,0.1,0.5,0.4,0.5,0.6v0.9c0,0.6,0.5,1.1,1.1,1.1H37c0.6,0,1.1-0.5,1.1-1.1v-0.9
c0-0.2,0.2-0.5,0.5-0.6c0.2-0.1,0.5-0.2,0.7-0.3c0.1,0,0.2-0.1,0.3-0.1c0.2,0,0.4,0.1,0.5,0.2l0.6,0.6c0.2,0.2,0.5,0.3,0.8,0.3
c0.3,0,0.6-0.1,0.8-0.3l1-1c0.4-0.4,0.4-1.2,0-1.6l-0.6-0.6c-0.2-0.2-0.2-0.5-0.1-0.8c0.1-0.2,0.2-0.5,0.3-0.7 c0.1-0.3,0.4-0.5,0.6-0.5h0.9c0.6,0,1.1-0.5,1.1-1.1v-1.5C45.7,116.7,45.2,116.2,44.5,116.2z M39.7,118.1c0,1.9-1.5,3.4-3.4,3.4 c-1.9,0-3.4-1.5-3.4-3.4c0-1.9,1.5-3.4,3.4-3.4C38.2,114.7,39.7,116.2,39.7,118.1z"/>
<path id="gear-3" fill="#32A3D8" d="M29.4,108.8c0-0.1,0.1-0.1,0.1-0.1h0.4c0.4,0,0.8-0.3,0.8-0.8v-0.7c0-0.4-0.3-0.8-0.8-0.8h-0.4
c0,0-0.1-0.1-0.1-0.1c0-0.1-0.1-0.3-0.2-0.4c0-0.1,0-0.1,0-0.2l0.3-0.3c0.3-0.3,0.3-0.8,0-1.1l-0.5-0.5c-0.1-0.1-0.3-0.2-0.5-0.2
c-0.2,0-0.4,0.1-0.5,0.2l-0.3,0.3c0,0,0,0-0.1,0c0,0-0.1,0-0.1,0c-0.1-0.1-0.2-0.1-0.4-0.2c-0.1,0-0.1-0.1-0.1-0.1v-0.4
c0-0.4-0.3-0.8-0.8-0.8h-0.7c-0.4,0-0.8,0.3-0.8,0.8v0.4c0,0-0.1,0.1-0.1,0.1c-0.1,0-0.3,0.1-0.4,0.2c0,0,0,0-0.1,0
c0,0-0.1,0-0.1,0l-0.3-0.3c-0.1-0.1-0.3-0.2-0.5-0.2s-0.4,0.1-0.5,0.2l-0.5,0.5c-0.3,0.3-0.3,0.8,0,1.1l0.3,0.3c0,0,0,0.1,0,0.2
c-0.1,0.1-0.1,0.2-0.2,0.4c0,0.1-0.1,0.1-0.1,0.1h-0.4c-0.4,0-0.8,0.3-0.8,0.8v0.7c0,0.4,0.3,0.8,0.8,0.8h0.4c0,0,0.1,0.1,0.1,0.1
c0,0.1,0.1,0.3,0.2,0.4c0,0.1,0,0.1,0,0.2l-0.3,0.3c-0.1,0.1-0.2,0.3-0.2,0.5c0,0.2,0.1,0.4,0.2,0.5l0.5,0.5
c0.1,0.1,0.3,0.2,0.5,0.2s0.4-0.1,0.5-0.2L24,111c0,0,0,0,0.1,0c0,0,0.1,0,0.1,0c0.1,0.1,0.3,0.1,0.4,0.2c0.1,0,0.1,0.1,0.1,0.1
v0.4c0,0.4,0.3,0.8,0.8,0.8h0.7c0.4,0,0.8-0.3,0.8-0.8v-0.4c0,0,0.1-0.1,0.1-0.1c0.1,0,0.3-0.1,0.4-0.2c0,0,0,0,0.1,0
c0,0,0.1,0,0.1,0l0.3,0.3c0.1,0.1,0.3,0.2,0.5,0.2c0.2,0,0.4-0.1,0.5-0.2l0.5-0.5c0.3-0.3,0.3-0.8,0-1.1l-0.3-0.3c0,0,0-0.1,0-0.2
C29.3,109.1,29.3,109,29.4,108.8z M27.3,107.6c0,0.8-0.7,1.5-1.5,1.5c-0.8,0-1.5-0.7-1.5-1.5c0-0.8,0.7-1.5,1.5-1.5
C26.7,106.1,27.3,106.8,27.3,107.6z"/>
</svg>
</div>