使用 XML 来描述二维图形和绘图程序的语言
SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG使用方法:
///外部文件 svg文件内部的结构如下
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- 具体内容 -->
</svg>
引用svg的部分可以是以下几个地方
<embed src="circle1.svg" type="image/svg+xml" />
<object data="circle1.svg" type="image/svg+xml"></object>
<iframe src="circle1.svg"></iframe>
<a href="circle1.svg">View SVG file</a>
///直接引用
<svg></svg>直接嵌入
相关样式知识
fill:blue; //填充颜色
fill-opacity:0.1; //填充透明度
stroke:pink; //边框颜色
stroke-width:5; //边框宽度
stroke-opacity:0.9; //边框
stroke属性
跟css的差不多,设置线、文本或元素轮廓
stroke 颜色
stroke-dasharray 创建虚线 none | 数组(5,5) | inherit
stroke-dashoffset 虚线开始的位置
stroke-width 宽度
stroke-linecap 开放路径的终结
butt | round | square | inherit
标签
-----------------------------------------------------------------
-----------------------------------------------------------------
1、矩形<rect>
2、圆形<circle>
3、椭圆<ellipse>
4、直线<line>
5、多边形<polygon>
6、折线<polyline>
7、路径<path>
8、文本<text>
9、<defs>
10、<filter>
11、线性渐变<linearGradient>
12、放射性渐变<radialGradient>
-----------------------------------------------------------------
-----------------------------------------------------------------
1、矩形<rect>
<!-- x y: 左上角坐标
rx ry: 使矩形产生圆角 -->
<!-- stroke:边框的颜色
fill-opacity:填充颜色透明度
stroke-opacity:笔触颜色透明度 -->
<rect x="50" y="20" width="150" height="150" rx="20" ry="20"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;
stroke-opacity:0.9"/>
2、圆形<circle>
<!-- r:半径
cx cy:圆心坐标 -->
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
3、椭圆<ellipse>
<!-- cx cy:椭圆中心坐标
rx ry:半径 -->
<ellipse cx="300" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2"/>
4、直线<line>
<!-- x1 y1:起始点坐标
x2 y2:终点坐标 -->
<line x1="0" y1="0" x2="200" y2="200"
style="stroke:rgb(255,0,0);stroke-width:2"/>
5、多边形<polygon>
<!-- 可以形成五角星 -->
<!-- fill-rule:指定算法,判断某区域是否属于"内部" nonzero | evenodd | inherit -->
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
6、折线<polyline>
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/>
7、路径<path>
- M = moveto 移动到 (坐标)
- L = lineto 画线到 (坐标)
- H = horizontal lineto 水平线到 (距离)
- V = vertical lineto 垂直线到 (距离)
- C = curveto 三次贝塞尔曲线到 (坐标 p1 p2 p3)
- S = smooth curveto 光滑三次贝塞尔曲线到 (坐标 p2 p3)
【当一个点某一侧的控制点是它另一侧的控制点的对称(以保持斜率不变),可以使用S命令。简写的贝塞尔曲线命令】 - Q = quadratic Belzier curve 二次贝塞尔曲线到 (坐标 p1 p2)
- T = smooth quadratic Belzier curveto 光滑二次贝塞尔曲线到 (坐标 p2)
- A = elliptical Arc 椭圆弧
(rx,ry xRotation isLarge,sweep endX,endY)
【rx:水平方向上的半径;ry:垂直方向上的半径。
xRotation:设置弧线X轴方向上的旋转,通常不需要,默认值0。
isLarge :从A点到B点绘制一条弧线,可以得到一大一小的弧线。0 1。isLarge==1?大:小。
sweep :0 1。sweep==1?顺时针:逆时针绘制弧线】 - Z = closepath 关闭路径 ()
注释:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。
<path d="M250 150 L150 350 L350 350 Z" />
8、文本<text>
<!-- 如果需要路径,则加defs,否则直接<text>aa</text>即可 -->
<defs>
<path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
</defs>
<!-- x y:坐标-->
<text x="10" y="100" style="fill:red;">
<textPath xlink:href="#path1">I love SVG I love SVG</textPath>
</text>
<!-- 每个<tspan> 元素可以包含不同的格式和位置 -->
<text x="10" y="20" style="fill:red;">Several lines:
<!-- 注:xy为绝对位置 -->
<tspan x="10" y="45">First line</tspan>
<tspan x="10" y="70">Second line</tspan>
</text>
9、<defs>
SVG滤镜定义在<defs>元素中。
10、<filter>
用来定义SVG滤镜。使用必需的id来定义向图形应用哪个滤镜
<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)" />
11、线性渐变<linearGradient>
12、放射性渐变<radialGradient>
参考: https://segmentfault.com/a/1190000005053782 svg之<path>详解
http://www.runoob.com/svg/svg-tutorial.html svg教程
http://www.w3school.com.cn/svg/index.asp svg教程