SVG路径渲染异常：双路径交汇区域显示背景色问题求助

我编写了一段结构简洁的SVG路径代码，本该显示黑色的部分区域（大写字母A的横杠与斜边交汇区域）却呈现出背景色（白色）。为便于观察，我已在每个顶点处添加了彩色圆点标注，恳请技术同行帮忙排查该异常原因。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg width="214" height="317" viewBox="0 0 214 317" xmlns="http://www.w3.org/2000/svg">
        <path d="M 199 317 L 107 32.5 L 14.5 317 L 0 317 L 105 0 L 109 0 L 214 317 L 199 317 Z 
                 M 166 199 L 44.5 199 L 41.5 211 L 170.5 211 Z" />
        <!-- The 2nd M...Z is the horizontal piece. -->
        <circle cx="166" cy="199" r="2" fill="red" stroke="none" />
        <circle cx="44.5" cy="199" r="2" fill="green" stroke="none" />
        <circle cx="41.5" cy="211" r="2" fill="blue" stroke="none" />
        <circle cx="170.5" cy="211" r="2" fill="yellow" stroke="none" />
    </svg>
</body>
</html>

注：渲染出的大写字母A在横杠与斜边交汇区域显示白色（背景色）

问题原因 #

这是SVG默认填充规则nonzero导致的问题。当路径包含多个子路径（此处为字母主体和横杠两个子路径）时，重叠区域的路径绘制方向如果相反，填充效果会相互抵消，最终该区域显示背景色。

你的横杠子路径是顺时针绘制（M166 199 → L44.5 199 → L41.5 211 → L170.5 211 → Z），而字母主体在对应重叠区域的路径方向为逆时针，两者方向相反，填充规则判定该区域为“未填充”，所以显示背景色。

解决方案 #

有两种可行的解决方式：

1. 修改子路径绘制方向：将横杠子路径改为逆时针绘制，使其与主体路径方向一致，避免填充抵消：

<path d="M 199 317 L 107 32.5 L 14.5 317 L 0 317 L 105 0 L 109 0 L 214 317 L 199 317 Z 
         M 166 199 L 170.5 211 L 41.5 211 L 44.5 199 Z" />

2. 切换填充规则：给<path>元素添加fill-rule="evenodd"属性，使用奇偶填充规则——只要区域被路径包围奇数次就会填充，不受路径方向影响：

<path fill-rule="evenodd" d="M 199 317 L 107 32.5 L 14.5 317 L 0 317 L 105 0 L 109 0 L 214 317 L 199 317 Z 
         M 166 199 L 44.5 199 L 41.5 211 L 170.5 211 Z" />

内容的提问来源于stack exchange，提问作者user2171796