一、内置图形:
rect(矩形)
circle(圆)
ellipse(椭圆)
line(直线)
polyline(折线)
polygon(多边形)
path(路径)
二、内置图形的html属性或(css样式):
fill(填充颜色)
fill-opacity(填充透明度)
stroke(边框颜色)
stroke-width(边框宽度)
stroke-opacity(边框透明度)
stroke-dasharray(创建虚线)
transform(变换)
filter(滤镜)(url[#滤镜id)]
三、常见图形用法
1、矩形
基本用法
<rect x="0" y="0" width="100" height="100" fill="#f06"/>
<!--x表示横坐标,y表示纵坐标,width表示宽,height表示高-->
扩展用法
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/>
<rect x="50" y="20" width="150" height="150"
fill="red" stroke="blue" stroke-width="20" fill-opacity="1" stroke-opacity="0.1"/>
2、圆
基本用法
<circle cx="100" cy="50" r="100" fil='#f06'/>
<!-- cx表示圆心横坐标,cy表示圆心纵坐标,r表示半径 -->
扩展用法
<circle cx="100" cy="50" r="40"
style="stroke:blue;stroke-width:10;fill:pink"/>
<circle cx="100" cy="50" r="40"
stroke="black" stroke-width="2" fill="red"/>
3、椭圆
基本用法
<ellipse cx="300" cy="80" rx="150" ry="100" fill='#f06'/>
<!-- cx表示圆心横坐标,cy表示圆心纵坐标,rx表示横向半径,ry表示纵向半径 -->
扩展用法
<ellipse cx="300" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2" />
<ellipse cx="300" cy="80" rx="100" ry="50"
fill="pink" stroke="red" stroke-width="2"/>
4、直线
基本用法
<line x1="0" y1="100" x2="100" y2="0"/>
<!-- x1起点横坐标,y1表示起点纵坐标,x2表示终点横坐标,y2表示终点纵坐标 -->
扩展用法
<line x1="0" y1="0" x2="200" y2="200"
style="stroke:rgb(255,0,0);stroke-width:2"/>
<line x1="0" y1="0" x2="200" y2="200"
stroke="red" stroke-width="10"/>
5、多边形
基本用法
<polygon points="50,0 60,40 100,50 60,60 50,100 40,60 0,50 40,40" fill='#f06'/>
<!-- 200,10为第一个点 250,190为第二个点 160,210为第三个点 -->
扩展坐标
<polygon points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1" />
<polygon points="200,10 250,190 160,210"
fill="red" stroke="blue" stroke-width="1" />
第一个点和最后一个点会连接起来,形成闭合的图形
6、折线
基本用法
<polyline points="50,0 60,40 100,50 60,60 50,100 40,60 0,50 40,40" fill='#f06'/>
扩展用法
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
style="fill:none;stroke:red;stroke-width:4" />
<!--此处将fill设置为none,可以仅仅画曲线,而如果fill有值,则会形成由曲线围城的多边形-->
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
style="fill:blue;stroke:red;stroke-width:4" />
第一个点不会和最后一个点连起来,不会闭合
7、路径
路径是svg中最强大的图形
路径是由一系列命令所组成。
命令 名称 参数
M moveto 移动到 (x y)+
Z closepath 关闭路径 (none)
L lineto 画线到 (x y)+
H horizontal lineto 水平线到 x+
V vertical lineto 垂直线到 y+
A elliptical arc椭圆弧 (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
C curveto 三次贝塞尔曲线到 (x1 y1 x2 y2 x y)+
S smooth curveto光滑三次贝塞尔曲线到 (x2 y2 x y)+
Q Bézier curveto二次贝塞尔曲线到 (x1 y1 x y)+
T smooth Bézier curveto光滑二次贝塞尔曲线到 (x y)+
如果指令字母是大写的,例如M, 则表示坐标位置是绝对位置;如果指令字母小写的,例如m, 则表示坐标位置是相对位置。
基本用法
<path d="M150 0 L75 200 L225 200 Z" />
<!-- d属性中包含所有路径的点,最后起点和终点连接起来形成闭合图形 -->
扩展用法
<path d="M150 0 L75 200 L225 200 Z"
fill="red" stroke="blue" stroke-width="10"/>
图片描述
7.1、贝塞尔曲线(CSQT简称“厕所切图”)
(1)、三次贝塞尔曲线
Cx1 y1, x2 y2, x y
x1,y1 和x2,y2分别为控制点1和2,而x,y为曲线上的关键点
图片描述
下面为曲线上的点随着时间的变化而变化的过程。
<path d="M20 20 C90 140,130 140,200 25" stroke="#000000" fill="none" style="stroke-width: 2px;"/>
(2)、光滑三次贝塞尔曲线
Sx2 y2, x y
S指令跟在C指令或S指令后面补刀,它会自动在C、S基础上生成一个对称点,所以S指令只需要两个点就可以。
<path d="M20 80 C90 140, 130 140, 180 80 S250 60, 280 120" stroke="#000000" fill="none" style="stroke-width: 2px;"/>
<path d="M20 80 C90 140, 130 140, 180 80 S250 60, 280 120 S380 150, 450 80" stroke="#000000" fill="none" style="stroke-width: 2px;"/>
<path d="M20 80 S80 150, 150 80" stroke="#000000" fill="none" style="stroke-width: 2px;"/>
(3)、二次贝塞尔曲线
Qx1 y1, x y
(x1,y1)是控制点,(x,y)表示的是曲线的终点。
下面为曲线上的点随着时间的变化而变化的过程。
<path d="M20 80 Q90 140, 130 80" stroke="#000000" fill="none" style="stroke-width: 2px;"/>
(4)、光滑二次贝塞尔曲线
Tx y
T指令和S指令类似,是给Q、T指令补刀的,T指令只有一个曲线终点,没有控制点(由Q的对称点自动生成);
也可以单独使用,当单独使用时,是一条直线;
<path d="M20 80 Q90 140, 130 80 T250 140 T350 40 " stroke="#000000" fill="none" style="stroke-width: 2px;"/>
<path d="M20 80 T350 140 " stroke="#000000" fill="none" style="stroke-width: 2px;"/>
7.2、圆弧
A rx ry x-deg large-arc sweep-flag x y
rx ry表示x轴半径和y轴半径,x-deg表示x轴旋转角度,large-arc表示大于180度还是小于180度(0为小,1为大),sweep-flag表示弧线方向(0为沿逆时针,1为沿顺时针),x y为最终坐标。
<path d="M80 80 A45 45, 0, 0, 0, 125 125" fill="green" />
8、文本
基本用法
<text x="10" y="15">I love SVG</text>
扩展用法
<text x="0" y="15"
fill="red" transform="rotate(30 20,40)">I love SVG</text>
<a xlink:href="http://www.w3schools.com/svg/" target="_blank">
<text x="0" y="15" fill="red">I love SVG</text>
</a>
<text x="200" y="150" dx="-5" dy="5" rotate="180" textLength="90">
i LOVE d3
</text>
<!-- dx,dy表示平移的距离 -->
<text x="200" y="150" dx="-5" dy="5" rotate="180" textLength="90">
I LOVE <tspan fill="red">D3</tspan>
</text>
<!-- 使用tspan对文本中的部分特殊定义 -->
沿path方向排列文本textPath
<path id="wavyPath" d="M75,100 a50,25 0 1,0 50,25" fill="none" />
<text x="50" y="50" font-size="14">
<textPath xlink:href="#wavyPath">
Text travels along any path that you define for it.
</textPath>
</text>
9、渐变
分为线形渐变和径向渐变
<defs>
<linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%"> <!--x1,y1 x2,y2用来定义径向渐变的方向,此处为向右-->
<stop offset="0%" stop-color="blue">
<stop offset="100%" stop-color="red">
</linearGradient>
<radialGradient id="irisGradient">
<stop offset="25%" stop-color="green" />
<stop offset="100%" stop-color="dodgerblue" />
</radialGradient>
</defs>
<rect fill="url(#myGradient)" x1="10" y1="10" width="300" height="100"/>
10、定义和分组
定义可重用部件
<defs></defs>
使用g分组,或定义统一的样式。
<g></g>
使用<use xlink:href="#lens" />引用在defs中定义的元素,还可在use上设置fill,stroke等属性。
<svg width="600" height="600" xmlns="http://www.w3.org/2000/svg">
<defs>
<polygon id="lens" points="65,50 185,50 185,75, 150,100 100,100 65,75" fill="red" stroke="purple" stroke-width="4" />
<radialGradient id="irisGradient">
<stop offset="25%" stop-color="green" />
<stop offset="100%" stop-color="dodgerblue" />
</radialGradient>
<g id="eye">
<ellipse cy="50" rx="50" ry="25" fill="none" stroke="black" />
<circle cy="50" r="25" />
<circle cy="50" r="10" fill="black" />
</g>
</defs>
<g stroke="red" stroke-width="3">
<ellipse cx="125" cy="50" rx="50" ry="25" fill="none" stroke="black" />
<circle cx="125" cy="50" r="25" fill="url(#irisGradient)" />
<circle cx="125" cy="50" r="10" fill="black" />
<use xlink:href="#eye" x="250" fill="dodgerblue" />
</g>
</svg>
11、动画和交互性
动画被弃用,请使用css animations或者web animations代替
12、事件
最常用的是 onclick、onactivate、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onload、onresize、 onunload 和 onrepeat。
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="120" height="120" viewBox="0 0 120 120"
version="1.1">
<polygon points="60,30 90,90 30,90" id="svg_polygon">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 60 70" to="360 60 70" dur="10s" repeatCount="indefinite"/>
</polygon>
</svg>
<script>
//svg_hexagon为path的id
document.getElementById("svg_polygon").addEventListener("click", function() {
//todo
});
</script>
四、好用的svg库
1、svg.js
svg.js更加接近原生svg语法,可以直观的操作svg。svg.js更快,兼容性好,上手更方便。
2、Snap.svg
Snap.svg更接近jquery的语法,来操作svg。Snap.svg更全,功能丰富。