有没有办法使用jQuery动画单独的svg元素在IE中工作？

时间：2017-08-09 14:07:17

标签： internet-explorer animation svg

我最近了解到，基于另一个堆栈溢出响应，Internet Explorer将不显示各个单独SVG部件的CSS3动画。如果我要选择一般的svg标签，那么它将在IE中工作，但不适用于单独的部分。

要在Internet Explorer中显示，我似乎仅为此SVG的虚线边框设置动画，但保持中心的图标固定而不是动画。

有没有办法让悬停目标区域成为整个SVG来启动边框的旋转动画但是在svg的中心禁用动画？或者我是否需要以某种方式对svg进行分层？

我正在尝试在jQuery中使用条件语句，希望能够让动画在IE中运行。 

/*Pseudo-code for jQuery solution. */

$('svg').mouseover(function() {
            if (!$(this).hasClass('dotted-line')) { //If it does not have the class .dotted-line
                $('g').rotate({ animateTo: false}); //Then disable animation
            } else if ($(this).hasClass('dotted-line')) { //If it does have .dotted-line class
                $('.dotted-line').animate({ rotate: '180deg' }, 1000); //then Rotate it
            }
        }); */
/* This does not work in IE. What is the jQuery way to do this animation to work in IE */

svg {
	  width: 40%;
	  display: block;
	  margin: 0 auto;
}

ellipse {
  pointer-events: all;
}
	   ellipse:hover {
        width: 40%;
	  display: block;
	  margin: 0 auto;
	           -webkit-animation-name: rotate;
	           -webkit-animation-duration: 2s;
	           -webkit-animation-iteration-count: 1;
	           -webkit-animation-timing-function: linear;
	           -moz-animation-name: rotate;
	           -moz-animation-duration: 2s;
	           -moz-animation-iteration-count: 1;
	           -moz-animation-timing-function: linear;
	           animation-name: rotate;
	           animation-duration: 2s;
	           animation-iteration-count: 1;
	           animation-timing-function: linear;
	       }

	       @-webkit-keyframes rotate {
	           from {-webkit-transform: rotate(0deg);}
	           to {-webkit-transform: rotate(360deg);}
	       }

	       @-moz-keyframes rotate {
	           from {-moz-transform: rotate(0deg);}
	           to {-moz-transform: rotate(360deg);}
	       }

	       @keyframes rotate {
	           from {transform: rotate(0deg);}
	           to {transform: rotate(360deg);}
	       }

}
<svg id="panda-circ" 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 id="dotted-line" rx="53.8091" ry="53.2652" style="fill: none;stroke: #2717ff;stroke-dasharray: 4.018310070037842,4.018310070037842"/>
</g>
</svg>

如果我不能这样做，我正在考虑使用GSAP。

1 个答案:

答案 0 :(得分：1)

AFAIK使用jQuery在悬停时持续运行动画并不是那么简单。它的animate()函数用于设置从a到b的CSS值，如果你想在悬停时停止并重新启动它，并让它以相同的速度再次恢复，它会很快变得复杂。 / p>

IMO，在普通的Javascript中实现它要简单得多。

＆＃13;
＆＃13; 
var animationRunning = false;
var pandaCirc = document.getElementById("panda-circ");
var dottedLine = document.getElementById("dotted-line");
var ellipseCircumference = 336;
var dashOffset = 0;
var dashOffsetDelta = 0.5;

pandaCirc.addEventListener("mouseenter", function() {
  animationRunning = true;
  requestAnimationFrame(animLoop);
});


pandaCirc.addEventListener("mouseleave", function() {
  animationRunning = false;
});


function animLoop(time) {
  dashOffset = (dashOffset + dashOffsetDelta) % ellipseCircumference;
  dottedLine.style.strokeDashoffset = dashOffset;

  if (animationRunning)
    requestAnimationFrame(animLoop);
}
＆＃13; 
svg {
	  width: 40%;
	  display: block;
	  margin: 0 auto;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="panda-circ" 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 id="dotted-line" rx="53.8091" ry="53.2652" style="fill: none;stroke: #2717ff;stroke-dasharray: 4.018310070037842,4.018310070037842"/>
</g>
</svg>
＆＃13;
＆＃13;
＆＃13;

更新：处理多个动画图标

之前的解决方案是一个只支持一个图标的简化版本。

如果你需要动画几个图标，那么使用全局变量进行偏移是一个坏主意。

相反，我们应该只跟踪哪个图标是动画的，并直接从该元素的状态读取短划线偏移量。

＆＃13;
＆＃13; 
var currentDottedLineBeingAnimated = null;
var currentAnimationFrameRequest = 0;
var dashOffsetDelta = 0.5;

// Need to use querySelectAll() to get ll the matching elements
var allIcons = document.querySelectorAll(".svgicons");
// Loop through all the matches and add mouse enter and leave event handlers
allIcons.forEach(function (icon) {

  icon.addEventListener("mouseenter", function (evt) {
    // Cancel any pending requestAnimationFrame() requests
    cancelAnimationFrame(currentAnimationFrameRequest);
    // New dotted line to be animated
    currentDottedLineBeingAnimated = evt.target.querySelector(".dotted-line");
    // Start the animation running by requesting an animation callback
    currentAnimationFrameRequest = requestAnimationFrame(animLoop);
  });

  icon.addEventListener("mouseleave", function () {
    // Stop animation by clearing the current amnimation element
    currentDottedLineBeingAnimated = null;
  });
  
});


function animLoop(time) {
  // If nothing is being animated, don't do anything this animation step
  if (!currentDottedLineBeingAnimated)
    return;
  // Read the element's dash offset and increment it by a little
  var dashOffset = Number(currentDottedLineBeingAnimated.style.strokeDashoffset) + dashOffsetDelta;
  currentDottedLineBeingAnimated.style.strokeDashoffset = dashOffset;
  // Request another animation callback
  currentAnimationFrameRequest = requestAnimationFrame(animLoop);
}
＆＃13; 
svg {
  width: 30%;
  display: inline;
  margin: 0 auto;
}
＆＃13; 
<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-->

         	<svg class="svgicons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108.6182 107.5305"> 
	
	<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"/> 
	<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"/> 
	</svg>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题