填充颜色未应用于 SVG 路径答案

【问题标题】：Fill color is not applied to the SVG path填充颜色未应用于 SVG 路径
【发布时间】：2021-07-05 03:58:08
【问题描述】：

为了根据数据绘制一些形状，我使用的是 SVG 路径，但是对于特定的高度和宽度，填充颜色不会正确应用于路径元素。刚刚复制了我的路径方向并在下面创建了一个示例，如果您更改 SVG 的宽度，则路径会正确填充

<svg height="450" width="450">
  <path d="M 0 118.65730685696555 L 0 0 L 46.4375 335.9090909090909 L 92.875 0 L 139.3125 0 L 185.75 0 L 278.625 0 L 325.0625 0 L 371.5 0 L 371.5 12.864603481624718 L 325.0625 13.465478183788035 L 278.625 28.056480133139154 L 185.75 64.31377161001998 L 139.3125 130.11162255466053 L 92.875 335.9090909090909 L 46.4375 335.9090909090909 L 0 118.65730685696555" />
</svg>

会是什么问题，如何解决？

【问题讨论】：

这是 Chrome 中的一个错误 - 在 Firefox 和 Safari 中运行良好。我会提交一个错误。 bugs.chromium.org/p/chromium/issues/detail?id=1197461

标签： svg

【解决方案1】：

如果您稍微调整路径，使左下角的两个点不重合，Chrome 可以正确填充它。

<svg height="450" width="450">
  <path d="M 0 118.65730685696555 L 0 0 L 46.4375 335.9090909090909 L 92.875 0 L 139.3125 0 L 185.75 0 L 278.625 0 L 325.0625 0 L 371.5 0 L 371.5 12.864603481624718 L 325.0625 13.465478183788035 L 278.625 28.056480133139154 L 185.75 64.31377161001998 L 139.3125 130.11162255466053 L 92.875 335.87 L 46.4375 335.9090909090909 L 0 118.65730685696555" />
</svg>

【讨论】：