RoughJS带内部空白的封闭凹形SVG路径填充异常求解决方案

问题原因 #

RoughJS 内置的填充逻辑默认不识别 SVG 路径的镂空规则，对包含内部空白区域的复合路径绘制时，只会按外边界整体填充，不会保留内部镂空效果。

解决方案 #

• 最快临时规避方案（仅SVG渲染模式可用）：在RoughJS生成路径元素后，手动给path标签添加fill-rule="evenodd"属性即可，原生SVG的奇偶填充规则会自动识别路径的内外边界，实现你要的环形镂空效果，代码改动量最小。
• 通用兼容方案（Canvas/SVG渲染模式均可用）：将原路径的外轮廓和内部镂空轮廓拆分为两个独立路径，先使用相同的手绘风格参数绘制外轮廓填充，再用画布背景色填充绘制内部镂空路径，覆盖掉不需要的填充区域，注意保持两个路径的粗糙度、弯曲度等参数完全一致，避免出现明显的边界割裂感。
• 长期最优方案：提前对带镂空的路径做布尔运算预处理，借助SVG路径运算类库将带镂空的复合路径处理为无嵌套的单一路径后，再传入RoughJS绘制，不需要额外适配渲染模式，效果稳定性最高。

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