svg - 使用 SVG 圆弧路径绘制圆

Question

使用 SVG 路径，我们可以绘制 99.99% 的圆并显示出来，但是当它是 99.99999999% 的圆时，圆将不会显示。如何修复？

下面的SVG路径可以画出99.99%的圆:

var paper = Raphael(0, 0, 300, 800);

// Note that there are supposed to be 4 arcs drawn, but you may see only 1, 2, or 3 arcs depending on which browser you use


paper.path("M 100 100 a 50 50 0 1 0 35 85").attr({stroke: "#080", opacity: 1, "stroke-width" : 6})  // this is about 62.5% of a circle, and it shows on most any browsers
    
paper.path("M 100 210 a 50 50 0 1 0 0.0001 0").attr({stroke: "#080", opacity: 1, "stroke-width" : 6})    // this one won't show anything if it is IE 8's VML, but will show if it is Chrome or Firefox's SVG.  On IE 8, it needs to be 0.01 to show
    
paper.path("M 100 320 a 50 50 0 1 0 0.0000001 0").attr({stroke: "#080", opacity: 1, "stroke-width" : 6})   // this one won't draw anything at all, unless you change the 0.0000001 to 0.0001 on Chrome or Firefox... Safari will show it though...
    
paper.path("M 100 430 a 50 50 0 1 0 0 0").attr({stroke: "#080", opacity: 1, "stroke-width" : 6})   // this is 100% of a circle...  even Safari won't show it

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>

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

同样，上面是一个测试用例(如果是 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分数时，再使用圆弧函数.

Answer 1

更新:

我根据@loominade 的反馈进行了调整，使圆的绘制从“东、南、西、北”开始，制作了stroke-dashoffset 和startOffset 与原生 circle 元素的行为更加一致。

---

我遇到了类似的困境，我找到了这个解决方案:

<path 
    d="
    M cx cy
    m r, 0
    a r,r 0 1,0 -(r * 2),0
    a r,r 0 1,0  (r * 2),0
    "
/>

换句话说，这:

<circle cx="100" cy="100" r="75" />

可以通过以下方式实现:

  <path 
        d="
        M 100, 100
        m 75, 0
        a 75,75 0 1,0 -150,0
        a 75,75 0 1,0  150,0
        "
  />

诀窍是有两条弧线，第二条弧线从第一条弧线停止的地方开始，并使用负直径返回到原始弧线起点。

它不能作为一个圆弧中的完整圆来完成的原因(我只是推测)是因为你会告诉它从它自己(假设 150,150)到它自己(150,150)画一个圆弧，它呈现为“哦，我已经在那里了，不需要弧!”。

我提供的解决方案的好处是:

1. 很容易将圆圈直接转换为路径，并且
2. 两条弧线没有重叠(如果您使用标记或图案等，这可能会导致问题)。这是一条干净的连续线，尽管分为两部分。

如果他们只允许文本路径接受形状，那么这一切都无关紧要。但我认为他们正在避免该解决方案，因为像圆这样的形状元素在技术上没有“起点”。

片段演示:

circle, path {
    fill: none;
    stroke-width: 5;
    stroke-opacity: .5;
}

circle {
    stroke: red;
}
path {
    stroke: yellow;
}

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="220px" height="220px">

      <circle cx="100" cy="100" r="75" />

      <path 
            d="
            M 100, 100
            m 75, 0
            a 75,75 0 1,0 -150,0
            a 75,75 0 1,0  150,0
            "
      />

</svg>

更新:

如果您正在使用 textPath 引用的路径，并且您希望文本呈现在圆弧的外边缘，您可以使用完全相同的方法，但将扫描标志从0 到 1 以便它将路径的外部视为表面而不是内部(将 1,0 视为坐在中心并围绕自己画圆的人，而 1 ,1 作为某人以半径距离围绕中心走动并在他们旁边拖着他们的粉笔，如果这有任何帮助的话)。这是上面的代码，但有变化:

<path 
    d="
    M cx cy
    m r, 0
    a r,r 0 1,1 -(r * 2),0
    a r,r 0 1,1  (r * 2),0
    "
/>