在Raphael Javascript库中渲染SVG多边形

Question

据我所知,目前无法在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.

任何帮助将不胜感激.谢谢

Answer 1

见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)