在Raphael Javascript库中渲染SVG多边形 [英] Rendering SVG polygons in Raphael Javascript library

问题描述

据我所知，目前无法在Raphael Javascript库中显示SVG多边形。我正在构建一个需要读取SVG并在Raphael中显示它们的应用程序，但是，这些SVG中的许多都使用多边形。

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.

例如，我正在阅读在具有此格式的多边形的SVG中：

For example, I'm reading in an SVG with a polygon in this format:

<polygon points="260.5,627.75 259.563,628.313 258.625,628.563 258.25...

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

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.

非常感谢任何帮助。
谢谢

Any help would be greatly appreciated. Thanks

推荐答案

参见 Paper.path 。您可以指定自己的路径。例如红色三角形：

See Paper.path. You can specify your own path. E.g. a red triangle:

paper.path('M 50 0 L 100 100 L 0 100 Z').attr('fill', 'red')

响应您的编辑 ：

In response to your edit:

您应该能够将points属性作为字符串取代并替换所有坐标格式为 x，y ， L x，y - 这将为SVG创建有效路径。您最初可能需要moveTo命令。所以，这个：

You should be able to take the points attribute, as a string, and replace all coordinates in the format x,y with L x,y -- that'll make a valid path for SVG. You might want a moveTo command initially though. So, this:

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

Raphael似乎想要整数，而不是小数。所以它必须是：

Raphael seems to want integers, not decimals. So it would have to be:

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)

这篇关于在Raphael Javascript库中渲染SVG多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！