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

问题描述

小问题:使用 SVG 路径，我们可以绘制 99.99% 的圆并显示出来，但是当它是圆的 99.99999999% 时，则不会显示圆.怎么解决?

Short question: using SVG path, we can draw 99.99% of a circle and it shows up, but when it is 99.99999999% of a circle, then the circle won't show up. How can it be fixed?

以下 SVG 路径可以绘制 99.99% 的圆:(在 http://jsfiddle.net 上试试/DFhUF/1381/ 看看你看到的是 4 个圆弧还是只有 2 个圆弧，但是注意如果是 IE，它是用 VML 渲染的，而不是 SVG，但有类似的问题)

The following SVG path can draw 99.99% of a circle: (try it on http://jsfiddle.net/DFhUF/1381/ and see if you see 4 arcs or only 2 arcs, 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

但是当它是一个圆的 99.99999999% 时，什么都不会显示?

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

M 100 100 a 50 50 0 1 0 0.00000001 0    

100% 的圆也是如此(它仍然是一个弧，不是吗，只是一个非常完整的弧)

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 100 a 50 50 0 1 0 0 0 

如何解决?原因是我使用函数来绘制圆弧的百分比，如果我需要特殊情况"一个 99.9999% 或 100% 的圆弧来使用圆函数，那就有点傻了.

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.

同样，使用 RaphaelJS 的 jsfiddle 测试用例位于 http://jsfiddle.net/DFhUF/1381/
(如果是 IE 8 上的 VML，连第二个圆圈都不会显示……你必须把它改成 0.01)

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

更新:

这是因为我正在为我们的系统中的分数渲染弧线，所以 3.3 分得到 1/3 的圆.0.5 得到半个圆，9.9 分得到 99% 的圆.但是，如果我们的系统中有 9.99 的分数怎么办?我是否必须检查它是否接近圆的 99.999%，并相应地使用 arc 函数或 circle 函数?那么9.9987的分数呢?使用哪一个?需要知道什么样的分数会映射到太完整的圆"并切换到圆函数，而当它是圆的某个 99.9%"或 9.9987 分数时，再使用弧函数，这很可笑.

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.

推荐答案

同样适用于 XAML 的 arc.只需用 Z 闭合 99.99% 的圆弧，你就得到了一个圆！

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

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