[解決済み] SVGの円弧パスによる円形描画
質問
短い質問: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
で、円の出来上がり
関連
-
[解決済み] d3.jsでノードのダブルクリックイベントを作成するにはどうすればよいですか?
-
[解決済み] getBBox() SVGRectはどのように計算するのですか?
-
[解決済み] SVGのストロークが一方向のみ
-
[解決済み] ImageMagickでSVGをPNGに変換する方法は?
-
[解決済み】円弧(のSVGパス)を計算する方法)
-
[解決済み】SVGファイル内のtransformを削除する方法
-
[解決済み] SVG ルート要素のデフォルトの背景色
-
[解決済み] SVGの円弧パスによる円形描画
-
[解決済み] SVG における text 要素の垂直アライメント
-
[解決済み] svgのx属性とdx属性の違いは何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] SVGで中空円を描画する
-
[解決済み] d3.jsでノードのダブルクリックイベントを作成するにはどうすればよいですか?
-
[解決済み] getBBox() SVGRectはどのように計算するのですか?
-
[解決済み] SVGのストロークが一方向のみ
-
[解決済み] SafariでSvg画像要素が表示されない
-
[解決済み] ImageMagickでSVGをPNGに変換する方法は?
-
[解決済み】SVGファイル内のtransformを削除する方法
-
[解決済み] SVG ルート要素のデフォルトの背景色
-
[解決済み] SVG における text 要素の垂直アライメント
-
[解決済み] svgのx属性とdx属性の違いは何ですか?