SVG元素

SVG（Scalable Vector Graphics，可伸缩矢量图形）

svg画布

<svg width="500" height="50"></svg>

画布的坐标系是左上角是00,向右为x正,向下为y正

创建svg画布

var w = 500;
var h = 50; //以后可以用来居中.attr("cy", h/2)

var svg = d3.select("body")     //选择文档中的body元素
    .append("svg")          //添加一个svg元素
    .attr("width", w)       //设定宽度
    .attr("height", h);    //设定高度

svg元素

<rect x="0" y="0" width="500" height="50"/> //矩形 x y左上角顶点,width height宽高
<circle cx="25" cy="25" r="22" /> //圆 cx xy圆心,r半径
<ellipse cx="250" cy="25" rx="100" ry="25"/> //椭圆 cx cy圆心,rx ry半径
<line x1="0" y1="0" x2="500" y2="50" stroke="black"/>  //线段 x1 y1起点,x2 y2 终点
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"/>  //多线型
<polygon points="200,10 250,190 160,210"/>  //多边形
<path d="M150 0 L75 200 L225 200 Z" style="fill:red"/> //路径
<text x="250" y="25">Easy-peasy</text>  //文本 x文本左上角,y基线位置

path

path 命令
1.移动类
M|moveto| 画笔移动到
2.直线类
L|lineto|连线到<path d="M50,50L100,100">画笔移动到50,50,画直线到100,100
H|horizontal lineto|水平连线到
V|vertical lineto|垂直连线到
3.曲线类
C|curveto|三次贝塞尔曲线经两个指定控制点到达终点目标
S|shorthand/smooth curveto|使用平滑曲线连线到
Q|quadratic bezier curveto|使用二次贝塞尔线连接到
T|shorthand/smooth quadratic bezier curveto|使用平滑的二次贝塞尔曲线连接到
4.弧线类
A|elliptical arc|使用椭圆曲线连接到
5.闭合类
Z|closepath|将路径封闭

样式

样式	描述
fill(颜色名,十六进制,RGBA)	填充
stroke(颜色名,十六进制,RGBA)	描边
stroke-width(像素)	描边宽
stroke-linecap	线头端点的样式圆角/直角
stroke-dasharray	虚线样式
opacity(0~1)	透明度

<text>还是css的基本样式

标记marker

滤镜filter

渐变

参考文献:
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute svg属性