1. ホーム
  2. svg

[解決済み] SVGの円弧パスによる円形描画

2022-04-26 16:35:01

質問

短い質問:SVGパスを使用して、99.99%の円を描けば表示されますが、99.99999999%の円を描くと、円が表示されなくなります。どうしたら直るのでしょうか?

以下のSVGパスは、99.99%の円を描くことができます: (試しに http://jsfiddle.net/DFhUF/1381/ で、4つの円弧が見えるか、2つの円弧だけが見えるか見てください。ただし、IEの場合、SVGではなくVMLでレンダリングされますが、同様の問題があることに注意してください)

M 100 100 a 50 50 0 1 0 0.00001 0

しかし、99.99999999%の円だと、全く何も表示されないのでは?

M 100 100 a 50 50 0 1 0 0.00000001 0    

そしてそれは、円の100%でも同じです(円弧であることに変わりはありませんね、非常に完全な円弧というだけです)。

M 100 100 a 50 50 0 1 0 0 0 

どうすれば直るのでしょうか? というのも、円弧のパーセンテージを描画する関数を使用しているのですが、円弧関数を使用するために99.9999%や100%の円弧を"特殊ケース"しなければならないとすると、それはちょっと馬鹿げていますよね。

繰り返しになりますが、RaphaelJSを使ったjsfiddleでのテストケースは以下の通りです。 http://jsfiddle.net/DFhUF/1381/

(IE8でVMLだと2つ目の円も表示されない...0.01に変更する必要がある)


更新しました。

これは、私たちのシステムで点数を円弧でレンダリングしているためで、3.3点では円の1/3が表示されます。 0.5点なら円の半分、9.9点なら円の99%になります。 しかし、我々のシステムで9.99点という点数があったらどうでしょう? 99.999%の円に近いかどうかをチェックして、その点数を表すために arc 関数または circle 関数を使うことができますか? では、9.9987というスコアはどうでしょうか? どれを使えばいいのでしょうか? どのようなスコアが完全すぎる円に対応するのかを知っていて円関数に切り替え、ある99.9%の円や9.9987のスコアになったら円弧関数を使う、というのは馬鹿げています。

どのように解決するのですか?

XAMLの円弧と同じです。ただ、99.99%の円弧を Z で、円の出来上がり