在Raphael Javascript库中渲染SVG多边形
据我所知，目前无法在Raphael Javascript库中显示SVG多边形。 我正在构建一个需要读入SVG的应用程序，并在Raphael中显示它们，但是，许多这些SVG使用多边形。
例如，我正在使用以下格式的多边形读取SVG：
<polygon points="260.5,627.75 259.563,628.313 258.625,628.563 258.25... 所以，我想知道……有没有办法将多边形点转换成我可以在拉斐尔绘制的路径？ 我见过一些使用python和PHP的应用程序，但到目前为止我找不到任何严格的javascript。
任何帮助将不胜感激。 谢谢
请参阅Paper.path 。 您可以指定自己的路径。 例如红色三角形：
paper.path('M 50 0 L 100 100 L 0 100 Z').attr('fill', 'red')
为了回应您的编辑 ：
您应该能够将points属性作为字符串，并将x,y格式的所有坐标替换为L x,y – 这将为SVG创建有效路径。 您最初可能需要moveTo命令。 所以这：
260.5,627.75 259.563,628.313 258.625,628.563
会成为：
M 260.5,627.75 L 259.563,628.313 L 258.625,628.563
拉斐尔似乎想要整数，而不是小数。 所以它必须是：
M 260,627 L 259,628 L 258,628
要做到这一点：
var polygonPoints = '260.5,627.75 259.563,628.313 258.625,628.563'; var convertedPath = polygonPoints.replace(/([0-9.]+),([0-9.]+)/g, function($0, x, y) { return 'L ' + Math.floor(x) + ',' + Math.floor(y) + ' '; }).replace(/^L/, 'M'); // replace first L with M (moveTo)
最简单（也是最紧凑）的解决方案可能是这样的，因为多边形/折线中的点始终是绝对的：
多边形：
var pathstr = "M" + yourPolygonElm.getAttribute("points") + "Z";
折线：
var pathstr = "M" + yourPolylineElm.getAttribute("points");
这是因为路径字符串中不需要“L”（“d”属性）。 “M”表示首先是绝对移动，然后所有坐标都是隐式绝对线条（或者如果以“m”开头，则得到相对的线条）。
您可以使用http://readysetraphael.com/将整个SVG文件转换为raphael对象，它更容易！
如果你只是想让它起作用：
var polys = document.querySelectorAll('polygon,polyline'); Array.prototype.forEach.call(polys,convertPolyToPath); function convertPolyToPath(poly){ var path = document.createElementNS('http://www.w3.org/2000/svg','path'); var points = poly.getAttribute('points').split(/\s+|,/); var x0=points.shift(), y0=points.shift(); var pathdata = 'M'+x0+','+y0+'L'+points.join(); if (poly.tagName=='polygon') pathdata+='z'; path.setAttribute('d',pathdata); poly.parentNode.replaceChild(poly,path); return path; }
如果你想在SVG DOM中滚动：
function convertPolyToPath(poly){ var path = document.createElementNS(poly.ownerSVGElement.namespaceURI,'path'); var segs = path.pathSegList; var pts = poly.points; for (var i=0,len=pts.numberOfItems;i
编辑 ：在此处查看以上两个操作：
http://phrogz.net/svg/convert_polys_to_paths.svg
最后，如果您将点作为字符串（ .getAttribute('points') ）并且只想要路径数据：
function svgPolyPointsToPathData(points,closePath){ points = points.split(/\s+|,/); var pathdata = 'M'+points.shift()+','+points.shift()+'L'+points.join(); if (closePath) pathdata+='z'; return pathdata; }
我提出了一个解决方案，希望这会有所帮助：
this.createPolygon(304,0,0,500,912,500,608,0,'red'); createPolygon: function(x1,y1,x2,y2,x3,y3,x4,y4,color){ return this.stage.path('M '+x1+' '+y1+' L '+x2+' '+y2+' L '+x3+' '+y3+' L '+x4+' '+y4+' Z').attr('fill',color); }