如何规范化 SVG 路径数据（跨浏览器）？

Question

我试图找到一种方法来实现跨浏览器路径规范器。有被描述原生的方式在这里和功能的例子是在这里，但它只能在最新的歌剧（但不是在IE，FF，Safari浏览器，Chrome浏览器）。

本机方式使用pathElm.normalizedPathSegList并将所有相对坐标转换为绝对坐标，并将所有路径段类型表示为以下类型的子集：M、L、C、z。

我只找到了一个 javascript 代码和它的jsfiddled 功能示例，但它仅适用于 IE 和 FF。Chrome 给出“未捕获的错误：INDEX_SIZE_ERR：DOM 异常 1”。如何修复这在 Opera、Safari 和 Chrome 中也能正常工作，或者有没有其他方法可以规范化 SVG 路径？

Answer 1

编辑：我修复了 Rapha\xc3\xabl 错误，并对动画和非动画复杂路径进行了彻底的测试，所以我认为使用 Rapha\xc3\xabl 进行路径标准化是明智的。Bug 的解释及其修复在这里： https: //stackoverflow.com/a/13079377/1691517。Rapha\xc3\xabl\的path2curve函数可以轻松地将所有路径命令（也即A，即Arc）转换为标准化形式（即，三次曲线）。很好，Cubics 可以表示所有路径命令！

\n\n\n\n

另一种方法是使用 new Rapha\xc3\xabl，其中 是一个有趣的函数Raphael.path2curve()，它将所有路径命令转换为三次曲线，但它有一些错误。下图直观地显示了该错误：

\n\n

\n\n

功能示例在这里，代码如下：

\n\n

<style>path {fill:none}</style>\n<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>\n<div id="res" style="width:800px"></div>\n<div id="raphael"></div>\n\n<script>\nwindow.onload = function () {\nvar paper = Raphael("raphael", 400, 400);\nvar original_path = "M30 30 S40 23 23 42 L23,42 C113.333,113.333 136.667,113.333 150,80 t40,50 T230,240 q20 20 54 20 s40 23 23 42 t20,30 a20,30 0,0,1 -50,-50";\nvar arr=Raphael.path2curve(original_path);\nvar normalized_path = arr.toString();\n\nvar path1 = paper.path(normalized_path).attr({stroke: "red", "stroke-width":6});\nvar path2 = paper.path(original_path).attr({stroke: "black", "stroke-width":2});\n\ndocument.getElementById("res").innerHTML="ORIGINAL PATH (black):<br>"+original_path+"<br><br>NORMALIZED PATH (red):<br>"+normalized_path;\n}\n</script>\xe2\x80\x8b\n

\n\n

如果能够在 Rapha\xc3\xabl 中进行路径规范化那就太好了，因为它支持大量浏览器并使用数组而不是 DOM 路径段（= 速度和向后兼容性）。我做了一个错误报告。希望它在未来的版本中得到修复。

\n