SVG/HTML要素間のCSSアニメーションの違い

Question

私はSVGとPNGと同じオブジェクトを持っています。 私はルールのこれらのセットでそれらをアニメーション化しようとしています：ここ

@-webkit-keyframes rotate-right { 
    from { 
    -webkit-transform: rotate(0deg); 
    } 
    to { 
    -webkit-transform: rotate(360deg); 
    } 
} 
#airplane { 
    transform-origin: 200px 200px; 
    animation: rotate-right 6s linear 0s infinite; 
} 

は同じルールでアニメーションしています。 なぜ、SVGアニメーションは非常によく見えますが、HTMLアニメーションはそれ自身の軸を中心に回転するように見えますか？

SVG Animation

HTML Animation

Answer 1

ありませんあなたがないSVGとしておよびPNG

と私は同じオブジェクトを持っています。あなたのアニメーションは完全に異なっています。

1. PNGとSVGのサイズ、形状、レイアウトはまったく異なります。
2. PNG全体がアニメーション化されています
3. SVGにはアニメーションが1つ含まれています。
4. transform-origin（<g>）の要素は、HTML要素のtransform-originとは別に動作します。 SVGの内部では、viewBoxの影響を受けます。