在Chrome中解析SVG路径日志消息错误

Error parsing SVG path log message in Chrome

本文关键字：路径日志消息错误 SVG Chrome 更新时间：2023-09-26

我正在尝试在javascript中实现一个简单的绘画工具，用于在SVG上手绘。对于自由的手，我使用折线，而绘制，一旦绘制完成，我试图使曲线出来，就像谷歌绘制平滑的曲线。当然，到目前为止，我还没有设计出一个真正的平滑逻辑，甚至没有尝试过。我现在使用的是在折线的每四个点中取一个来创建一条曲线。这可能是一个糟糕的方法，但这是我认为值得尝试的第一件事。

<path stroke="black" opacity="1" stroke-width="10" shape-rendering="geometric-precision" fill="none" d="M 1452 559 C 1452 556 1317 518 1308 521 1296 528 1289 537 1281 542 1277 549 1272 559 1267 566 1265 578 1265 585 1263 592 1263 599 1260 606 1258 616 1253 627 1248 639 1244 656"> </path>

但在chrome我得到这个错误Problem parsing d="M 1452 559 C 1452 ...但是它在SVG上呈现所有内容。我只是想知道为什么它只发生在chrome.

这不是来自chromium的错误。贝塞尔曲线需要2个控制点和终点，这意味着除了起点之外至少有3个点，对于曲线序列，点的数量应该是3的倍数，因为曲线的起点是前一个曲线的终点。
当点不是3的倍数时，chrome抛出一个错误，但仍然渲染它。