Question

我有一个围绕圆圈旋转的SVG元素（箭头）的动画（transform + transition）（有时带有比例）。它适用于最新的Chrome，Opera，Firefox（我没有测试过Safari，但我认为它也适用于那里）。但它在IE中不起作用，因为需要使用transform属性设置SVG元素的变换。所以我在我的脚本中添加了一行，将相同的变换应用于属性，但动画并没有发生，它只是跳过＆＃34;到新的位置。

我做了一个JSfiddle演示 - https://jsfiddle.net/rv28ezfw/3/ 在IE中，旋转/缩放不会动画，我需要找到一种方法来解决这个问题。

是否有插件或某些功能可以为我处理IE中的动画？最好不要调整已经在其他地方工作的功能..

我正在寻找一个jQuery SVG plugin和CSS Tricks.com有一个demo（在文章的最底部）也适用于IE，但我希望有更简单的东西。但是，如果你推荐一个或另一个我去。

Answer 1

我无法弄清楚它为什么不能在IE11中运行。相反，这是一个解决方法：

$('#btn').click(function() {
  // Changed to make demo smoother.
  $('#container').toggleClass('rotated');
});

#container {
  /* Resized so it looks better in snippet */
  width: 300px;
  height: 300px;
  /* So you can see what's going on */
  border: 1px solid black;
  /* Changed to make it transparent, otherwise you may cover other elements */
  background: rgba(0,0,0,0);
  /* So any elements underneath can still receive events */
  pointer-events: none;
  /* Moved here from svg */
  transition: all 1.5s ease;
}
/* Added */
#container.rotated {
  transform: rotate(45deg);
}

#btn {
  padding: 10px;
  color: #fff;
  text-align: center;
  background: green;
}

.cls-1 {
  fill: #2bffaa;
}

.cls-2 {
  fill: #ccc;
}

.cls-3 {
  fill: #f2f2f2;
}

.cls-4 {
  fill: #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn">GO</div>
<div id="container">
  <svg id="scroller" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480">
    <title>demo</title>
    <path id="scroller__outer" class="cls-1" d="M240,147a92.93,92.93,0,0,0-28.29,4.39l5.14,12A80.1,80.1,0,1,1,179.23,188L132.31,226.4c13.11,3.06,15.18,4.06,15.18,4.06S147,236.78,147,240A93,93,0,1,0,240,147Z" />
    <path id="scroller__inner" class="cls-2" d="M240,158a84.78,84.78,0,0,0-23.82,3.86l1.76,4.13,6.59,15,0.68,1.44A59.46,59.46,0,1,1,190.56,207l-0.92-1.44-9.17-15.41L179.23,188c-12,14-21.22,32.14-21.22,52,0,44.18,37.82,82,82,82s82-37.82,82-82S284.18,158,240,158Z"
    />
    <circle id="scroll__inner__circle" class="cls-3" cx="240" cy="240" r="51.5" />
    <path id="scroll__inner__outline" class="cls-4" d="M240,179a61,61,0,1,0,61,61A61,61,0,0,0,240,179Zm0,117a56,56,0,1,1,56-56A56,56,0,0,1,240,296Z" />
  </svg>
</div>

基本上，我会轮换#container而不是SVG本身。然后，问题是将transform移到#container。

因为我们正在旋转div，所以角落可以与下方的元素重叠。在这个演示中，我将其设为透明但概述了边框，以便您可以看到它们。由于pointer-events: none，如果div的一角与其重叠，则不会阻止用户点击“开始”按钮。

您也可以稍微更改SVG，以免图标周围出现太多空白区域。

在IE中动画SVG元素变换（旋转和缩放）

1 个答案: