javascript - 在 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...

所以，我想知道...有没有办法将多边形点转换成我可以在 Raphael 中绘制的路径？我见过一些使用 python 和 PHP 的应用程序，但到目前为止我找不到任何严格意义上的 javascript。

如有任何帮助，我们将不胜感激。谢谢

Answer 1

参见 Paper.path .您可以指定自己的路径。例如。一个红色三 Angular 形:

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)