SVG 课程 （五）文本，Stroke 属性，SVG 滤镜，SVG 模糊效果
SVG <text>
SVG 文本 - <text>
<text> 元素用于定义文本。
实例 1
写一个文本：
下面是SVG代码：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <text x="0" y="15" fill="red">I love SVG</text> </svg>
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
实例 2
旋转的文字：
下面是SVG代码：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text> </svg>
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
实例 3
路径上的文字：
下面是SVG代码：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
</defs>
<text x="10" y="100" style="fill:red;">
<textPath xlink:href="#path1">I love SVG I love SVG</textPath>
</text>
</svg>
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
实例 4
元素可以安排任何分小组与<tspan> 元素的数量。每个<tspan> 元素可以包含不同的格式和位置。几行文本(与 <tspan> 元素):
下面是SVG代码：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="10" y="20" style="fill:red;">Several lines:
<tspan x="10" y="45">First line</tspan>
<tspan x="10" y="70">Second line</tspan>
</text>
</svg>
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
实例 5
作为链接文本（ <a> 元素）：
下面是SVG代码：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href="http://www.w3schools.com/svg/" target="_blank">
<text x="0" y="15" fill="red">I love SVG</text>
</a>
</svg>
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
SVG Stroke 属性
SVG Stroke 属性
SVG提供了一个范围广泛stroke 属性。在本章中，我们将看看下面：
- stroke
- stroke-width
- stroke-linecap
- stroke-dasharray
所有stroke属性，可应用于任何种类的线条，文字和元素就像一个圆的轮廓。
SVG stroke 属性
Stroke属性定义一条线，文本或元素轮廓颜色：
下面是SVG代码：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g fill="none">
<path stroke="red" d="M5 20 l215 0" />
<path stroke="blue" d="M5 40 l215 0" />
<path stroke="black" d="M5 60 l215 0" />
</g>
</svg>
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
SVG stroke-width 属性
Tstroke- width属性定义了一条线，文本或元素轮廓厚度：
下面是SVG代码：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g fill="none" stroke="black">
<path stroke-width="2" d="M5 20 l215 0" />
<path stroke-width="4" d="M5 40 l215 0" />
<path stroke-width="6" d="M5 60 l215 0" />
</g>
</svg>
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
SVG stroke-linecap 属性
strokelinecap属性定义不同类型的开放路径的终结：
下面是SVG代码：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g fill="none" stroke="black" stroke-width="6">
<path stroke-linecap="butt" d="M5 20 l215 0" />
<path stroke-linecap="round" d="M5 40 l215 0" />
<path stroke-linecap="square" d="M5 60 l215 0" />
</g>
</svg>
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
SVG stroke-dasharray 属性
strokedasharray属性用于创建虚线：
下面是SVG代码：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g fill="none" stroke="black" stroke-width="4">
<path stroke-dasharray="5,5" d="M5 20 l215 0" />
<path stroke-dasharray="10,10" d="M5 40 l215 0" />
<path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
</g>
</svg>
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
SVG 滤镜
SVG滤镜用来增加对SVG图形的特殊效果。
SVG 滤镜
在本教程中，我们将仅展示一个可能采用的特殊效果。基础知识展示后，你已经学会使用特殊效果，你应该能够适用于其他地方。这里的关键是给你一个怎样做SVG的想法，而不是重复整个规范。
SVG可用的滤镜是：
- feBlend - 与图像相结合的滤镜
- feColorMatrix - 用于彩色滤光片转换
- feComponentTransfer
- feComposite
- feConvolveMatrix
- feDiffuseLighting
- feDisplacementMap
- feFlood
- feGaussianBlur
- feImage
- feMerge
- feMorphology
- feOffset - 过滤阴影
- feSpecularLighting
- feTile
- feTurbulence
- feDistantLight - 用于照明过滤
- fePointLight - 用于照明过滤
- feSpotLight - 用于照明过滤
除此之外，您可以在每个 SVG 元素上使用多个滤镜！
SVG 模糊效果
注意： Internet Explorer和Safari不支持SVG滤镜！
<defs> 和 <filter>
所有互联网的SVG滤镜定义在<defs>元素中。<defs>元素定义短并含有特殊元素（如滤镜）定义。
<filter>标签用来定义SVG滤镜。<filter>标签使用必需的id属性来定义向图形应用哪个滤镜？
SVG <feGaussianBlur>
实例 1
<feGaussianBlur> 元素是用于创建模糊效果：
下面是SVG代码：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
对于Opera用户：查看SVG文件（右键单击SVG图形预览源）。
代码解析：
- <filter>元素id属性定义一个滤镜的唯一名称
- <feGaussianBlur>元素定义模糊效果
- in="SourceGraphic"这个部分定义了由整个图像创建效果
- stdDeviation属性定义模糊量
- <rect>元素的滤镜属性用来把元素链接到"f1"滤镜
原文：http://www.runoob.com/svg/svg-text.html
转自：SVG 教程 （五）文本，Stroke 属性，SVG 滤镜，SVG 模糊效果