svg-path详解

2018/12/03 前端 JavaScript svg

一、svg的命令

M = moveto // m 50 20 =》以（50,20）位置为起始点
L = lineto // m 50 20 l 20 50 =》从（50,20）到（20,50）作直线
H = horizontal lineto // m 50 20 h 50 =》从（50,20）到（50,50）绘制一条平行线
V = vertical lineto // m 50 20 v 50 =》从（50,20）到（100,20）绘制一条垂直线
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath // 结束路径，回到原点

注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

二、svg的语法

d 引出路径

1	`<path d="M10 10 H 90 V 90 M100 100 H 180 V 180 H 100" stroke="blue" stroke-width="2" />`

d 以M绝对定位开头，则后面的m相对于前一个M/m

示例：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
    <path d="M20 20 m 0 0 h 320 m -320 0 m 0 20 h 320 m -320  0 m 0 20 h 320" stroke="blue" stroke-width="2" />
svg>

解析：

M 20 20是第一个起始点
m 0 0相对于M 20 20
m -320 0 相对于 m 0 0
以此类推…

三、js动态添加svg的

let nameSpace = 'http://www.w3.org/2000/svg'; //定义命名空间
var barChart = document.createElementNS(nameSpace,'svg'); //在html里定义一个svg
barChart.setAttribute('width', barChartWidth); //添加长宽
barChart.setAttribute('height', barChartHeight);
let svgWrap = document.querySelector("#svg-wrapper"); //在id名为svg-wrapper的div里添加此svg
svgWrap.appendChild(barChart);
//水平分区线
let hSectionLine = document.createElementNS(nameSpace, "path"); //在svg里添加一个path
let hSectionLinePath = ""; 
for (let i = 0; i < vScaleNum; i++) {
    hSectionLinePath = hSectionLinePath + " m 0" + (-vScaleSpacing * radtio) + " h " + hLength + " m " + (-hLength) + " 0";
} // 得到的是一个累加的多重定向path
let hSectionLinesPath = zeroPoint + hSectionLinePath;
console.log(hSectionLinesPath); // 类似M20 20 m 0 0 h 320 m -320 0 m 0 20 h 320 m -320  0 m 0 20 h 320
hSectionLine.setAttribute("d", hSectionLinesPath);  //给path新增一个属性，即路径d
hSectionLine.setAttribute("stroke", hSectionLineColor); //给path一个颜色
barChart.appendChild(hSectionLine); //添加至svg节点里

前端琐碎知识点链接整理

计算机技术与科学系列笔记

本文作者：bbcfive

一、svg的 命令

二、svg的 语法

三、js动态添加svg的

一、svg的命令

二、svg的语法