# SVG 阴影
**注意：** Internet Explorer和Safari不支持SVG滤镜！
## <defs> 和 <filter>
所有互联网的SVG滤镜定义在<defs>元素中。<defs>元素定义短并含有特殊元素（如滤镜）定义。
<filter>标签用来定义SVG滤镜。<filter>标签使用必需的id属性来定义向图形应用哪个滤镜？
## SVG <feOffset>
## 实例 1
<feOffset>元素是用于创建阴影效果。我们的想法是采取一个SVG图形（图像或元素）并移动它在xy平面上一点儿。
第一个例子偏移一个矩形（带<feOffset>），然后混合偏移图像顶部（含<feBlend>）：
下面是SVG代码：
## 实例
```
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<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>
```
对于Opera用户： [查看SVG文件](images/feoffset1.svg)（右键单击SVG图形预览源）。
**代码解析：**
* <filter>元素id属性定义一个滤镜的唯一名称
* <rect>元素的滤镜属性用来把元素链接到"f1"滤镜
## 实例 2
现在，偏移图像可以变的模糊（含 <feGaussianBlur>）:
下面是SVG代码：
## 实例
```
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<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>
```
对于Opera用户： [查看SVG文件](images/feoffset2.svg)（右键单击SVG图形预览源）。
**代码解析：**
* <feGaussianBlur>元素的stdDeviation属性定义了模糊量
## 实例 3
现在，制作一个黑色的阴影：
下面是SVG代码：
## 实例
```
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" 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>
```
对于Opera用户： [查看SVG文件](images/feoffset3.svg)（右键单击SVG图形预览源）。
**代码解析：**
* <feOffset>元素的属性改为"SourceAlpha"在Alpha通道使用残影，而不是整个RGBA像素。
## 实例 4
现在为阴影涂上一层颜色：
下面是SVG代码：
## 实例
```
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<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>
```
对于Opera用户： [查看SVG文件](images/feoffset4.svg)（右键单击SVG图形预览源）。
**代码解析：**
* <feColorMatrix>过滤器是用来转换偏移的图像使之更接近黑色的颜色。 '0.2'矩阵的三个值都获取乘以红色，绿色和蓝色通道。降低其值带来的颜色至黑色（黑色为0）
- XML 基础
- XML 简介
- XML 用途
- XML 树结构
- XML 语法规则
- XML 元素
- XML 属性
- XML 验证
- 查看 XML 文件
- 使用 CSS 显示 XML
- 使用 XSLT 显示 XML
- XML Javascript
- XMLHttpRequest 对象
- XML Parser
- XML DOM
- XML to HTML
- XML 应用程序
- XML 进阶
- XML 命名空间
- XML CDATA
- XML 编码
- 服务器上的 XML
- XML DOM 高级
- XML 注意事项
- XML 相关技术
- 现实生活中的 XML
- XML 编辑器
- XML - E4X
- DTD 教程
- DTD 简介
- DTD - XML 构建模块
- DTD - 元素
- DTD - 属性
- XML 元素 vs. 属性
- DTD - 实体
- DTD 验证
- DTD - 来自网络的实例
- XML DOM
- XML DOM 简介
- XML DOM 节点
- XML DOM 节点树
- XML DOM 解析器
- XML DOM 加载函数
- XML DOM - 属性和方法
- XML DOM - 访问节点
- XML DOM 节点信息
- XML DOM 节点列表
- XML DOM 遍历节点树
- XML DOM 浏览器差异
- XML DOM - 导航节点
- XML DOM 获取节点值
- XML DOM 改变节点值
- XML DOM 删除节点
- XML DOM 替换节点
- XML DOM 创建节点
- XML DOM 添加节点
- XML DOM 克隆节点
- The XMLHttpRequest 对象
- XML DOM 节点类型
- XML DOM - Node 对象
- XML DOM - NodeList 对象
- XML DOM - NamedNodeMap 对象
- XML DOM - Document 对象
- XML DOM - DocumentImplementation 对象
- XML DOM - DocumentType 对象
- XML DOM - ProcessingInstruction 对象
- XML DOM - Element 对象
- XML DOM - Attr 对象
- XML DOM - Text 对象
- XML DOM - CDATASection 对象
- XML DOM - Comment 对象
- XMLHttpRequest 对象
- XML DOM Parse Error 对象
- XML DOM 解析器错误
- XSLT 教程
- XSL 语言
- XSLT 简介
- XSLT 浏览器
- XSLT - 转换
- XSLT <xsl:template> 元素
- XSLT <xsl:value-of> 元素
- XSLT <xsl:for-each> 元素
- XSLT <xsl:sort> 元素
- XSLT <xsl:if> 元素
- XSLT <xsl:choose> 元素
- XSLT <xsl:apply-templates> 元素
- XSLT - 在客户端
- XSLT - 在服务器端
- XSLT - 编辑 XML
- XML 编辑器
- XSLT 元素参考手册
- XSLT 函数
- XPath 教程
- XPath 简介
- XPath 节点
- XPath 语法
- XPath 轴（Axes）
- XPath 运算符
- XPath Examples
- XPath、XQuery 以及 XSLT 函数函数参考手册
- 函数参考手册
- XQuery 教程
- XQuery 简介
- XQuery 实例
- XQuery FLWOR 表达式
- XQuery FLWOR + HTML
- XQuery 术语
- XQuery 语法
- XQuery 添加元素 和属性
- XQuery 选择 和 过滤
- XQuery 函数
- XQuery 参考手册
- XLink 和 XPointer 教程
- XLink 和 XPointer 简介
- XLink 和 XPointer 语法
- XLink 实例
- XPointer 实例
- XLink 参考手册
- XML Schema 教程
- XML Schema 简介
- 为什么使用 XML Schemas?
- XSD 如何使用?
- XSD - <schema> 元素
- XSD 简易元素
- XSD 属性
- XSD 限定 / Facets
- XSD 复合元素
- XSD 空元素
- XSD 仅含元素
- XSD 仅含文本
- XSD 混合内容
- XSD 指示器
- XSD <any> 元素
- XSD <anyAttribute> 元素
- XSD 元素替换(Element Substitution)
- XSD 实例
- XSD 字符串 数据类型
- XSD 日期和时间数据类型
- XSD 数值数据类型
- XSD 杂项 数据类型
- XML 编辑器
- XML Schema 参考手册
- XSD 元素
- XSD 限定/Facets
- SOAP 教程
- SOAP 简介
- SOAP 语法
- SOAP Envelope 元素
- SOAP Header 元素
- SOAP Body 元素
- SOAP Fault 元素
- SOAP HTTP 协议
- SOAP 实例
- WSDL 教程
- WSDL 简介
- WSDL 文档
- WSDL 端口
- WSDL 绑定
- WSDL UDDI
- RSS 教程
- RSS 简介
- RSS 历史
- RSS 语法
- RSS <channel> 元素
- RSS <item> 元素
- RSS 发布您的 Feed
- RSS 阅读器
- RSS 参考手册
- RDF 教程
- RDF 简介
- RDF 规则
- RDF 实例
- RDF 主要 元素
- RDF 容器 Elements
- RDF 集合
- RDF Schema (RDFS)
- RDF 都柏林核心元数据倡议
- OWL 简介
- RDF 参考手册
- XSL-FO 教程
- XSL-FO 简介
- XSL-FO 文档
- XSL-FO 区域
- XSL-FO 输出
- XSL-FO 流
- XSL-FO 页面
- XSL-FO 块
- XSL-FO 列表
- XSL-FO 表格
- XSL-FO 与 XSLT
- XSL-FO 软件
- XSL-FO 参考手册
- SVG 教程
- SVG 简介
- SVG 实例
- SVG 在 HTML 页面
- SVG <rect>
- SVG <circle>
- SVG <ellipse>
- SVG <line>
- SVG <polygon>
- SVG <polyline>
- SVG <path>
- SVG <text>
- SVG Stroke 属性
- SVG 滤镜
- SVG 模糊效果
- SVG 阴影
- SVG 渐变 - 线性
- SVG 渐变- 放射性
- SVG 参考手册
- 免责声明