0
したがって、document.getElementsByClassNameはIE 9まで互換性があります。 （canIuse.com）。では、私のJSコードがIE 11で動作しないのはなぜですか？ Google Chromeで動作します。私はすべてを試みた。 querySelectorAllは私にとってもうまくいきませんでした。このJSコードはIE 11でSVGのアニメーション化に使用できないのはなぜですか？
以下のコードを参照し、IEで動作しますあなたのコードのソリューションを投稿：..........................
/*querySelectorAll won't even work on these two icons with the same classes selected. Neither will animated when I used the more appropriate querySelectorAll because the console says there is something wrong with the .addEventListener function.*/
var animationRunning = false;
var allIcons = document.getElementsByClassName("svgicons");
var dottedLine = document.getElementsByClassName("dotted-line");
var ellipseCircumference = 336;
var dashOffset = 0;
var dashOffsetDelta = 0.5;
for(var i = 0; i < allIcons.length; i++){
\t (function(index){
allIcons[i].onmouseenter = function(){
animationRunning = true;
requestAnimationFrame(function anim(){
dashOffset = (dashOffset + dashOffsetDelta) % ellipseCircumference;
dottedLine[index].style.strokeDashoffset = dashOffset;
if(animationRunning){
requestAnimationFrame(anim);
}
});
}
allIcons[i].onmouseleave = function(){
animationRunning = false;
}
})(i);
}
svg {
width: 30%;
display: inline;
margin: 0 auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg class="svgicons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108.6182 107.5305">
<title>panda-rotate</title>
<g id="panda">
<path d="M33.83,73.7l5.46-11.0852L53.0219,50.5369l17.8688-1.9853,14.394,6.4525,1.489-1.1582,4.7981-1.1582,3.3091,2.1509L98.19,52.1916l5.2943-.3308,4.3016,2.978L107.62,59.306s7.7761,6.9488,7.7761,7.1142,2.6474,5.7908,2.6474,5.7908l.6617,4.3016L124,79.16l-4.9635,9.7613-8.2723,3.971-10.2581.8271,2.1509,2.9783L94.7155,98.683,81.4794,95.87,62.6181,98.5175l-4.1362.3308S41.4405,96.0358,41.4405,95.87s-8.1072-9.7616-8.1072-10.0924S33.83,74.1965,33.83,73.7Z" transform="translate(-20.6909 -21.2348)" style="fill: none;stroke: #000"/>
<path d="M34.6879,73.6446l9.8782-4.0771,4.6025,1.1981,2.9181,8.5791a19.851,19.851,0,0,1-.311,3.101c-.1644.0045-4.1244,5.5747-4.1244,5.5747L58.6493,98.4777l5.1005-.8018,3.3061-7.3731,1.6624-8.3209-1.6376-3.431s-5.7551-.8356-5.9191-.9966a70.2706,70.2706,0,0,0-7.92,3.7625" transform="translate(-20.6909 -21.2348)" style="fill: none;stroke: #000"/>
<path d="M58.5861,98.6832S56.9139,91.9725,56.9139,91.8,59.65,85.09,59.8026,85.09s5.1289-3.2827,5.1289-3.2827l3.233,2.9385L67.1,91.6283l-3.1928,6.8828Z" transform="translate(-20.6909 -21.2348)" style="stroke: #000"/>
<path d="M33.9952,73.7l10.2578-4.1362,5.6254,1.3236,6.9488,8.6034L52.36,82.6343l-4.1364,5.1292S59.64,98.3521,59.64,98.5175s-.9925.3308-.9925.3308L41.4405,95.705l-8.1072-9.5962Z" transform="translate(-20.6909 -21.2348)" style="stroke: #000"/>
<path d="M37.47,66.0893a25.1522,25.1522,0,0,1-2.1509-1.9206,15.6168,15.6168,0,0,0,.6617-2.6588l3.971-3.693,2.6472,2.068s-2.6472,2.659-2.8128,2.659S37.8006,65.6462,37.47,66.0893Z" transform="translate(-20.6909 -21.2348)" style="stroke: #000"/>
<path d="M44.0877,58.3811l.3185,11.3573,5.3988,2.638,3.217-21.84-8.297,19.5565" transform="translate(-20.6909 -21.2348)" style="fill: none;stroke: #000"/>
<path d="M70.8645,48.7171s-20.9863,22.17-20.9863,22.3358,21.84,5.7908,21.84,5.7908Z" transform="translate(-20.6909 -21.2348)" style="fill: none;stroke: #000"/>
<path d="M84.7885,54.7323Z" transform="translate(-20.6909 -21.2348)" style="fill: none;stroke: #000"/>
<path d="M85.45,55.17l1.6547-1.3236,4.6324-1.1582,3.3091,1.9855-2.4818,3.8053L87.27,60.4642l-2.6472-1.82Z" transform="translate(-20.6909 -21.2348)" style="stroke: #000"/>
<path d="M95.2117,54.5079s2.8126-2.3163,2.9783-2.3163,4.9635-.3308,4.9635-.3308l4.7978,3.1434-.3308,4.6327Z" transform="translate(-20.6909 -21.2348)" style="stroke: #000"/>
<path d="M86.4429,66.9757" transform="translate(-20.6909 -21.2348)" style="fill: none;stroke: #000"/>
<path d="M70.8907,48.7171l.6617,27.63,1.489,13.2361L81.6448,95.87l13.4015,2.978s7.7761-1.82,7.7761-2.1507a23.3375,23.3375,0,0,0-2.3163-2.9783s-6.7833-9.5959-6.9488-9.5959-9.2653-5.1292-9.2653-5.1292Z" transform="translate(-20.6909 -21.2348)" style="stroke: #000"/>
<path d="M83.9611,51.0924" transform="translate(-20.6909 -21.2348)" style="fill: none;stroke: #000"/>
<path d="M85.2847,55.0042,80.652,72.5419" transform="translate(-20.6909 -21.2348)" style="fill: none;stroke: #000"/>
<path d="M107.7859,59.4714,93.5573,84.2889" transform="translate(-20.6909 -21.2348)" style="fill: none;stroke: #000"/>
<path d="M93.7227,84.2889l8.2726-8.1072,9.5959-3.3088,3.64-6.6182" transform="translate(-20.6909 -21.2348)" style="fill: none;stroke: #000"/>
<path d="M102.1607,75.8509l9.4305-3.1437,3.1437,6.4528-2.6472,4.1362L105.47,85.778s-3.64-3.3091-3.64-3.8053S102.3261,75.6855,102.1607,75.8509Z" transform="translate(-20.6909 -21.2348)" style="stroke: #000"/>
<path d="M111.5912,72.8729l6.4528-.4965" transform="translate(-20.6909 -21.2348)" style="fill: none;stroke: #000"/>
<path d="M124,79.3254l-2.978.9927,1.3236,1.6544Z" transform="translate(-20.6909 -21.2348)" style="stroke: #000"/>
</g>
<g transform="translate(54.3091,53.7653)">
<ellipse class="dotted-line" rx="53.8091" ry="53.2652" style="fill: none;stroke: #2717ff;stroke-dasharray: 4.018310070037842,4.018310070037842"/>
</g>
</svg>
<!---Second SVG-->
\t <svg class="svgicons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108.6182 107.5305">
\t
\t <path id="provider-wholeicon" d="M107.0568,55.6591h-3.58V52.08a1.1926,1.1926,0,0,0-1.1932-1.1932H69.6126l-.8635-1.7269A1.193,1.193,0,0,0,67.6818,48.5H49.7841a1.1929,1.1929,0,0,0-1.1932,1.1932v1.1932H42.625A1.1929,1.1929,0,0,0,41.4318,52.08V96.2273A4.7778,4.7778,0,0,0,46.2045,101h57.2727a4.7774,4.7774,0,0,0,4.7727-4.7727V56.8523A1.1926,1.1926,0,0,0,107.0568,55.6591ZM48.5909,96.2273a2.3864,2.3864,0,0,1-4.7727,0V53.2715h4.7727Zm52.5-42.9557v2.3876H71.999l-1.1932-2.3876Zm4.7727,42.9557a2.39,2.39,0,0,1-2.3864,2.3864H50.337a4.7459,4.7459,0,0,0,.64-2.3864V50.8852H66.9442l3.25,6.5008a1.19,1.19,0,0,0,1.0673.6583h34.6023Z" transform="translate(-20.6909 -21.2348)" style="fill: #0088ce;stroke: #fff;stroke-miterlimit: 10;stroke-width: 0.5px"/>
\t <ellipse class="dotted-line" cx="54.3091" cy="53.7653" rx="53.8091" ry="53.2652" style="fill: none;stroke: #0088ce;stroke-dasharray: 4.018310070037842,4.018310070037842"/>
\t </svg>
\t
'getElementsByClassName'があなたの問題の原因ではありません - いくつかのデバッグにconsole.log年代を試してみてください - ヒント：あなたは 'onmouseover'と' onmouseout'を必要としますが、なぜ私はわかりません –