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);
});
});
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！