在 Raphael Javascript 库中渲染 SVG 多边形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9690241/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rendering SVG polygons in Raphael Javascript library
提问by Munzilla
As far as I know, there is currently no way to display SVG polygons in the Raphael Javascript library. I'm building an application that needs to read in SVGs and them display them in Raphael, however, many of these SVGs use polygons.
据我所知，目前没有办法在 Raphael Javascript 库中显示 SVG 多边形。我正在构建一个需要在 SVG 中读取并在 Raphael 中显示它们的应用程序，但是，其中许多 SVG 使用多边形。
For example, I'm reading in an SVG with a polygon in this format:
例如，我正在阅读具有这种格式的多边形的 SVG：
<polygon points="260.5,627.75 259.563,628.313 258.625,628.563 258.25...
So, I'm wondering...is there a way to convert the polygon points into a path which I could draw in Raphael? I've seen a few applications using python and PHP, but so far I can't find anything that is strictly javascript.
所以，我想知道......有没有办法将多边形点转换为我可以在 Raphael 中绘制的路径？我见过一些使用 python 和 PHP 的应用程序，但到目前为止我找不到任何严格意义上的 javascript。
Any help would be greatly appreciated. Thanks
任何帮助将不胜感激。谢谢
回答by James
See Paper.path. You can specify your own path. E.g. a red triangle:
见Paper.path。您可以指定自己的路径。例如一个红色三角形：
paper.path('M 50 0 L 100 100 L 0 100 Z').attr('fill', 'red')
In response to your edit:
回应您的编辑：
You should be able to take the points attribute, as a string, and replace all coordinates in the format x,ywith L x,y-- that'll make a valid path for SVG. You might want a moveTo command initially though. So, this:
您应该能够将 points 属性作为字符串，并将格式中的所有坐标替换x,y为L x,y-- 这将为 SVG 生成有效路径。不过，您最初可能需要一个 moveTo 命令。所以这：
260.5,627.75 259.563,628.313 258.625,628.563
Would become:
会成为：
M 260.5,627.75 L 259.563,628.313 L 258.625,628.563
Raphael seems to want integers, not decimals. So it would have to be:
拉斐尔似乎想要整数，而不是小数。所以它必须是：
M 260,627 L 259,628 L 258,628
To make this happen:
要做到这一点：
var polygonPoints = '260.5,627.75 259.563,628.313 258.625,628.563';
var convertedPath = polygonPoints.replace(/([0-9.]+),([0-9.]+)/g, function(var pathstr = "M" + yourPolygonElm.getAttribute("points") + "Z";
, x, y) {
return 'L ' + Math.floor(x) + ',' + Math.floor(y) + ' ';
}).replace(/^L/, 'M'); // replace first L with M (moveTo)
回答by Erik Dahlstr?m
The simplest (and most compact) solution is probably something like this, since points in a polygon/polyline are always absolute:
最简单（也是最紧凑）的解决方案可能是这样的，因为多边形/折线中的点总是绝对的：
polygon:
多边形：
var pathstr = "M" + yourPolylineElm.getAttribute("points");
polyline:
折线：
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);
}
This is because "L" is not really needed in the path string (the "d" attribute). "M" means first an absolute moveto, and then all coordinates that follow are implicit absolute linetos (or if you start with "m" then you get relative linetos).
这是因为在路径字符串（“d”属性）中并不真正需要“L”。“M”首先表示绝对移动，然后后面的所有坐标都是隐式绝对线图（或者如果您以“m”开头，则会得到相对线图）。
回答by Abdelali AHBIB
you can use http://readysetraphael.com/to convert the whole SVG file to a raphael object, it's easier!!
您可以使用http://readysetraphael.com/将整个 SVG 文件转换为 raphael 对象，更容易！！
回答by user1971075
i came up with a solution, hope this helps:
我想出了一个解决方案，希望这会有所帮助：
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;
}
回答by Phrogz
If you just want it to work:
如果你只是想让它工作：
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<len;++i){
var pt = pts.getItem(i);
var func = i==0 ? 'createSVGPathSegMovetoAbs' : 'createSVGPathSegLinetoAbs';
segs.appendItem(path[func](pt.x,pt.y))
}
if (poly.tagName=='polygon') segs.appendItem(path.createSVGPathSegClosePath());
poly.parentNode.replaceChild(poly,path);
return path;
}
If you want to roll around in the SVG DOM:
如果你想在 SVG DOM 中滚动：
function svgPolyPointsToPathData(points,closePath){
points = points.split(/\s+|,/);
var pathdata = 'M'+points.shift()+','+points.shift()+'L'+points.join();
if (closePath) pathdata+='z';
return pathdata;
}
Edit: See both of the above in action here:
http://phrogz.net/svg/convert_polys_to_paths.svg
编辑：在此处查看以上两个操作：http:
//phrogz.net/svg/convert_polys_to_paths.svg
Finally, if you have the points as a string (.getAttribute('points')) and just want the path data:
最后，如果您将点作为字符串 ( .getAttribute('points')) 并且只想要路径数据：
