SVG All In One

SVG All In One

show SVG in HTML methods

https://vecta.io/blog/best-way-to-embed-svg

https://css-tricks.com/using-svg/

https://www.sitepoint.com/add-svg-to-web-page/

SVG polygon to path

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2020-01-07
 *
 * @description
 * @augments
 * @example
 * @link
 *
 */

const log = console.log;


function convertPolyToPath1(poly){
  var path = document.createElementNS(poly.ownerSVGElement.namespaceURI,'path');
  var points = poly.getAttribute('points').split(/\s+|,/);
  let x0 = points.shift(), 
      y0 = points.shift();
  var pathdata = 'M'+x0+','+y0+'L'+points.join(' ');
  if (poly.tagName=='polygon') pathdata+='z';
  path.setAttribute('d',pathdata);
  return path;
}

function convertPolyToPath2(poly){
  var path = document.createElementNS(poly.ownerSVGElement.namespaceURI,'path');
  var segs = path.pathSegList;
  var pts  = poly.points;
  for (var i=0,len=pts.numberOfItems;i<len;++i){
    var pt = pts.getItem(i);
    var func = i==0 ? 'createSVGPathSegMovetoAbs' : 'createSVGPathSegLinetoAbs';
    segs.appendItem(path[func](pt.x,pt.y))
  }
  if (poly.tagName=='polygon') segs.appendItem(path.createSVGPathSegClosePath());
  return path;
}



window.addEventListener(`DOMContentLoaded`, () => {
  log(`DOM ready`);
  Array.prototype.forEach.call(document.querySelectorAll('polygon,polyline'),function(poly){
    var path1 = convertPolyToPath1(poly);
    path1.setAttribute('class','cloned1');
    path1.setAttribute('transform','translate(0,3)');
    poly.parentNode.appendChild(path1);
    var path2 = convertPolyToPath2(poly);
    path2.setAttribute('class','cloned2');
    path2.setAttribute('transform','translate(0,6)');
    poly.parentNode.appendChild(path2);
  });
});

demos

refs

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---