SVG的概念
SVG英文全称为Scalable Vector Graphics，意思是可缩放的矢量图
HTML5支持SVG
HTML<svg>元素是SVG图形的容器
SVG有多种绘制路径、框、圆、文本和图形图像的方法
什么是SVG
·SVG指可伸缩矢量图形
·SVG用于定义用于网络的基于矢量的图形
·SVG使用XML格式定义图形
·SVG图像在放大或改变尺寸的情况下其图形质量不会有损失
·SVG是万维网联盟的标准
SVG优势
与其他图像格式相比（如JPEG和GIF）优势在于：
SVG图像可通过文本编辑器来创建和修改化或压缩
SVG图像可被搜索、索引、脚本话或压缩
SVG是可伸缩的
SVG图像可在任何的分辨率下被高质量的打印
SVG可在图像质量不下降的情况下被放大
canvas和SVG
SVG绘制图形
<body>
<svg width="500" height="500">
<!-- x:水平坐标轴
y:垂直坐标轴
rx:矩形圆角是以r为半径画的圆 -->
<!-- <rect x="30" y="30" width="150" height="200" fill="red" stroke="blue"
stroke-width="5" rx="50" ry="100">
</rect> -->
<!-- cx:圆形的中心点x轴坐标
cy:圆形的中心点y轴坐标
r:圆的半径
stroke-opacity:设置线条的透明度
fill-opacity:设置填充的透明度 -->
<!-- <circle cx="300" cy="300" r="100" fill="red"stroke="blue"
stroke-width="10" stroke-opacity="0.3"></circle>
-->
<ellipse cx="200" cy="200" rx="100" ry="50" ></ellipse>
<!-- 绘制直线 line标签 -->
<!-- <line x1="0" y1="0" x2="100" y2="100" stroke="blue"></line> -->
<!-- 绘制折线 polyline -->
<polyline points="0,0,0,100,50,100" stroke="blue" fill="none"></polyline>
<!-- 绘制闭合多边形 polygon -->
<polygon points="200 0 200 100 300 100 500 0" stroke="blue" fill="none"></polygon>
</svg>
</body>SVG动画
<body>
<svg width="1000" height="1000">
<circle cx="300" cy="300" r="10" fill="red">
<animate attributeName="r" attributeType="XML" from="10" to="100"
dur='0.1' fill="freeze" repeatCount="indefinite"></animate>
<animate attributeName="fill" attributeType="XML" from="red" to="blue"
dur="0.1" fill="freeze" repeatCount="indefinite"></animate>
<animate attributeName="cx" attributeType="XML" from="300" to="600" dur="2" fill="freeze" repeatCount="indefinite" </animate><!-- begin="click"点击后运行 -->
</circle>
<circle cx="300" cy="300" r="10" fill="red">
<animate attributeName="r" attributeType="XML" from="100" to="10"
dur='0.1' fill="freeze" repeatCount="indefinite"></animate>
<animate attributeName="fill" attributeType="XML" from="bule" to="green"
dur="0.1" fill="freeze" repeatCount="indefinite"></animate>
<animate attributeName="cx" attributeType="XML" from="600" to="300" dur="2" fill="freeze" repeatCount="indefinite" </animate><!-- begin="click" -->
</circle>
</svg>
</body>页面效果：两个球闪烁
SVG阴影
<defs>和<filter>
所有Internet SVG滤镜都在 <defs>元素中定义。
<defs> 元素定义的缩写，包含特殊元素（例如滤镜）的定义
<filter> 元素用于定义SVG滤镜 （具有必需的id属性，用于标识滤镜。图形然后指向要使用的滤镜。）
<feoffset>元素用于创建阴影效果：想法是拍摄SVG图形（图像或元素）并将其在xy平面中移动一点后将原始图像混合在偏移图像的顶部（使用<feBlend>）。
<filter>元素id属性定义一个滤镜的唯一名称
<rect>元素的过滤属性用来把元素链接到"f1"滤镜
in="SourceGraphic"指的是模糊效果要应用于整个页面
feBlend滤镜的模式:
normal - 正常
multiply - 正片|叠底
sscreen - 滤色
darkken - 变暗
lighten - 变亮
<feColorMatrix>
<feColorMatrix>过滤器是用来转换偏移的图像使之更接近黑色的颜色."0.2"矩阵的三个值都获取乘以红色,绿色和蓝色通道.降低其值带来的颜色至黑色(黑色为0)
<linearGradient>元素必须嵌套<defs>标记内；
<defs>标签是定义的缩写，包含特殊元素（例如渐变）的定义
当y1和y2相等且x1和x2不同时，将创建水平渐变
当x1和x2相等且y1和y2不同时，将创建垂直渐变
当x1和x2不同且y1和y2不同时，将创建角度渐变
<linearGradient>标签的id属性可渐变定义一个唯一的名称
<linearGradient>标签的x1,x2,y2属性定义渐变开始和结束位置
渐变的颜色范围可由两种或多种颜色组成,每种颜色通过一个<stop>标签来规定.offset属性来定义渐变的开始和结束位置.
填充属性把ellipse元素链接到此渐变
SVG径向渐变 - <radialGradient>
<radialGradient>元素用于定义放射性渐变
<radialGradient>标签必须嵌套在<defs>的内部.<defs>标签是definitions的缩写,它可对诸如渐变之类的特殊元素进行定义.
<radialGradient>标签的id属性可为渐变定义一个唯一的名称
CX,CY和r属性定义的最外围圈和FX和FY定义的最内层圈
渐变颜色范围可以由两个或两个以上的颜色组成,每种颜色用一个<stop>标签指定.offset属性用来定义渐变色开始和结果
填充属性把ellipse元素链接到此渐变
<body>
<svg>
<!-- 定义滤镜，defs是一个定义标签 -->
<defs>
<!-- 定义一个过滤器filter -->
<filter id="f1" width="200%" height="200%">
<!-- 使用偏移滤镜 -->
<feOffset in="SourceGraphic" result="offset1" dx="20" dy="20"></feOffset>
<!-- 颜色滤镜feColorMatrix 通过values属性来控制阴影颜色 -->
<!-- <feColorMatrix in="offset1" result="colorMatrix" type="matrix"
values="0.2 0 0 0 0 0 1 0 0 0 0 0 1 1 0 0 0 0 1 0"></feColorMatrix> 无效果-->
<!-- feColorMatrix:用于颜色滤镜光片转换的滤镜，使用矩阵来影响颜色的每个通道
（主要是基于RGBA，注意原始的RGBA的值默认为1） -->
<feColorMatrix in="offset1" result="colorMatrix" type="matrix"
values="0 0 0 0 0
0 0.2 0 0 0
0 0 1 1 0
0 0 0 1 0">
</feColorMatrix>
<!-- 模糊滤镜 stdDeviation:设置模糊度 -->
<feGaussianBlur result="blur" in="colorMatrix" stdDeviation="10"></feGaussianBlur>
<!-- 使用混合滤镜,主要是将原始标签显示出来 -->
<feBlend in="SourceGraphic" in2="offset" mode="multipiy"> </feBlend>
</filter>
</defs>
<rect x="0" y="0" width="200" height="100" fill="red" stroke="green"
filter="url(#f1)"></rect>
</svg>
</body>
<body>
<!-- <svg>
<defs>
<linearGradient id="linear" x1="0%" y1="0%" x2="70%" y2="0%"> -->
<!-- 设置渐变色，使用stop标签 -->
<!-- <stop offset="20%" stop-color="blue"></stop>
<stop offset="100%" stop-color="green"></stop>
</linearGradient>
</defs>
<rect x="0" y="0" width="200" height="100" fill="url(#linear)"
stroke="yellow"></rect>
</svg> -->
<svg>
<defs>
<!-- <linearGradient id="linear" x1="60%" y1="30%" x2="70%" y2="30%"> -->
<!-- 设置渐变色，使用stop标签 -->
<!-- <stop offset="20%" stop-color="blue"></stop>
<stop offset="100%" stop-color="green"></stop>
</linearGradient> -->
<radialGradient id="radial" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="20%" stop-color="blue"></stop>
<stop offset="100%" stop-color="green"></stop>
</radialGradient>
</defs>
<rect x="0" y="0" width="200" height="100" fill="url(#radial)"
stroke="yellow"></rect>
</svg>
</body>
Svg滤镜包括：
feBlend：与图像相结合的滤镜
feColorMatrix：用于彩色滤光片转换
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur：模糊滤镜
feImage
feMerge：多滤镜叠加滤镜
feMorphology
feOffset：过滤阴影
feSpecularLighting
feTile
feTurbulence
feDistantLight：用于照明过滤
fePointLight：用于照明过滤
FeSpotLight：用于照明过滤
滤镜的属性：
in属性的6个取值
svG filter中的 in属性，指定滤镜效果的输入源，可以是某个滤镜导出的 result
也可以是下面6个值:
in取值 作用
SourceGraphic 该关键词表示图形元素自身将作为<filter>原语的原始输入
SourceAlpha 该关键词表示图形元素自身将作为〈filter>原语的原始输入。SourceAlpha与SourceGraphic具有相同的规则除了SourceAlpha只使用元素的非透明部分
Backgroundlmage与 SourceGraphic类似，但可在背景上使用。需要显式设置BackgroundAlpha与SourceAlpha类似，但可在背景上使用。需要显式设置
FillPaint 将其放置在无限平面上一样使用填充油漆
StrokePaint 将其放在无限平面上一样使用描边绘画
feBlend滤镜的模式：
-
normal — 正常
-
multiply — 正片叠底
-
screen — 滤色
-
darken — 变暗
-
lighten— 变亮
2284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
