我用svg图形在Js / jQuery中构建了一个simon游戏。它在Firefox中正常工作，但在其他浏览器中似乎都被打破了。似乎问题出在foreignObject svg元素中。西蒙游戏位于codepen.io：
http://codepen.io/gavlooth/pen/PzKYdv
有没有人知道出了什么问题？
这是代码
<div id="canvas">
<div id="circle">
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns: rdf="http://www.w3.org/1999/02/22- rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="300"
height="300"
viewbox ="0 0 1062.9921 1062.9921"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="simon2 svg.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2.8"
inkscape:cx="196.48829"
inkscape:cy="174.88852"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1536"
inkscape:window-height="801"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
< rdf: rdf>
<cc:work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:work>
</ rdf: rdf>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,10.629921)">
<ellipse
style="fill:#2f9d84;fill-opacity:0.82882882"
id="path4149"
cx="537.88177"
cy="499.36212"
rx="504.27341"
ry="474.14215"
transform="matrix(0.99999945,-0.00104714,0.00106105,0.99999944,0,0)" />
<foreignObject x="300" y="300" width="500" height="400" requiredExtensions="http://www.w3.org/1999/xhtml">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>
<div id = "Fcontainer">
<div id = "item1"> Simon <span class="sup">®</span> </div>
<div id = "item2">
<div id="counter">
<div id="dis">
--
</div>
</div>
<div id = "start">
<div class='btn-circle red' style="margin-top:25%">
</div>
</div>
<div id= "strict">
<div id='indicator-light'>
</div>
<div id ="skata" class='btn-circle orange'>
</div>
</div>
</div>
<div id = "item3">
<div style="margin-left:12%;">
<div>
COUNT
</div>
<div>
START
</div>
<div>
STRICT
</div>
</div>
<div id="svg-button" style="height:70%;">
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns: rdf="http://www.w3.org/1999/02/22- rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="100%"
height="100%"
viewbox ="0 0 44.122022 44.122029"
id="svg4246"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="button1.svg">
<defs
id="defs4248">
<linearGradient
gradientTransform="matrix(0.70155592,0,0,0.73625312,527.90634,341.60443)"
inkscape:collect="always"
xlink:href="#linearGradient3257"
id="linearGradient2714"
gradientUnits="userSpaceOnUse"
x1="127.19796"
y1="18.49473"
x2="127.19796"
y2="47.546875" />
<linearGradient
id="linearGradient3257"
inkscape:collect="always">
<stop
id="stop3259"
offset="0"
style="stop-color:#ffffff;stop-opacity:1" />
<stop
id="stop3261"
offset="1"
style="stop-color:#ffffff;stop-opacity:0" />
</linearGradient>
<linearGradient
gradientTransform="matrix(0.7015559,0,0,0.7362531,405.0492,347.31872)"
inkscape:collect="always"
xlink:href="#linearGradient3257"
id="linearGradient2716"
gradientUnits="userSpaceOnUse"
x1="127.19796"
y1="18.49473"
x2="127.19796"
y2="47.546875" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="11.2"
inkscape:cx="30.895793"
inkscape:cy="15.757932"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1536"
inkscape:window-height="801"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata4251">
< rdf: rdf>
<cc:work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:work>
</ rdf: rdf>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-595.08187,-353.15835)">
<ellipse class="identifier"
ry="22.061014"
rx="22.06101"
cy="375.21936"
cx="617.14288"
id="path3676"
style="fill:#ef2929;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:4;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<ellipse class="identifier"
ry="11.988996"
rx="15.734934"
cy="367.21024"
cx="617.14282"
style="opacity:0.75;fill:url(#linearGradient2714);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path3678" />
<g
style="fill:#a40000;stroke:none"
transform="matrix(0.58240892,0,0,0.62445042,258.47069,-114.72848)"
id="g3750">
<path
transform="matrix(0.935483,0,0,0.935483,3.100892,-64.47165)"
d="m 649.08789,892.00586 c -7.61805,2.49027 -13.14452,9.59996 -13.14453,18.05664 2e-5,10.525 8.53164,19.05663 19.05664,19.05664 10.525,-3e-5 19.05663,-8.53164 19.05664,-19.05664 -2e-5,-8.45901 -5.5512,-15.56911 -13.17578,-18.05664 l 0,6.80273 c 4.06873,2.13526 6.90625,6.34341 6.90625,11.25391 10e-6,7.04627 -5.74083,12.78711 -12.78711,12.78711 -7.04628,10e-6 -12.78711,-5.74083 -12.78711,-12.78711 -2e-5,-4.90752 2.80743,-9.1179 6.875,-11.25391 l 0,-6.80273 z"
inkscape:href="#path22091"
id="path3752"
style="fill:#a40000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
xlink:href="#path22091"
inkscape:original="M 649.75 891.0625 C 641.40779 893.35756 635.28126 900.99292 635.28125 910.0625 C 635.28127 920.94545 644.11705 929.78124 655 929.78125 C 665.88295 929.78122 674.71874 920.94545 674.71875 910.0625 C 674.71873 900.98968 668.56549 893.35456 660.21875 891.0625 L 660.21875 899.15625 C 664.28467 901.11041 667.125 905.25095 667.125 910.0625 C 667.12501 916.75034 661.68785 922.1875 655 922.1875 C 648.31215 922.18751 642.875 916.75035 642.875 910.0625 C 642.87498 905.25102 645.6842 901.11044 649.75 899.15625 L 649.75 891.0625 z "
inkscape:radius="-0.66131908"
sodipodi:type="inkscape:offset" />
<path
transform="matrix(0.935483,0,0,0.935483,3.100892,-64.47165)"
d="m 651.78906,887.91406 0,22.60938 6.42188,0 0,-22.60938 -6.42188,0 z"
inkscape:href="#path22093"
id="path3754"
style="fill:#a40000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
xlink:href="#path22093"
inkscape:original="M 651.1875 887.3125 L 651.1875 911.125 L 658.8125 911.125 L 658.8125 887.3125 L 651.1875 887.3125 z "
inkscape:radius="-0.60243881"
sodipodi:type="inkscape:offset" />
</g>
<g
id="g3756"
transform="matrix(0.58240892,0,0,0.58240892,258.47069,-82.518459)"
style="fill:#eeeeec;stroke:none">
<path class="identifier"
sodipodi:type="inkscape:offset"
inkscape:radius="-0.66131908"
inkscape:original="M 649.75 891.0625 C 641.40779 893.35756 635.28126 900.99292 635.28125 910.0625 C 635.28127 920.94545 644.11705 929.78124 655 929.78125 C 665.88295 929.78122 674.71874 920.94545 674.71875 910.0625 C 674.71873 900.98968 668.56549 893.35456 660.21875 891.0625 L 660.21875 899.15625 C 664.28467 901.11041 667.125 905.25095 667.125 910.0625 C 667.12501 916.75034 661.68785 922.1875 655 922.1875 C 648.31215 922.18751 642.875 916.75035 642.875 910.0625 C 642.87498 905.25102 645.6842 901.11044 649.75 899.15625 L 649.75 891.0625 z "
xlink:href="#path22091"
style="fill:#eeeeec;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path3758"
inkscape:href="#path22091"
d="m 649.08789,892.00586 c -7.61805,2.49027 -13.14452,9.59996 -13.14453,18.05664 2e-5,10.525 8.53164,19.05663 19.05664,19.05664 10.525,-3e-5 19.05663,-8.53164 19.05664,-19.05664 -2e-5,-8.45901 -5.5512,-15.56911 -13.17578,-18.05664 l 0,6.80273 c 4.06873,2.13526 6.90625,6.34341 6.90625,11.25391 10e-6,7.04627 -5.74083,12.78711 -12.78711,12.78711 -7.04628,10e-6 -12.78711,-5.74083 -12.78711,-12.78711 -2e-5,-4.90752 2.80743,-9.1179 6.875,-11.25391 l 0,-6.80273 z"
transform="matrix(0.935483,0,0,0.935483,3.100892,-64.47165)" />
<path class="identifier"
sodipodi:type="inkscape:offset"
inkscape:radius="-0.60243881"
inkscape:original="M 651.1875 887.3125 L 651.1875 911.125 L 658.8125 911.125 L 658.8125 887.3125 L 651.1875 887.3125 z "
xlink:href="#path22093"
style="fill:#eeeeec;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path3760"
inkscape:href="#path22093"
d="m 651.78906,887.91406 0,22.60938 6.42188,0 0,-22.60938 -6.42188,0 z"
transform="matrix(0.935483,0,0,0.935483,3.100892,-64.47165)" />
</g>
</g>
</svg>
</div>
<div style="height:10%; display:flex;align-items:center;justify-content: space-between;">
<h1 id="onoff" style ="width:100%;margin-bottom:1%;">OFF</h1>
</div>
</div>
</div>
</div>
</body>
</foreignObject>
<path
style="fill:rgb(155,0,2);fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.25401148px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 254.74219 151.22852 A 90.20688 102.17109 86.965732 0 1 161.13867 232.70508 L 161.2832 276.62891 A 132.65856 125.40141 0 0 0 293.52539 151.22852 L 254.74219 151.22852 z "
transform="matrix(3.5433068,0,0,3.5433068,0,-10.629921)"
id="path3342" />
<path
style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:0.90004063px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
id="path_3342-2"
ry="444.33566"
rx="470.04999"
cy="516.64783"
cx="538.57147"
d=""
inkscape:connector-curvature="0" />
<path
style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:0.90004063px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
id="path_3342-3"
ry="444.33566"
rx="470.04999"
cy="516.64783"
cx="538.57147"
d=""
inkscape:connector-curvature="0" />
<path
style="fill:rgb(0,173,173);fill-rule:evenodd;stroke:#000000;stroke-width:0.23711532px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 51.255859 152.16797 L 10.865234 152.40625 A 132.67548 125.41836 0 0 0 143.81641 277.04102 L 143.7168 232.44531 A 90.20688 102.17109 86.965732 0 1 51.255859 152.16797 z "
transform="matrix(3.5433068,0,0,3.5433068,0,-10.629921)"
id="path3342-8" />
<path
style="fill:rgb(173,158,0);fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.25482526px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 162.19531 10.912109 L 161.88867 52.886719 A 90.20688 102.17109 86.965732 0 1 255.52539 137.11719 L 293.92773 137.11719 A 132.65774 126.20696 0 0 0 162.19531 10.912109 z "
transform="matrix(3.5433068,0,0,3.5433068,0,-10.629921)"
id="path3342-9" />
<path
style="fill:rgb(54,100,0);fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.25401148px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 141.89453 10.105469 A 132.65856 125.40141 0 0 0 10.066406 135.21094 L 51.109375 135.30273 A 90.20688 102.17108 86.96573 0 1 142.18945 54.666016 L 141.89453 10.105469 z "
transform="matrix(3.5433068,0,0,3.5433068,0,-10.629921)"
id="path3342-27" />
<ellipse
ry="319.72186"
rx="361.94296"
cy="504.01788"
cx="541.88934"
id="ellipse4202"
style="fill:#cac8e9;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.69846582px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
transform="matrix(0.99991186,-0.01327684,0.00207067,0.99999786,0,0)" />
</g>
</svg>
</div>
</div>