我正在编写一个扩展折线功能的Leaflet插件.在我的插件中,我使用SVGPathSegList接口访问路径段.但根据Chrome DevTools,该界面将在Chrome 48中删除.我正在寻找另一种访问路径段的可能性.

这是我的小提琴.
(function () {
var __onAdd = L.Polyline.prototype.onAdd,
__onRemove = L.Polyline.prototype.onRemove,
__updatePath = L.Polyline.prototype._updatePath,
__bringToFront = L.Polyline.prototype.bringToFront;
L.Polyline.include({
onAdd: function (map) {
__onAdd.call(this, map);
this._textRedraw();
},
onRemove: function (map) {
__onRemove.call(this, map);
},
bringToFront: function () {
__bringToFront.call(this);
this._textRedraw();
},
_textRedraw: function () {
var textNodes = this._path.parentElement.getElementsByTagName('text'),
tnIndex;
if (textNodes.length > 0) {
for (tnIndex = textNodes.length - 1; tnIndex >= 0; tnIndex -= 1) {
textNodes[tnIndex].parentNode.removeChild(textNodes[tnIndex]);
}
}
if (this.options.measurements) {
this.setText();
}
}, …Run Code Online (Sandbox Code Playgroud) 我想用变量替换SVG路径中的坐标.(用javascript).虽然svg路径可以是多种类型,但在一个具体的例子上获得一些支持会有很大的帮助:
d = "M27,0C27,21,4,34,-13,23C22,18,-27,9,-27,0";
Run Code Online (Sandbox Code Playgroud)
我希望将此SVG路径转换为
var x = [];
var x[0] = 27; x[1] = ...
d = "M + x[0] + "," + y[0]
+ "C"
+ x[0] + "," + y[0] + ","
+ x[1] + "," + y[1] + ","
+ x[2] + "," + y[2] + ","
+ "C"
+ x[3] + "," + y[3] + ","
+ x[4] + "," + y[4] + ","
+ x[5] + "," + y[5];
Run Code Online (Sandbox Code Playgroud)
所以我的问题是找到合适的javascript RegExp来提取所有变量,并使用它生成给定的SVG路径.
我实际上做的是创建一个代表给定svg的Javascript对象,我希望能够单独设置坐标.
任何帮助高度赞赏
thx,马丁 …
免责声明:这是我对矢量图形的第一种方法;)
我正在写一个网络应用程序,用户上传一些图像(组成一个图纸),他应该上传一个矢量图像(SVG)作为'掩码'.
我正在使用Paper.js库.
因此,我的目标是阅读SVG并创建一个paper.js PathItem来表示它(然后添加fillcolor,无论如何).
我尝试了一个简单的形状:

在SVG中看起来像:
// Adobe Illustrator
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<polygon fill="none" stroke="#000000" points="48.771,12.137 59.323,33.518 82.919,36.947 65.845,53.59 69.875,77.09 48.771,65.994
27.667,77.09 31.697,53.59 14.623,36.947 38.219,33.518 "/>
</svg>
// Inkscape pure svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?> …Run Code Online (Sandbox Code Playgroud)