1

この SVG SMIL パイ アニメーションの中心の何が問題なのか、誰にもわかりませんか?

http://jsfiddle.net/frank_o/fj7Xc/

次のように表示されます。

ここに画像の説明を入力

次のように表示されるはずですが、

ここに画像の説明を入力

HTML:

<div class="svg_wrapper">
    <svg viewBox="0 0 600 425">
        <path d="M 175, 175 m 0, -75 a 75,75 0 1,0 0,150 a 75,75 0 1,0 0,-150" fill="none" stroke="black" stroke-width="150" stroke-dasharray="0 600 600 0" stroke-dashoffset="1000">
            <animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="600" dur="2s" repeatCount="1" fill="freeze" />
        </path>
    </svg>
</div>
4

1 に答える 1

2

どちらのブラウザでも、ストローク アニメーション技術をハッキングして、塗りつぶしを希望どおりにアニメーション化しようとしているという事実に問題があると思います。

これは問題です。ブラウザは、外側の円または内側のピボット ポイントを正確に計算していないためです。ブラウザは、中間の公式円を計算し、画面の解像度に応じて四捨五入してから、ストロークを描画しています。両側に。ストロークが非常に大きいため、円のエッジのわずかな丸み効果が悪化します。

残念ながら、Javascript を使用してアニメーションの各フレームでパイピースの実際のパスを計算する以外に解決策はありません。

于 2014-07-21T21:46:18.480 に答える