svg : polygon & polyline to path 演示
【说明】polygon 和 polyline 都是 svg 基本图形标签，前者用于绘制多边形，后者绘制折线，二者均使用点集 points 描述元素样式，点集即为{xy}坐标集合。转为 d 路径，实现方法之一是将点集放入数组，然后赋值给M、A（a）指令，polygon 是多边形闭合路径，末尾加个 z 即可。
<style>
.mysvg { border: 1px solid gray; fill: none; stroke: steelblue; }
</style>
<svg class="mysvg" width="200" height="200">
<polygon id="Poly" points="100 10, 40 190, 190 120, 180 60"></polygon>
</svg>
<svg class="mysvg" width="200" height="200">
<path id="cPath" d="M10 100 H190"></path>
</svg>
<div id="pathMsg"></div>
<script>
let createPath = (ele) => {
let path = 'M';
let points = Poly.getAttribute('points');
let ar = points.replace(/[^\d.]/g, ',').split(',').filter(Number);
for(j = 0; j < ar.length; j ++) {
if(j <= 1) {
path += ar[j] + ' ';
}else{
path += j % 2 === 0 ? 'L' + ar[j] + ' ' : ar[j];
}
}
path += ele.tagName.toLowerCase() === 'polygon' ? 'z' : '';
return path;
};
cPath.setAttribute('d',createPath(Poly));
pathMsg.innerText = createPath(Poly);
</script>
发表评论:
评论列表 [0条]
