SVG 阴影
注意： Internet Explorer和Safari不支持SVG滤镜！
<defs>和<filter>所有互联网的SVG滤镜定义在
<defs>元素中。<defs>元素定义短并含有特殊元素（如滤镜）定义。
<filter>标签用来定义SVG滤镜。<filter>标签使用必需的id属性来定义向图形应用哪个滤镜？
SVG <feOffset>
实例
<feOffset>元素是用于创建阴影效果。我们的想法是采取一个SVG图形（图像或元素）并移动它在xy平面上一点儿。第一个例子偏移一个矩形（带
<feOffset>），然后混合偏移图像顶部（含<feBlend>）：
下面是SVG代码：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg>
<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>
</body>
</html>代码解析：
<filter>元素id属性定义一个滤镜的唯一名称<rect>元素的滤镜属性用来把元素链接到"f1"滤镜
实例
现在，偏移图像可以变的模糊（含 <feGaussianBlur>）:
下面是SVG代码：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg>
<defs>
<filter id="f1" 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(#f1)" />
</svg>
</body>
</html>代码解析：
<feGaussianBlur>元素的stdDeviation属性定义了模糊量
实例
现在为阴影涂上一层颜色：
下面是SVG代码：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg>
<defs>
<filter id="f1" 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(#f1)" />
</svg>
</body>
</html>代码解析：
<feColorMatrix>过滤器是用来转换偏移的图像使之更接近黑色的颜色。 '0.2'矩阵的三个值都获取乘以红色，绿色和蓝色通道。降低其值带来的颜色至黑色（黑色为0）
SVG 渐变
渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。
SVG渐变主要有两种类型：
- linear
- radial
SVG 线性渐变 - <linearGradient>
<linearGradient>元素用于定义线性渐变。
<linearGradient>标签必须嵌套在<defs>的内部。<defs>标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。
线性渐变可以定义为水平，垂直或角渐变：
- 当y1和y2相等，而x1和x2不同时，可创建水平渐变
- 当x1和x2相等，而y1和y2不同时，可创建垂直渐变
- 当x1和x2不同，且y1和y2不同时，可创建角形渐变
实例
定义水平线性渐变从黄色到红色的椭圆形：
下面是SVG代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg>
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
</body>
</html>
代码解析：
<linearGradient>标签的id属性可为渐变定义一个唯一的名称
<linearGradient>标签的X1，X2，Y1，Y2属性定义渐变开始和结束位置
渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个<stop>标签来规定。offset属性用来定义渐变的开始和结束位置。
实例
定义一个垂直线性渐变从黄色到红色的椭圆形：
下面是SVG代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg>
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
</body>
</html><radialGradient>标签必须嵌套在<defs>的内部。<defs>标签是definitions的缩写，它可对诸如渐变之类的特殊元素进行定义。
实例
定义一个放射性渐变从白色到蓝色椭圆：
下面是SVG代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg>
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
</body>
</html>SVG文字渐变
<text>标签用于绘制文本
下面是SVG代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg id="s9" width="500" height="400">
<!--渐变对象属于一种特效对象-->
<defs>
<linearGradient id="g3" x1="0%" y1="0%" x2="100%" y2="0">
<stop offset="0%" stop-color="red"></stop>
<stop offset="17%" stop-color="orange"></stop>
<stop offset="34%" stop-color="yellow"></stop>
<stop offset="51%" stop-color="green"></stop>
<stop offset="68%" stop-color="cyan"></stop>
<stop offset="85%" stop-color="blue"></stop>
<stop offset="100%" stop-color="purple"></stop>
</linearGradient>
</defs>
<rect width="400" height="100" x="50" y="150" fill="url(#g3)"></rect>
<text font-size="60" x="100" y="300" fill="url(#g3)">一段文本</text>
</svg>
</body>
</html>
总结:
---------------
公共属性
----------------
fill: 填充色 | url(id)这里主要是引用渐变色作为背景
stroke: 线条的颜色
stroke-width: 线条的宽度
stroke-linecap: 线条末尾的样式 (默认)butt (圆角)round (方形)square ----- round和square会影响线条的长度
opacity: 不透明度 0~1
fill-rule: nonzero (非零环绕原则)evenodd
stroke-dasharray: 创建虚线数组 x,y,z,..... (长度，间隔，长度，间隔，。。。。)
stroke-dashoffset: 偏移
filter: url(id) 添加滤镜
---------
矩形
---------
<rect x="" y="" rx="" ry="" width="" height=""></rect>
(x, y): 左上角坐标
rx: x轴圆角半径
ry: y轴圆角半径
width: 长度
height: 高度
---------
圆
---------
<circle cx="" cy="" r=""></circle>
(cx, cy): 圆心
r: 半径
--------------
椭圆
--------------
<ellipse cx="" cy="" rx="" ry=""></ellipse>
(cx, cy): 中心点
rx: x轴半径
ry: y轴半径
--------
线条
--------
<line x1="" y1="" x2="" y2=""></line>
(x1, y1): 线条的起始点
(x2, y2): 线条的结束点
---------------
多边形polygon
---------------
<polygon points=""></polygon>
points: x,y x1,y1 ........
----------------
曲线polyline
----------------
<polyline points=""></polyline>
points: x,y x1,y1 .........
---------------
路径
---------------
<path d=""></path>
d: 路径的描述
主要的语法：
M： moveTo
L: lineTo
H: horizontal lineTo
V: vertical lineTo
C: curveto
S: smooth curveto
Q: quadratic Bézier curve
T: smooth quadratic Bézier curveto
A: elliptical Arc
Z: closepath
命令区分大小写，除了Z。大写表示绝对位置，小写表示相对位置。
---------------
绘制文本
---------------
<text x="" y="" text-anchor="" dx="" dy="">text</text>
(x, y): 文字左下角的起始坐标
text-anchor: start middle end 文本锚点(可能会和我们预期的坐标有出入)
dx: 横轴的偏移
dy: 纵轴的偏移
路径文本的绘制
<textPath xlink:href="#path">text</textPath>
<text>中还可以嵌套<tspan x="" y="">text</tspan>
同时文本也可以作为超链接
<a xlink:href="" target="">
<text></text>
</a>
-----------------
滤镜
-----------------
<filter id=""></filter>
--------------
渐变
--------------
线性渐变
<linearGradient x1="" y1="" x2="" y2="" gradientUnits>
<stop offset="" style="stop-color:;stop-opacity:;"></stop>
</linearGradient>
gradientUnits: 定义坐标 userSpaceOnUse(不会对pattern的单位进行缩放) | objectBoundingBox(会)
x1: 渐变开始横坐标
y1: 渐变开始纵坐标
x2: 渐变结束横坐标
y2: 渐变结束纵坐标
offset: 渐变开始的位置 0% - 100%
放射性渐变
<radialGradient cx="" cy="" r="" fx="" fy="" gradientUnits>
<stop offset="" style="stop-color:;stop-opacity:;"></stop>
</radialGradient>
gradientUnits: 定义坐标 userSpaceOnUse(不会对pattern的单位进行缩放) | objectBoundingBox(会)
cx: 外层圆心横坐标
cy: 外层圆心纵坐标
fx: 内层圆心横坐标
fy: 内层圆心纵坐标
r: 发散的半径
offset: 渐变开始的位置 0% - 100%
----------
裁剪
----------
<clipPath id="">裁剪路径</clipPath>
----------
引用元素
----------
<defs>声明引用元素</defs>
----------
拷贝
----------
<use x="" y="" width="" height="" xlink:href="id"></use>
(x, y): 克隆对象的左上角坐标
width: 克隆对象的宽度
height: 克隆对象的高度
xlink:href 引用克隆对象
----------
模式
----------
<pattern id="" width="" height="" patternUnits="" patternTransform="">模式内的形状</pattern>
width: 模式的宽度
height: 模式的高度
patternUnits: 定义pattern的坐标系统 userSpaceOnUse(不会对pattern的单位进行缩放) | objectBoundingBox(会)
patternTransform: 变换
----------
遮罩
----------
<mask maskUnits="" x='' y="" width="" height="">内容</mask>
(x, y): 裁剪的左上角坐标。
width: 裁剪的宽度
height: 裁剪的高度
2833
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
