svg 第一个实例
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
svg reference
https://developer.mozilla.org/en-US/docs/Web/SVG
svg 简介
SVG 有一些预定义的形状元素，可被开发者使用和操作：
画布<svg>
矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>
组<g>,<defs>
图片<image>
描述<title>, <desc>
文本<text>
SVG绘制基本图形
<svg width="100%" height="180px" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<!--画四边形-->
<rect x="10" y="10" width="80" height="40" rx="20" ry="10" stroke="red" fill="#EEE" stroke-width="3"></rect>
<!-- x 为四边形左上角距容器元素左端的距离，y为四边形左上角距容器元素上端的距离 ，width为四边形的宽度，height为四边形的高度,rx为x轴上圆角半径，ry为y轴上圆角半径, stroke为边界的颜色，fill为填充颜色，stroke-width为边界的宽度,opacity为整个四边形的透明度，fill-opacity为填充颜色的透明度，stroke-opacity为边界的透明度，width,height,stroke,fill,stroke-opacity,fill-opacity,stroke-width等可以放到style中-->
<!--画圆-->
<circle cx="260" cy="60" r="50"></circle>
<!-- cx为圆心距容器元素左端的距离， cy为圆心距容器元素上端的距离，r为半径 -->
<!--画椭圆-->
<ellipse cx="460" cy="60" rx="80" ry="50"></ellipse>
<!--cx为椭圆中心点的x坐标，cy为y坐标，rx是水平轴半径，ry是垂直轴半径-->
<!--画直线-->
<line x1="560" y1="20" x2="650" y2="100" style="stroke:rgb(99,99,99);stroke-width:2"></line>
<!--x1,y1为起点坐标， x2，y2为终点坐标-->
<!--画折线-->
<polyline stroke="#000" fill="#FFF" stroke-width="1" points="660,20 680,90 720,60"></polyline>
<!-- points是指这线上的转折点 -->
<!--画多边形-->
<polygon stroke="#000" fill="#FFF" stroke-width="1" points="760,20 780,90 820,60"></polygon>
<!--画曲线-->
<path d="M853 34C853 94 900 94 900 30" stroke="#000" fill="#FFF" stroke-width="1"></path>
<!--画水平线-->
<path d="M910,50H960" stroke="#000" fill="#FFF" stroke-width="1"></path>
<!-- 画竖线 -->
<path d="M980,10V90" stroke="#000" fill="#FFF" stroke-width="1"></path>
<!-- 画直线 -->
<path d="M1010,10L1050,90" stroke="#000" fill="#FFF" stroke-width="1"></path>
<!--画平滑曲线-->
<path d="M1060,50S1080,90 1100,50" stroke="#000" fill="#FFF" stroke-width="1"></path><!--此处的S(x1,y1)是(1060,50)-->
<!--画平滑曲线-->
<path d="M1060,50S1080,90 1100,50S1120,90 1140,50" stroke="#000" fill="#FFF" stroke-width="1"></path><!--此处的第二个S(x1,y1)是(1080,90)关于(1140,50)的对称点-->
<!--二次贝塞尔曲线-->
<path d="M1120,50Q1140,90 1160,50" stroke="#000" fill="#FFF" stroke-width="1"></path>
<path d="M1180,50Q1200,90 1220,50T1240,50" stroke="#000" fill="#FFF" stroke-width="1"></path><!--此处的第二个T(x1,y1)是(1200,90)关于(1220,50)的对称点-->
<path d="M1180,50T1240,50" stroke="#000" fill="#FFF" stroke-width="1"></path><!--此处的第二个T(x1,y1)是(1180,50)-->
</svg>
path命令参考http://www.w3.org/TR/SVG/paths.html
svg rect
<svg width="400" height="110">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
<svg width="400" height="180">
<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" />
</svg>
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
rx 和 ry 属性可使矩形产生圆角。
svg circle
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)
r 属性定义圆的半径
svg ellipse
<svg height="140" width="500">
<ellipse cx="200" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>
cx 属性定义圆点的 x 坐标
cy 属性定义圆点的 y 坐标
rx 属性定义水平半径
ry 属性定义垂直半径
<svg height="150" width="500">
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
</svg>
<svg height="100" width="500">
<ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />
<ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" />
</svg>
svg line
<svg height="210" width="500">
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束
svg polyline 折线
<svg height="200" width="500">
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
style="fill:none;stroke:black;stroke-width:3" />
</svg>
<svg height="180" width="500">
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
style="fill:white;stroke:red;stroke-width:4" />
</svg>
svg polygon 多边形
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
<svg height="250" width="500">
<polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
<svg height="250" width="500">
<polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
<svg height="210" width="500">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>
<svg height="210" width="500">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
points 属性定义多边形每个角的 x 和 y 坐标
svg path 路径
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath
以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
<svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
svg text
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text
特定属性：
x, y: 表示文本的横纵坐标
dx,dy: 表示移动的横纵坐标
rotate: 表示旋转的度数
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<text x="5" y="10"
style="font-family: Times New Roman;
font-size : 24;
stroke : #00ff00;
fill : #0000ff;">
SVG text styling
</text>
</svg>
text-archor: The text-anchor attribute is used to align (start-, middle- or end-alignment) a string of text relative to a given point.
<svg width="120" height="230" viewBox="0 0 120 230"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- Materialisation of anchors -->
<path d="M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110" stroke="grey" />
<!-- Anchors in action -->
<text text-anchor="start"
x="60" y="40">A</text>
<text text-anchor="middle"
x="60" y="75">A</text>
<text text-anchor="end"
x="60" y="110">A</text>
<!-- Materialisation of anchors -->
<circle cx="60" cy="40" r="3" fill="red" />
<circle cx="60" cy="75" r="3" fill="red" />
<circle cx="60" cy="110" r="3" fill="red" />
效果：
属性
stroke: 用于定义给定图形元素的轮廓颜色
stroke-width: 用于定义给定图形元素的轮廓线条大小
<circle r="15" style="stroke: grey; stroke-width:2; fill: red;"/>
stroke
stroke-linecap
<svg height="80" width="300">
<g fill="none" stroke="black" stroke-width="16">
<path stroke-linecap="butt" d="M5 20 l215 0" />
<path stroke-linecap="round" d="M5 40 l215 0" />
<path stroke-linecap="square" d="M5 60 l215 0" />
</g>
</svg>
stroke-dasharray
stroke-dasharray定义断续线
<svg height="80" width="300">
<g fill="none" stroke="black" stroke-width="4">
<path stroke-dasharray="5,5" d="M5 20 l215 0" />
<path stroke-dasharray="10,10" d="M5 40 l215 0" />
<path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
</g>
</svg>
stroke-opacity
stroke-opacity不透明度
<svg width="500" height="120">
<text x="22" y="40">欢迎光临www.waylau.com</text>
<path d="M20,40 l50,0"
style="stroke: #00ff00; fill:none;
stroke-width:16px;
stroke-opacity: 0.3;
" />
<path d="M80,40 l50,0"
style="stroke: #00ff00; fill:none;
stroke-width:16px;
stroke-opacity: 0.7;
" />
<path d="M140,40 l50,0"
style="stroke: #00ff00; fill:none;
stroke-width:16px;
stroke-opacity: 1;
" />
</svg>
SVG Filters之虚化Blur Effects
<svg height="110" width="110">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
代码解释：
该元素的id属性定义了滤镜的唯一名称
元素定义了虚化效果
在in=“SourceGraphic”部分定义了在整个元素中创建的效果
该stdDeviation属性定义虚化的值
该元件的滤镜属性链接到了“f1”滤镜
SVG Filters之阴影Drop Shadows
示例1 SVG
<svg height="120" width="120">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
代码解释：
该元素的id属性定义了滤镜的唯一名称
该元件的滤镜属性链接到了“f1”滤镜
示例2 加上了
<svg height="140" width="140">
<defs>
<filter id="f2" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f2)" />
</svg>
示例3
<svg height="140" width="140">
<defs>
<filter id="f3" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f3)" />
</svg>
代码解释：
示例4
<svg height="140" width="140">
<defs>
<filter id="f4" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feColorMatrix result="matrixOut" in="offOut" type="matrix"
values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f4)" />
代码解释：
矩阵中三个'0.2'是获取了red、green、blue 通道
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。