svg 到 svg 折线的路径答案

【问题标题】：svg path to svg polylinesvg 到 svg 折线的路径
【发布时间】：2011-10-13 10:32:27
【问题描述】：

我需要知道是否可以将 svg 路径转换为 svg 折线。
我找到了javascript code which convert a path to a polygon：

function pathToPolygon(path,samples){
  if (!samples) samples = 0;
  var doc = path.ownerDocument;
  var poly = doc.createElementNS('http://www.w3.org/2000/svg','polygon');

  // Put all path segments in a queue
  for (var segs=[],s=path.pathSegList,i=s.numberOfItems-1;i>=0;--i) segs[i] = s.getItem(i);
  var segments = segs.concat();

  var seg,lastSeg,points=[],x,y;
  var addSegmentPoint = function(s){
    if (s.pathSegType == SVGPathSeg.PATHSEG_CLOSEPATH){

    }else{
      if (s.pathSegType%2==1 && s.pathSegType>1){
        // All odd-numbered path types are relative, except PATHSEG_CLOSEPATH (1)
        x+=s.x; y+=s.y;
      }else{
        x=s.x; y=s.y;
      }
      var lastPoint = points[points.length-1];
      if (!lastPoint || x!=lastPoint[0] || y!=lastPoint[1]) points.push([x,y]);
    }
  };
  for (var d=0,len=path.getTotalLength(),step=len/samples;d<=len;d+=step){
    var seg = segments[path.getPathSegAtLength(d)];
    var pt = path.getPointAtLength(d);
    if (seg != lastSeg){
      lastSeg = seg;
      while (segs.length && segs[0]!=seg) addSegmentPoint( segs.shift() );
    }
    var lastPoint = points[points.length-1];
    if (!lastPoint || pt.x!=lastPoint[0] || pt.y!=lastPoint[1]) points.push([pt.x,pt.y]);
  }
  for (var i=0,len=segs.length;i<len;++i) addSegmentPoint(segs[i]);
  for (var i=0,len=points.length;i<len;++i) points[i] = points[i].join(',');
  poly.setAttribute('points',points.join(' '));
  return poly;
}

我是 js 的初学者，不明白这一行： var seg,lastSeg,points=[],x,y;

它工作得很好，但它在路径线周围画了一个框架。但我不想要一个框架，我想将路径转换为点集，折线。可能吗谢谢

【问题讨论】：

我正在寻找直接使用路径，目前不是很重要。谢谢
我了解到，路径无法转换为折线，因为路径不像我以前认为的那样提供线。 svg 文档中的路径描述了一个“区域”。所以它只能被翻译成多边形。

标签： javascript path svg polygon polyline

【解决方案1】：

折线是一个未闭合的多边形，可以有在同一点开始和结束的折线，这使得它们等于一个多边形。

虽然路径有点列表，但您可以指定这些点是用直线还是其他各种曲线链接。

我对你的问题有点困惑：“它工作得很好，但它在路径线周围画了一个框架。但我不想要一个框架”

我认为这里的问题是一些样式属性而不是对象的类型。

【讨论】：