相关疑难解决方法(0)

不推荐使用的SVG pathSegList的替代方案

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

Chrome DevTools通知

这是我的小提琴.

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

html javascript svg

23
推荐指数
1
解决办法
9737
查看次数

使用javascript从任意SVG路径中提取x,y坐标

我想用变量替换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,马丁 …

javascript regex svg

9
推荐指数
1
解决办法
1万
查看次数

从SVG创建Paper.js PathItem

免责声明:这是我对矢量图形的第一种方法;)

我正在写一个网络应用程序,用户上传一些图像(组成一个图纸),他应该上传一个矢量图像(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)

javascript svg vector-graphics html5-canvas paperjs

1
推荐指数
1
解决办法
5490
查看次数

标签 统计

javascript ×3

svg ×3

html ×1

html5-canvas ×1

paperjs ×1

regex ×1

vector-graphics ×1