css - 可以使用 CSS 动画同时为 SVG 的两个属性设置动画吗？

Question

不确定我是否做错了？是否可以一次为 SVG 中的路径上的两个属性设置动画？这在 Firefox 中可以正常工作，但在 Safari 或 Chrome 中却不行。

示例 SVG:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg"  version="1.1">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="holder">
            <path id="ShapeRight" d="M16,20 L21,16.5004951 C21,16.5004951 19.5760225,15.5035698 18.8640337,15.0051072 C17.9093558,14.336738 16,13 16,13 L16,20 L16,20 Z" opacity="0.55" fill="#999"></path>
        </g>
    </g>
</svg>

相关的 Sass/CSS(在某些情况下显然需要前缀)

#holder {
  #ShapeRight {
    opacity: 1;
    transform: scale(1);
    animation: pulseArrow 2s forwards ease-in-out infinite;
    transform-origin: 50% 50%;
    display: inline-block;
  }
}

@keyframes pulseArrow {
  0% {
    transform: scale(1) translateX(0);
    opacity: 0;
  }
  50% {
    transform: scale(2) translateX(0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 0;
  }
}

这是 Codepen 上的缩减:

http://cdpn.io/hLFwn

您可以看到仅应用了动画的最后一部分(不透明度)。两者都应该工作还是这是使用 CSS 动画 SVG 的限制？

Answer 1

所以这很奇怪。我能够在 Chrome 上重现该问题，但我不知道为什么它没有应用这两个动画属性。

一个简单的解决方法是 #ShapeRight 有一个只进行放大和缩小的动画。 #holder 然后有自己的动画来改变不透明度(因为不透明度会影响 child )。在我的测试中，这会导致箭头变大、变小、淡入淡出。

我知道您曾试图让它与一个动画一起工作，但出于某种原因它没有。我尝试了几个想法，但我无法获得一个形状来进行变换缩放并改变动画中的不透明度。所以我会继续挖掘，但与此同时，我找到的解决方案可能是您的临时解决方案。

这是:http://codepen.io/Fernker/pen/BjzFt