使用 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% 的弧来使用 circle 函数，那就有点傻了.

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的分数时，则使用arc函数，这很荒谬.

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 的弧相同.只需用 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屋！