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

【问题标题】：Animate SVG element transform (rotate & scale) in IEIE 中的动画 SVG 元素变换（旋转和缩放）
【发布时间】：2023-03-31 13:28:01
【问题描述】：

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

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

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

我正在查看 jQuery SVG plugin 和 CSS Tricks.com 有一个 demo（在文章的最底部），它也适用于 IE，但我希望有更简单的东西。但是，如果您推荐其中之一，我会同意的。

【问题讨论】：

您的目标是哪个 IE 版本？ caniuse.com/#search=transform
我会说 11+。该页面说它在 IE 11 中受支持。但它对我不起作用。它说我在 IE 11.0.9600.18376 上。那怎么不行呢？

标签： javascript jquery css svg

【解决方案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 本身。然后，将transforms 移到#container 上。

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

您还可以稍微更改 SVG，这样图标周围的空白就不会太多了。

【讨论】：