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属性