svg
MDN较为详细
地址：https://developer.mozilla.org/zh-CN/docs/Web/SVG
svg: scalable vector graphics 可缩放矢量图
- 该图片使用代码书写而成
- 缩放不会失帧
- 内容轻量
如何使用
svg 可以嵌入浏览器，也可以单独成为一个文件
xml语言，svg使用该语言定义
书写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="500" height="500" style="background:#999" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="100" x="50" y="50" fill="red" stroke="black" stroke-width="5" />
<circle cx="250" cy="100" r="50" fill="red" stroke="black" stroke-width="5" />
<ellipse rx="50" ry="100" cx="400" cy="150" fill="red" stroke="black" stroke-width="5"/>
<line x1="47.5" x2="400" y1="50" y2="50" stroke="black" stroke-width="10"/>
<polyline points="50 150 250 150 400 250" fill="none" stroke="black" stroke-width="10" />
<polygon points="100 500 200 250 300 500 50 350 350 350 " fill="red" stroke="black" stroke-width="10" />
</svg>
fill，填充颜色，取值transparent（透明）
stroke，边框
stroke-width，边框宽度
矩形
<rect width="100" height="100" x="50" y="50" fill="red" stroke="black" stroke-width="5" />
宽，高，x坐标，y坐标，填充色，边框，边框宽度
圆形
<circle cx="250" cy="100" r="50" fill="red" stroke="black" stroke-width="5" />
cx圆心X坐标
cy圆心y坐标
椭圆
<ellipse rx="50" ry="100" cx="400" cy="150" fill="red" stroke="black" stroke-width="5"/>
rx横向椭圆半径
ry纵向椭圆半径
线条
<line x1="47.5" x2="400" y1="50" y2="50" stroke="black" stroke-width="10"/>
由两个坐标连接
折线
<polyline points="50 150 250 150 400 250" fill="none" stroke="black" stroke-width="10" />
由坐标依次连接
多边形
画五角星
<polygon points="100 500 200 250 300 500 50 350 350 350 " fill="red" stroke="black" stroke-width="10" />
由坐标依次连接
路径
- M = moveto（起始坐标）
- L = lineto（画线）
- H = horizontal lineto（横线）
- V = vertical lineto（垂直线）
- C = curveto（曲线）
- S = smooth curveto（平滑曲线）
- Q = quadratic Belzier curve（二次Belzier曲线）
- T = smooth quadratic Belzier curveto（光滑的二次贝尔齐尔曲线）
- A = elliptical Arc（椭圆弧）
- Z = closepath（闭合）
A（椭圆）的使用：
- rx ry
- 顺时针旋转角度
- 小弧（0）或 大弧（1）
- 顺时针（1）或 逆时针（0）
太极图
<?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="500" height="500" style="background:#999" xmlns="http://www.w3.org/2000/svg">
<path d="M250 50 A100 100 0 0 1 250 250 A100 100 0 0 0 250 450 A 200 200 0 0 1 250 50" fill="black" />
<circle cx="250" cy="150" r="30" fill="white" />
<path d="M250 50 A100 100 0 0 1 250 250 A100 100 0 0 0 250 450 A 200 200 0 0 0 250 50" fill="white" />
<circle cx="250" cy="350" r="30" fill="black" />
</svg>
stroke属性
1、stroke
边框色，属性定义一条线，文本或元素轮廓颜色
2、stroke-width
文本或元素轮廓厚度
3、stroke-linecap
Stroke-linecap属性定义线段端点的风格，
属性值：
- butt
- square
- round
stroke-linecap="square"
4、stroke-dasharray
用于创建虚线
举例：stroke-dasharray="20,10,5,5,5,10"
5、stroke-opacity
属性设置边框的透明度，值的范围从0到1，
举例：stroke-opacity="1"
6、stroke-linejoin
属性设置线条拐弯处的连接方式，属性值：
- miter
- round
- bevel
举例：stroke-linejoin="bevel"
线性渐变——linearGradient
<linearGradient> 标签必须嵌套在 <defs> 的内部。<defs> 标签是 definitions 的缩写，它可对诸如渐变之类的特殊元素进行定义。
- 当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
- 当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
- 当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变
<linearGradient> 标签的 id 属性可为渐变定义一个唯一的名称
fill:url(#red_green) fill="url(#red_green)"属性把 需要渐变的图形元素链接到此渐变
<linearGradient> 标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置
渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。
<!--五角星渐变染色-->
<?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="500" height="500" style="background:#999" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<polygon points="150 350 250 100 350 350 100 200 400 200 " style="fill:url(#red_green)" />
<defs>
<linearGradient id="red_green" x1="0%" y1="100%" x2="0%" y2="30%">
<stop offset="0%" stop-color="red" stop-opacity="1"/>
<stop offset="100%" stop-color="green" stop-opacity="1"/>
</linearGradient>
</defs>
</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="500" height="500" style="background:#999" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="150" y="150" width="200" height="200" style="fill:url(#blue_red)" />
<defs>
<linearGradient id="blue_red" x1="0%" y1="10%" x2="0%" y2="100%">
<stop offset="0%" stop-color="blue" stop-opacity="1">
</stop>
<stop offset="100%" stop-color="red" stop-opacity="1">
</stop>
</linearGradient>
</defs>
</svg>
放射性渐变——radialGradient
<radialGradient> 标签必须嵌套在 <defs> 中。<defs> 标签是 definitions 的缩写，它允许对诸如渐变等特殊元素进行定义
cx、cy 和 r 属性定义外圈，fx 和 fy 定义内圈 渐变的颜色范围可由两种或多种颜色组成
- r是外圈的半径，（cx，cy）为外圆圆心坐标
- （fx，fy）为内圆圆心坐标
每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。
举例：
<?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="500" height="500" style="background:#999" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="red_green" cx="100%" cy="10%" r="70%" fx="50%" fy="50%" >
<stop offset="0%" stop-color="red" stop-opacity="1" ></stop>
<stop offset="100%" stop-color="green" stop-opacity="1" ></stop>
</radialGradient>
</defs>
<rect width="200" height="200" x="150" y="150" style="fill:url(#red_green)" />
</svg>
svg滤镜
在 SVG 中，可用的滤镜有：
-
feBlend
-
feColorMatrix
-
feComponentTransfer
-
feComposite
-
feConvolveMatrix
-
feDiffuseLighting
-
feDisplacementMap
-
feFlood
-
feGaussianBlur——创建模糊效果
-
feImage
-
feMerge
-
feMorphology
-
feOffset——创建模糊效果
-
feSpecularLighting
-
feTile
-
feTurbulence
-
feDistantLight
-
fePointLight
-
feSpotLight
必须在 <defs> 标签中定义 SVG 滤镜
<filter> 标签必须嵌套在 <defs> 标签内
- <filter> 标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）
- filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符
- 滤镜效果是通过 <feGaussianBlur> 标签进行定义的。fe 后缀可用于所有的滤镜
- <feGaussianBlur> 标签的 stdDeviation 属性可定义模糊的程度
- in="SourceGraphic" 这个部分定义了由整个图像创建效果
网友评论