可缩放矢量图形svg

svg

svg(scalable vector graphics，可缩放的矢量图)是基于可扩展标记语言(标准通用标记语言的子集)，用于描述二维矢量图形的一种图形格式。

优势：

1. 该图片使用代码书写而成
2. 缩放不会失真
3. 内容轻量

书写svg代码

SVG 有一些预定义的形状元素，可被开发者使用和操作：

• 矩形<rect>

<svg style="background:#ccc;" width="600" height="550" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100" x="10" rx="5" y="10" ry="5" fill="bisque" fill-opacity="0.8" 
    stroke="#000" stop-opacity="0.5" stroke-width="2"/>
</svg>

rect 元素的 width 和 height 属性可定义矩形的高度和宽度
x 属性定义矩形的左侧位置（例如，x=“0” 定义矩形到浏览器窗口左侧的距离是 0px）
y 属性定义矩形的顶端位置（例如，y=“0” 定义矩形到浏览器窗口顶端的距离是 0px）
rx 和 ry 属性可使矩形产生圆角
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
CSS 的 stroke 属性定义矩形边框的颜色
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）

• 圆形<circle>

<svg style="background:#ccc;" width="600" height="550" xmlns="http://www.w3.org/2000/svg">
    <circle cx="150" cy="150" r="50" fill="transparent" stroke="#000" stroke-width="2"/>
</svg>

cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)
r 属性定义圆的半径

• 椭圆<ellipse>

<svg style="background:#ccc;" width="600" height="550" xmlns="http://www.w3.org/2000/svg">
    <ellipse cx="60" cy="320" rx="50" ry="80" fill="none" stroke="#000" stroke-width="2"/>
</svg>

椭圆与圆不同之处在于椭圆有不同的 x 和 y 半径，而圆的 x 和 y 半径是相同的
cx 属性定义圆点的 x 坐标，cy 属性定义圆点的 y 坐标
rx 属性定义水平半径，ry 属性定义垂直半径

• 线<line>

<svg style="background:#ccc;" width="600" height="550" xmlns="http://www.w3.org/2000/svg">
    <line x1="120" y1="80" x2="180" y2="300" stroke="rgb(255,255,255)" stroke-width="2"/>
</svg>

x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束

折线<polyline>

<svg style="background:#ccc;" width="600" height="550" xmlns="http://www.w3.org/2000/svg">
    <polygon points="200,20,250,100,200,150,160,80" fill="brown"/>
</svg>

使用fill属性填充时，填充区域为第一个点和最后一个点连线形成的闭合区域

多边形<polygon>

<svg style="background:#ccc;" width="600" height="550" xmlns="http://www.w3.org/2000/svg">
    <polygon points="200,20,250,100,200,150,160,80" fill="brown"/>
</svg>

<polygon> 标签用来创建含有不少于三个边的图形
points 属性定义多边形每个角的 x 和 y 坐标

路径：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 xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background:#ccc">
    <path fill="#000" d="M250 50 A100 100 0 0 1 250 250 A100 100 0 0 0 250 450 A200 200 0 0 1 250 50"/>
    <path fill="#fff" d="M250 50 A100 100 0 0 1 250 250 A100 100 0 0 0 250 450 A200 200 0 0 0 250 50"/>
    <circle cx="250" cy="150" r="30" fill="#fff"/>
    <circle cx="250" cy="350" r="30" fill="#000"/>
</svg>

A的五个参数：

• 参数一：半径1
• 参数二：半径2
• 参数三：顺时针旋转角度
• 参数四：小弧（0）或大弧（1）
• 参数五： 顺时针（1）逆时针（0）
  

<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
    <path d="M153 334
             C153 334 151 334 151 334
             C151 339 153 344 156 344
             C164 344 171 339 171 334
             C171 322 164 314 156 314
             C142 314 131 322 131 334
             C131 350 142 364 156 364
             C175 364 191 350 191 334
             C191 311 175 294 156 294
             C131 294 111 311 111 334
             C111 361 131 384 156 384
             C186 384 211 361 211 334
             C211 300 186 274 156 274" 
             fill="white" stroke="red" stroke-width="2" />
</svg>

svg滤镜

SVG 滤镜用来向形状和文本添加特殊的效果
在 SVG 中，可用的滤镜有：

1. feBlend
2. feColorMatrix
3. feComponentTransfer
4. feComposite
5. feConvolveMatrix
6. feDiffuseLighting
7. feDisplacementMap
8. feFlood
9. feGaussianBlur
10. feImage
11. feMerge
12. feMorphology
13. feOffset
14. feSpecularLighting
15. feTile
16. feTurbulence
17. feDistantLight
18. fePointLight
19. feSpotLight

svg高斯模糊(Gaussian Blur)
<filter> 标签用来定义 SVG 滤镜。<filter> 标签使用必需的 id 属性来定义向图形应用哪个滤镜
<filter> 标签必须嵌套在<defs> 标签内。<defs> 标签是 definitions 的缩写，它允许对诸如滤镜等特殊元素进行定义。

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="Gaussian_Blur">
            <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
        </filter>
    </defs>
    <ellipse cx="200" cy="150" rx="70" ry="40" style="fill:#ff0000;stroke:#000000;stroke-width:2;filter:url(#Gaussian_Blur)" />
</svg>

<filter> 标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）
filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符
滤镜效果是通过 <feGaussianBlur> 标签进行定义的。fe 后缀可用于所有的滤镜
<feGaussianBlur> 标签的 stdDeviation 属性可定义模糊的程度
in=“SourceGraphic” 这个部分定义了由整个图像创建效果

标签名称	参数	说明
<filter>滤镜	id	对象使用 filter=“url(#id)” 进行使用
	x,y	滤镜画布起始坐标 (如果下面的宽高参数变大，起始坐标需要调整才能居中，一般是负的宽高/2)
	width,height	滤镜宽度、高度 (如果使用了模糊效果，滤镜画布的大小需要增加，不然会被截取)
<feGaussianBlur>高斯模糊	in	输入，参数可以是 - SourceGraphic 源外观 - SourceAlpha 源透明度(黑色)
	stdDeviation	模糊程度
<feOffset>偏移	dx,dy	偏移的参数
<feComponentTransfer>滤镜组件变换
<feFuncA> 透明度 <feFuncR> 红色 <feFuncG> 绿色 <feFuncB> 蓝色	type	类型，参数可以是 - linear 线性
	slope	数值
<feBlend>滤镜混合输出	in	输入(将原图一起渲染)