可以使用CSS动画的同时动画的SVG的两个属性？ [英] Possible to animate two properties of an SVG at once with a CSS animation?

问题描述

不知道如果我这样做不对吗？是否有可能在SVG一次动画路径上的两个属性？这个工程，我期望在Firefox而不是在Safari或Chrome。

Not sure if I am doing this wrong? Is it possible to animate two properties on a path in an SVG at once? This works as I would expect in Firefox but not on Safari or 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>

相关萨斯/ CSS（$显然在某些情况下需要p $ pfixes）

Relevant Sass/CSS (obviously prefixes needed in some instances)

#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减少：

Here is a reduction on Codepen:

http://cdpn.io/hLFwn

您可以看到，只有在动画的最后一部分应用（不透明度）。既要工作还是这是一个限制与CSS动画SVG？

You can see that only the last part of the animation is applied (the opacity). Should both work or is this a limitation to animating SVG with CSS?

推荐答案

好了，事实证明这是definitily一个浏览器错误，我打开一票的铬和WebKit和铬已经证实了它：的 HTTPS：//$c$c.google.com/p/chromium/issues/detail？ ID = 319407

Well, it turns out this is definitily a browser bug, I opened a ticket on Chromium and WebKit and Chromium have confirmed it: https://code.google.com/p/chromium/issues/detail?id=319407

值得庆幸的是，还有，他们已经提出了一个简单的解决方法，那就是加入填补了动画属性。例如：

Thankfully, there is also a simple workaround that they have suggested and that is to add fill in the animation property. For example:

@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;
  }
}

这篇关于可以使用CSS动画的同时动画的SVG的两个属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！