SVG填充路径-如果它在自身上循环，则不填充重叠

Question

我维护了一个用flash编写的绘图工具，该工具将其数据保存为荧光笔工具的一系列点，这些点描述了一条粗大的、填充的徒手/点对点线的轮廓。例如，如果用户画了一条水平线，路径将是从左到右的点序列，然后是向下10像素的线，相同的点序列反向回到原点下方10px，那么路径就关闭了

另一个工具通过将json点列表转换为svg路径来周期性地光栅化Flash的数据。路径命令类似于“M 123,456l 1,2 3,5-2,-5...”并描述形状的完整外缘。没有笔画，填充是不透明度0.4

我注意到，如果用户绘制了一条与自己重叠的直线，比如希腊语字母alpha，重叠的部分不会被填满。我以为它会变得更不透明，就像一个真正的荧光笔一样。

这种行为是SVG设计的吗？或者可能是我使用的库中的一个bug？如果按照设计，我可以使用什么替代策略来呈现一个部分不透明的荧光笔线，如果它越过自己，它会逐渐变得更不透明？

    <svg width="680" height="465" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <g>
        <path d="M 283,29 l -2,2 -1,1 -5,4 -5,4 -4,3 -4,2 -3,2 -4,3 -6,3 -4,2 -5,3 -6,5 -3,2 -4,2 -1,1 -5,2 -4,3 -4,2 -3,1 -3,2 -3,2 -4,1 -8,3 -3,1 -5,1 -6,1 -1,0 -5,1 -4,0 -5,0 -6,1 -6,0 -7,0 -10,0 -7,0 -7,0 -5,0 -5,0 -9,0 -2,0 -3,0 -8,0 -3,0 -6,0 -4,0 -4,0 -3,-1 -3,-1 -2,-2 -2,-1 -3,-4 0,-1 -2,-3 -2,-4 -1,-2 -1,-3 -1,-5 0,-6 0,-4 0,-4 0,-4 0,-5 0,-5 0,-4 1,-4 3,-4 3,-4 2,-3 2,-3 2,-2 1,-1 3,-1 2,-1 2,-1 8,-3 7,-1 5,-1 4,0 3,0 3,0 2,0 2,0 2,0 2,0 3,0 2,0 3,0 2,0 5,0 3,0 1,0 2,0 3,1 4,2 3,0 2,2 4,2 4,2 3,1 2,2 2,2 3,2 4,3 3,3 2,2 3,3 2,3 2,2 2,3 1,3 2,3 2,3 3,3 2,3 1,3 2,3 2,3 2,3 2,3 1,3 1,3 2,2 2,2 2,3 1,3 3,3 2,3 1,2 2,1 1,2 2,1 2,2 3,1 2,1 2,2 2,1 3,1 3,1 2,2 3,1 4,2 4,2 3,1 3,1 3,1 3,0 2,1 2,1 2,0 4,1 4,1 4,0 3,0 3,0 4,0 2,0 4,0 3,0 1,0 2,0 3,0 3,0 2,0 2,0 3,0 2,0 2,0 1,0 1,-1 1,0 2,-1 2,0 2,-1 1,0 1,-1 1,0 1,-1 1,0 1,0 0,25 -1,0 -1,0 -1,1 -1,0 -1,1 -1,0 -2,1 -2,0 -2,1 -1,0 -1,1 -1,0 -2,0 -2,0 -3,0 -2,0 -2,0 -3,0 -3,0 -2,0 -1,0 -3,0 -4,0 -2,0 -4,0 -3,0 -3,0 -4,0 -4,-1 -4,-1 -2,0 -2,-1 -2,-1 -3,0 -3,-1 -3,-1 -3,-1 -4,-2 -4,-2 -3,-1 -2,-2 -3,-1 -3,-1 -2,-1 -2,-2 -2,-1 -3,-1 -2,-2 -2,-1 -1,-2 -2,-1 -1,-2 -2,-3 -3,-3 -1,-3 -2,-3 -2,-2 -2,-2 -1,-3 -1,-3 -2,-3 -2,-3 -2,-3 -2,-3 -1,-3 -2,-3 -3,-3 -2,-3 -2,-3 -1,-3 -2,-3 -2,-2 -2,-3 -3,-3 -2,-2 -3,-3 -4,-3 -3,-2 -2,-2 -2,-2 -3,-1 -4,-2 -4,-2 -2,-2 -3,0 -4,-2 -3,-1 -2,0 -1,0 -3,0 -5,0 -2,0 -3,0 -2,0 -3,0 -2,0 -2,0 -2,0 -2,0 -3,0 -3,0 -4,0 -5,1 -7,1 -8,3 -2,1 -2,1 -3,1 -1,1 -2,2 -2,3 -2,3 -3,4 -3,4 -1,4 0,4 0,5 0,5 0,4 0,4 0,4 0,6 1,5 1,3 1,2 2,4 2,3 0,1 3,4 2,1 2,2 3,1 3,1 4,0 4,0 6,0 3,0 8,0 3,0 2,0 9,0 5,0 5,0 7,0 7,0 10,0 7,0 6,0 6,-1 5,0 4,0 5,-1 1,0 6,-1 5,-1 3,-1 8,-3 4,-1 3,-2 3,-2 3,-1 4,-2 4,-3 5,-2 1,-1 4,-2 3,-2 6,-5 5,-3 4,-2 6,-3 4,-3 3,-2 4,-2 4,-3 5,-4 5,-4 1,-1 2,-2" style="stroke-linecap: round; stroke-linejoin: round; fill: #0000CC; fill-opacity: 0.4; fill-rule: evenodd; stroke: none" />
    
        <path d="M 583,29 l -2,2 -1,1 -5,4 -5,4 -4,3 -4,2 -3,2 -4,3 -6,3 -4,2 -5,3 -6,5 -3,2 -4,2 -1,1 -5,2 -4,3 -4,2 -3,1 -3,2 -3,2 -4,1 -8,3 -3,1 -5,1 -6,1 -1,0 -5,1 -4,0 -5,0 -6,1 -6,0 -7,0 -10,0 -7,0 -7,0 -5,0 -5,0 -9,0 -2,0 -3,0 -8,0 -3,0 -6,0 -4,0 -4,0 -3,-1 -3,-1 -2,-2 -2,-1 -3,-4 0,-1 -2,-3 -2,-4 -1,-2 -1,-3 -1,-5 0,-6 0,-4 0,-4 0,-4 0,-5 0,-5 0,-4 1,-4 3,-4 3,-4 2,-3 2,-3 2,-2 1,-1 3,-1 2,-1 2,-1 8,-3 7,-1 5,-1 4,0 3,0 3,0 2,0 2,0 2,0 2,0 3,0 2,0 3,0 2,0 5,0 3,0 1,0 2,0 3,1 4,2 3,0 2,2 4,2 4,2 3,1 2,2 2,2 3,2 4,3 3,3 2,2 3,3 2,3 2,2 2,3 1,3 2,3 2,3 3,3 2,3 1,3 2,3 2,3 2,3 2,3 1,3 1,3 2,2 2,2 2,3 1,3 3,3 2,3 1,2 2,1 1,2 2,1 2,2 3,1 2,1 2,2 2,1 3,1 3,1 2,2 3,1 4,2 4,2 3,1 3,1 3,1 3,0 2,1 2,1 2,0 4,1 4,1 4,0 3,0 3,0 4,0 2,0 4,0 3,0 1,0 2,0 3,0 3,0 2,0 2,0 3,0 2,0 2,0 1,0 1,-1 1,0 2,-1 2,0 2,-1 1,0 1,-1 1,0 1,-1 1,0 1,0 0,25 -1,0 -1,0 -1,1 -1,0 -1,1 -1,0 -2,1 -2,0 -2,1 -1,0 -1,1 -1,0 -2,0 -2,0 -3,0 -2,0 -2,0 -3,0 -3,0 -2,0 -1,0 -3,0 -4,0 -2,0 -4,0 -3,0 -3,0 -4,0 -4,-1 -4,-1 -2,0 -2,-1 -2,-1 -3,0 -3,-1 -3,-1 -3,-1 -4,-2 -4,-2 -3,-1 -2,-2 -3,-1 -3,-1 -2,-1 -2,-2 -2,-1 -3,-1 -2,-2 -2,-1 -1,-2 -2,-1 -1,-2 -2,-3 -3,-3 -1,-3 -2,-3 -2,-2 -2,-2 -1,-3 -1,-3 -2,-3 -2,-3 -2,-3 -2,-3 -1,-3 -2,-3 -3,-3 -2,-3 -2,-3 -1,-3 -2,-3 -2,-2 -2,-3 -3,-3 -2,-2 -3,-3 -4,-3 -3,-2 -2,-2 -2,-2 -3,-1 -4,-2 -4,-2 -2,-2 -3,0 -4,-2 -3,-1 -2,0 -1,0 -3,0 -5,0 -2,0 -3,0 -2,0 -3,0 -2,0 -2,0 -2,0 -2,0 -3,0 -3,0 -4,0 -5,1 -7,1 -8,3 -2,1 -2,1 -3,1 -1,1 -2,2 -2,3 -2,3 -3,4 -3,4 -1,4 0,4 0,5 0,5 0,4 0,4 0,4 0,6 1,5 1,3 1,2 2,4 2,3 0,1 3,4 2,1 2,2 3,1 3,1 4,0 4,0 6,0 3,0 8,0 3,0 2,0 9,0 5,0 5,0 7,0 7,0 10,0 7,0 6,0 6,-1 5,0 4,0 5,-1 1,0 6,-1 5,-1 3,-1 8,-3 4,-1 3,-2 3,-2 3,-1 4,-2 4,-3 5,-2 1,-1 4,-2 3,-2 6,-5 5,-3 4,-2 6,-3 4,-3 3,-2 4,-2 4,-3 5,-4 5,-4 1,-1 2,-2" style="stroke-linecap: round; stroke-linejoin: round; fill: #0000CC; fill-opacity: 0.4; fill-rule: nonzero; stroke: none" />
      </g>
    </svg>

关于注释：文档基本上使用填充路径绘制两个alpha符号，尽管每个符号的fill-rule不同。在外观上没有明显的差别，尽管对于更复杂的形状，在其自身上交叉多次，在输出上有差别--所有示例都无法复制一个荧光笔，每当填充的区域返回到相同路径的已填充区域时，该笔就会变暗

Answer 1

我现在明白你的问题了。不幸的是，fill-rule:nonzero对您的情况没有帮助，因为您的路径不仅会自交（通常情况下会很好），而且还会在左侧与自身交叉。这就把填充规则“非零”算法搞乱了。

其实也没有一个简单的解决办法。我能建议的最好的方法是检测荧光灯路径何时击中一个水平拐点（即水平改变方向），并在该点将路径拆分为两个路径（或子路径）。