0

不确定我是否做错了？是否可以一次为 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 的限制？

4

2 回答 2

3

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

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

我知道你试图让它与一个动画一起工作，但由于某种原因它不是。我尝试了几个想法，但我无法让那个形状来做变换比例和改变动画中的不透明度。所以我会继续挖掘，但同时我找到的解决方案可能是你的临时解决方案。

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

于 2013-11-14T18:12:59.563 回答
0

好吧，事实证明这绝对是一个浏览器错误，我在 Chromium 上打开了一张票，WebKit 和 Chromium 已经确认：https ://code.google.com/p/chromium/issues/detail?id=319407

值得庆幸的是，他们还建议了一个简单的解决方法，那就是在动画属性中添加填充。例如：

@keyframes pulseArrow {
  0% {
    transform: scale(1) translateX(0);
    opacity: 0;
    fill: #fff; /* without this it won't work in Chrome/Safari */
  }
  50% {
    transform: scale(2) translateX(0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 0;
  }
}
于 2013-11-19T10:23:30.263 回答