SVG 笔画重叠消失

Posted 2023-03-28

【中文标题】SVG 笔画重叠消失

【英文标题】：SVG stroke overlaps disappear

【发布时间】：2021-10-30 12:09:43

【问题描述】：

如果我使用路径和围绕它的大笔划制作一个紧密的圆圈，则笔划区域自身的重叠变为白色。以编程方式为没有这些白色重叠的任何路径生成这些笔触对我来说很重要。对我来说，让任何大小的笔划都能在没有孔的情况下正常工作也很重要。

<svg   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- stroke-linecap="round" stroke-linejoin="round" fill-rule="evenodd" clip-rule="evenodd" fill="red"></path>
</svg>

【问题讨论】：

***.com/questions/41942666/… 有点类似的问题

具有非常大笔划的曲线渲染通常是错误的。最好使用较小的笔触并填充形状。

@MichaelMullany 我有理由使用带有大笔划的小曲线，而且很难避免它（从所需的笔划自动生成形状）。虽然我已经找到了答案。

【参考方案1】：

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

    <svg   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- 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- stroke-linecap="round" stroke-linejoin="round" fill-rule="evenodd" clip-rule="evenodd" fill="red"></path>
    </svg>