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 code> 与原生 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
    "
/>