0

私がこれを間違っているかどうかわかりませんか？SVG 内のパス上の 2 つのプロパティを同時にアニメーション化することはできますか? これは 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次に、不透明度を変更する独自のアニメーションがあります (不透明度は子に影響するため)。私のテストでは、これにより矢印が拡大および縮小し、フェードインおよびフェードアウトしました。

1 つのアニメーションで動作させようとしていたことは知っていますが、何らかの理由でそうではありません。いくつかのアイデアを試しましたが、その 1 つのシェイプでアニメーションのスケール変換と不透明度の変更を行うことができませんでした。だから私は掘り続けますが、それまでの間、私が見つけた解決策はあなたにとって一時的な修正になる可能性があります.

ここにあります：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 に答える