SVG 笔划重叠消失

Question

如果我使用路径制作一个紧密的圆圈并在其周围画一个大笔划，笔划区域自身的重叠部分会变成白色。以编程方式为没有这些白色重叠的任何路径生成这些笔画对我来说很重要。对我来说，任何大小的笔画都能很好地工作而没有孔也很重要。

<svg width="1366" height="1024" viewBox="0 0 1366 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="rgb-template blink" d="M788.563 290.064C796.281 290.064 802.537 280.447 802.537 268.584C802.537 256.721 796.281 247.104 788.563 247.104C780.845 247.104 774.589 256.721 774.589 268.584C774.589 280.447 780.845 290.064 788.563 290.064Z" class="blink" stroke="#0F0" stroke-width="151" stroke-linecap="round" stroke-linejoin="round" fill-rule="evenodd" clip-rule="evenodd" fill="red"></path>
</svg>

Answer 1

我发现添加 stroke-linecap="round" style="stroke-dasharray: 1000, 1000;" 通过引入虚拟破折号解决了这个问题

    <svg width="1366" height="1024" viewBox="0 0 1366 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path id="rgb-template blink" d="M788.563 290.064C796.281 290.064 802.537 280.447 802.537 268.584C802.537 256.721 796.281 247.104 788.563 247.104C780.845 247.104 774.589 256.721 774.589 268.584C774.589 280.447 780.845 290.064 788.563 290.064Z" class="blink" stroke="#0F0" stroke-width="151" stroke-linecap="round" stroke-linejoin="round" fill-rule="evenodd" clip-rule="evenodd" fill="red" style="stroke-dasharray: 1000, 1000; stroke-dashoffset: 0;"></path>
    <path id="rgb-template blink" d="M788.563 290.064C796.281 290.064 802.537 280.447 802.537 268.584C802.537 256.721 796.281 247.104 788.563 247.104C780.845 247.104 774.589 256.721 774.589 268.584C774.589 280.447 780.845 290.064 788.563 290.064Z" class="blink" stroke="#0F0" stroke-width="151" stroke-linecap="round" stroke-linejoin="round" fill-rule="evenodd" clip-rule="evenodd" fill="red"></path>
    </svg>

SVG 笔划重叠消失

SVG stroke overlaps disappear

safari

svg