动画期间应用于SVG的CSS转换在Safari上持续存在，而不是在Chrome/Firefox上

将鼠标悬停在内联

svg

元素上时，我正在使用CSS动画和

transform

属性设置

多边形

元素的动画

所需行为：如果用户在动画中悬停然后停止悬停，我希望动画元素返回其原始状态

在Chrome和Firefox上，这一切都如期进行。在Safari上，动画期间应用的变换将保持不变

代码笔：

代码：

HTML

我尝试过应用

transform:nonesvg

未悬停时，对

polygon

进行编码，并应用

动画填充模式：无，两者似乎都没有任何效果

对Safari上的差异有什么看法？谢谢你的帮助

<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>

  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>

  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/>
  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
      stroke="orange" fill="transparent" stroke-width="5"/>

  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
      stroke="green" fill="transparent" stroke-width="5"/>

  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>

svg polygon {
  transform: none;
}

svg:hover polygon {
  animation-duration: 2s;
  animation-name: rotate;
  animation-timing-function: linear;
  transform-origin: 47px 192px;
  animation-fill-mode: none;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}