如何规范化SVG路径数据（跨浏览器）？ [英] How to normalize SVG path data (cross browser)?

问题描述

我试图找到一种实现跨浏览器路径规范化器的方法。有一种本地方式可以在，代码如下：

 < style> path {fill：none}< / style> 
< script src =http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js>< / script> 
< div id =resstyle =width：800px>< / div> 
< div id =raphael>< / div> 
 
< script> 
 window.onload = function（）{
 var paper = Raphael（raphael，400,400）; 
 var 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; 
 var arr = Raphael.path2curve（original_path）; 
 var normalized_pa​​th = arr.toString（）; 
 
 var path1 = paper.path（normalized_pa​​th）.attr（{stroke：red，stroke-width：6}）; 
 var path2 = paper.path（original_path）.attr（{stroke：black，stroke-width：2}）; 
 
 document.getElementById（res）。innerHTML =ORIGINAL PATH（黑色）：< br>+ original_path +< br>< br> NORMALIZED PATH（红色）：< BR>中+ normalized_pa​​th; 
} 
< / script> 
  

这将是非常好的可以在Raphaël中进行路径规范化，因为它支持大量浏览器并使用数组而不是DOM路径段（=速度和向后兼容性）。我制作了错误报告。希望它在未来的版本中得到修复。

I have tried to find a way to implement cross browser path normalizer. There IS a native way which is described here and functional example is here, but it works only in newest Opera (but not in IE, FF, Safari, Chrome).

The native way uses pathElm.normalizedPathSegList and it converts all relative coordinates to absolute ones and represents all path segment types as a following subset of types: M,L,C,z.

I have found only one javascript code and jsfiddled functional example of it, but it works only in IE and FF. Chrome gives "Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1". How this could be fixed to work also in Opera, Safari and Chrome or is there any other way for normalizing SVG paths?

解决方案

EDIT: I got the Raphaël bug fixed and made thorough testing with animated and non-animated complex paths, so I think it is wise to use Raphaël for path normalization. The explanation of bug and it's fix is here: https://stackoverflow.com/a/13079377/1691517. The Raphaël's path2curve function can easily convert all path commands (also A ie Arc) to normalized form (ie Cubic curves). It's nice, that Cubics can represent all path commands!

---

The other way is to use new Raphaël, where is an interesting function Raphael.path2curve(), which converts all path commands to Cubic curves, but it has some bug. The following image visualizes the bug:

The functional example is here and the code is as follows:

<style>path {fill:none}</style>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<div id="res" style="width:800px"></div>
<div id="raphael"></div>

<script>
window.onload = function () {
var paper = Raphael("raphael", 400, 400);
var 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";
var arr=Raphael.path2curve(original_path);
var normalized_path = arr.toString();

var path1 = paper.path(normalized_path).attr({stroke: "red", "stroke-width":6});
var path2 = paper.path(original_path).attr({stroke: "black", "stroke-width":2});

document.getElementById("res").innerHTML="ORIGINAL PATH (black):<br>"+original_path+"<br><br>NORMALIZED PATH (red):<br>"+normalized_path;
}
</script>​

It would be very nice to could make a path normalization in Raphaël, because it supports large amount of browsers and uses arrays instead of DOM path segments (= speed and backward compatibility). I made a bug report. Hope it is fixed in some future release.

这篇关于如何规范化SVG路径数据（跨浏览器）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！