SVG
可缩放矢量图形(Scalable Vector Graphics),是用于描述二维矢量图形的一种图形格式,除了IE8之前的版本外,绝大部分浏览器都支持SVG
- width: svg宽度
- height: svg高度
- viewBox: viewBox属性的值是由空格和/或逗号分隔的四个数字min-x,min-y,width和height的列表,它们在用户空间中指定一个矩形,该矩形映射到已建立的视口的边界
- version: 表示svg的版本号,1.1版本是2003年确立的W3C标准,也是最新版本
<svg width="100%" height="400" viewBox="0 0 400 400" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
矩形
参数有6个
- x: 矩形左上角x坐标
- y: 矩形左上角y坐标
- width: 矩形的宽度
- height: 矩形的高度
- rx: 对于圆角矩形在x方向的半径
- ry: 对于圆角矩形在y方向的半径
<rect x="20" y="20" width="200" height="100" style="fill:yellow; stroke:black; stroke-width:4; opacity: 0.5;" />
<rect x="250" y="20" width="200" height="100" rx="50" ry="50" style="fill:blue; stroke:black; stroke-width:4;" />
圆形和椭圆形
圆形的参数
- cx: 圆心的x坐标
- cy: 圆心的y坐标
- r: 圆心的半径
椭圆的参数与圆形类似,只是半径分为水平半径和垂直半径
- cx: 圆心的x坐标
- cy: 圆心的y坐标
- rx: 椭圆的水平半径
- ry: 椭圆的垂直半径
<circle cx="120" cy="228" r="100" style="fill:green; stroke:black; stroke-width:4px;" />
<ellipse cx="350" cy="228" rx="100" ry="60" style="fill:red; stroke:black; stroke-width:4px;" />
线段
线段的参数是起点和终点的坐标
- x1: 起点的x坐标
- y1: 起点的y坐标
- x2: 终点的x坐标
- y2: 终点的y坐标
<line x1="20" y1="400" x2="200" y2="460" style="stroke:black; stroke-width:4;" />
多边形和折线
多边形和折线的参数是一样的,都只有一个points参数,这个参数的值是一系列的点的坐标。不同之处是多边形会将重点和起点连接起来,而折线不连接。
<!--多边形-->
<polygon points="20,600,100,600,100,500,60,500" style="fill:LawnGreen; stroke:black; stroke-width:3" />
<!--折线-->
<polyline points="20,600,100,600,100,500,60,500" style=" fill: none; stroke:black; stroke-width:3;" transform="translate(200,0)" />
路径
移动类
- M = moveto:将画笔移动到指定坐标
直线类
- L = lineto:画直线到指定坐标
- H = horizontal lineto:画水平直线到指定坐标
- V = vertical lineto:换垂直直线到指定坐标
<path d="M30,100L270,300M30,100H270M30,100V300" style="stroke:black; stroke-width:3;" transform="translate(500,0)" />
曲线类
- C = curveto:画三次贝塞尔曲线经两个指定控制点到达终点坐标
- S = shorthand/smooth curveto: 与前一条三次贝塞尔曲线相连,第一个控制点为前一条曲线第二个控制点的对称点,只需输入第二个控制点和终点,即可绘制一个三次贝塞尔曲线
- Q = quadratic Bezier curveto: 画二次贝塞尔曲线经过一个指定控制点到达终点坐标
- T = Shorthand/smooth quadratic Bezier curveto: 与前一条二次贝塞尔曲线相连,控制点为前一条二次贝塞尔曲线控制点的对称点,只需输入终点,即可绘制一个二次贝塞尔曲线
<!--三次贝塞尔曲线-->
<path d="M30,100 C100,20 190,20 270,100 S400,180 450,100" style="fill:none; stroke:black; stroke-width:3;" transform="translate(500,300)" />
<!--二次别赛尔曲线-->
<path d="M30,100 Q190,20 270,100 T450,100" style="fill:none; stroke:black; stroke-width:3;" transform="translate(500,400)" />
弧线类
-
A = elliptical arc:画椭圆曲线到指定坐标
A(rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y)
- rx: 椭圆x方向的半轴大小
- ry: 椭圆y方向的半轴大小
- x-axis-rotation: 椭圆的x轴与水平轴顺时针方向的夹角
- large-arc-flag: 有两个值(1: 大角度弧线、 0: 小角度弧线)
- sweep-flag: 有两个值(1: 顺时针至终点、 0: 逆时针至终点)
- x: 终点x坐标
- y: 终点y坐标
闭合类
- Z = closepath: 绘制一条直线链接终点和起点,用来封闭图形
<path d="M30,100 a150,200 0 1,0 30,-100 Z" transform="translate(20,700)" style="fill:yellow; stroke:black; stroke-width:3;" />
文字
在svg中可以使用
标签绘制文字,其属性如下
- x: 文字位置的x坐标
- y: 文字位置的y坐标
- dx: 相对于当前位置在x方向上平移的距离(值为正往右,负则往左)
- dy: 相对于当前位置在y方向上平移的距离(值为正往下,负则往上)
<text x="500" y="600" dx="20" dy="0" rotate="30" textLength="380" style="font-size: 20px;">I love you <tspan fill="#f00" style="font-size:50px;" rotate="0"> Hehe</tspan></text>
汇总
<svg width="100%" height="2000" version="1.1" xmlns="http://www.w3.org/2000/svg">
<!--矩形-->
<rect x="20" y="20" width="200" height="100" style="fill:yellow; stroke:black; stroke-width:4; opacity: 0.5;" />
<rect x="250" y="20" width="200" height="100" rx="50" ry="50" style="fill:blue; stroke:black; stroke-width:4;" />
<!--圆形和椭圆-->
<circle cx="120" cy="228" r="100" style="fill:green; stroke:black; stroke-width:4px;" />
<ellipse cx="350" cy="228" rx="100" ry="60" style="fill:red; stroke:black; stroke-width:4px;" />
<!--线段-->
<line x1="20" y1="400" x2="200" y2="460" style="stroke:black; stroke-width:4;" />
<!--多边形和折线-->
<polygon points="20,600,100,600,100,500,60,500" style="fill:LawnGreen; stroke:black; stroke-width:3" />
<polyline points="20,600,100,600,100,500,60,500" style=" fill: none; stroke:black; stroke-width:3;" transform="translate(200,0)" />
<!--路径-->
<path d="M30,100L270,300M30,100H270M30,100V300" style="stroke:black; stroke-width:3;" transform="translate(500,0)" />
<!--三次贝塞尔曲线-->
<path d="M30,100 C100,20 190,20 270,100 S400,180 450,100" style="fill:none; stroke:black; stroke-width:3;" transform="translate(500,300)" />
<!--二次别赛尔曲线-->
<path d="M30,100 Q190,20 270,100 T450,100" style="fill:none; stroke:black; stroke-width:3;" transform="translate(500,400)" />
<!--绘制弧线-->
<path d="M30,100 a150,200 0 1,0 30,-100 Z" transform="translate(20,700)" style="fill:yellow; stroke:black; stroke-width:3;" />
<!--文字-->
<text x="500" y="600" dx="20" dy="0" rotate="30" textLength="380" style="font-size: 20px;">I love you <tspan fill="#f00" style="font-size:50px;" rotate="0"> Hehe</tspan></text>
</svg>
标记、滤镜、渐变
都是写在<defs></defs>中
<svg width="100%" height="2000" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrow" markerUnits="strokeWidth" makerWidth="12" makerHeight="12" viewBox="0 0 12 12" refX="6" refY="6" orient="auto">
<path d="M0,0 L12,6 L0,12 L6,6 L0,0" style="fill:#000000;" />
</marker>
<filter id="GaussuanBlur">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
</filter>
<linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#f00" />
<stop offset="100%" stop-color="#ff0" />
</linearGradient>
<linearGradient id="myGradient2" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f00" />
<stop offset="100%" stop-color="#ff0" />
</linearGradient>
<radialGradient id="MyGradient3">
<stop offset="10%" stop-color="gold"/>
<stop offset="95%" stop-color="green"/>
</radialGradient>
</defs>
<line x1="0" y1="0" x2="200" y2="50" stroke="red" stroke-width="10" marker-end="url(#arrow)" />
<path d="M20,70 Q40,50 80,100 T160,80 T200,90 T300,150" fill="none" stroke="red" stroke-width="5" marker-start="url(#arrow)" marker-mid="url(#arrow)" marker-end="url(#arrow)" transform="translate(0,100)" />
<rect x="100" y="100" width="150" height="100" fill="blue" filter="url(#GaussuanBlur)" transform="translate(20,300)" />
<rect x="100" y="220" width="150" height="100" fill="url(#myGradient)" transform="translate(20,300)" />
<rect x="100" y="220" width="150" height="100" fill="url(#myGradient2)" transform="translate(20,440)" />
<circle r="100" cx="250" cy="250" fill="url(#MyGradient3)" transform="translate(20,700)" />
</svg>