用SVG的弧形路径绘制圆图 [英] Circle drawing with SVG's arc path

问题描述

以下SVG路径可以绘制99.99％的圆圈:(尝试在 http://jsfiddle.net / DFhUF / 46 / ，看看你是否看到4个弧或只有2个弧，但是请注意，如果它是IE，它会呈现在VML中，而不是SVG，但也有类似的问题）

  M 100 100 a 50 50 0 1 0 0.00001 0 
  

但是，如果它是99.99999999％的圆圈，那么什么都不会显示？

  M 100 800 a 50 50 0 1 0 0.00000001 0 
  

这与100％的圆相同仍然是一个弧线，不是它，只是一个非常完整的弧线）

  M 100 800 a 50 50 0 1 0 0 0 
  

这怎么解决？原因是我使用一个函数来绘制一个弧的百分比，如果我需要特殊情况99.9999％或100％的弧来使用圆函数，那会很傻。

同样，使用RaphaelJS的jsfiddle上的测试用例位于 http：// jsfiddle .net / DFhUF / 46 /

（如果它是IE 8上的VML，即使第二个圆圈也不会显示......必须将其更改为0.01）

---

更新：

我在我们的系统中渲染了一个得分的弧线，所以3.3分可以得到1/3的圆。 0.5圈半圈，9.9圈圈达到99％。但是如果我们的系统中有9.99的分数呢？我是否需要检查它是否接近圆圈的99.999％，并使用 arc 函数或 circle 相应的功能？那么9.9987的分数呢？哪一个使用？想知道什么样的分数会映射到一个太完整的圆圈并切换到一个圆圈函数，当它是一个圆圈的某个99.9％或9.9987分数时，那么使用弧函数是很荒谬的。

解决方案

XAML的弧线相同。只需用 Z 关闭99.99％弧线，就可以得到一个圆圈！

The following SVG path can draw 99.99% of a circle: (try it on http://jsfiddle.net/DFhUF/46/ and see if you see 4 arcs or only 2, but note that if it is IE, it is rendered in VML, not SVG, but have the similar issue)

M 100 100 a 50 50 0 1 0 0.00001 0

But when it is 99.99999999% of a circle, then nothing will show at all?

M 100 800 a 50 50 0 1 0 0.00000001 0    

And that's the same with 100% of a circle (it is still an arc, isn't it, just a very complete arc)

M 100 800 a 50 50 0 1 0 0 0 

How can that be fixed? The reason is I use a function to draw a percentage of an arc, and if I need to "special case" a 99.9999% or 100% arc to use the circle function, that'd be kind of silly.

Again, a test case on jsfiddle using RaphaelJS is at http://jsfiddle.net/DFhUF/46/
(and if it is VML on IE 8, even the second circle won't show... you have to change it to 0.01)

---

Update:

This is because I am rendering an arc for a score in our system, so 3.3 points get 1/3 of a circle. 0.5 gets half a circle, and 9.9 points get 99% of a circle. But what if there are scores that are 9.99 in our system? Do I have to check whether it is close to 99.999% of a circle, and use an arc function or a circle function accordingly? Then what about a score of 9.9987? Which one to use? It is ridiculous to need to know what kind of scores will map to a "too complete circle" and switch to a circle function, and when it is "a certain 99.9%" of a circle or a 9.9987 score, then use the arc function.

解决方案

Same for XAML's arc. Just close the 99.99% arc with a Z and you've got a circle!

这篇关于用SVG的弧形路径绘制圆图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！