SVG 教程 (五)文本,Stroke 属性,SVG 滤镜,SVG 模糊效果

Elena0 2015-07-16

SVG <text>


SVG 文本 - <text>

<text> 元素用于定义文本。


实例 1

写一个文本:

SVG 教程 (五)文本,Stroke 属性,SVG 滤镜,SVG 模糊效果

下面是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 教程 (五)文本,Stroke 属性,SVG 滤镜,SVG 模糊效果

下面是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 教程 (五)文本,Stroke 属性,SVG 滤镜,SVG 模糊效果

下面是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 教程 (五)文本,Stroke 属性,SVG 滤镜,SVG 模糊效果

下面是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 教程 (五)文本,Stroke 属性,SVG 滤镜,SVG 模糊效果

下面是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 教程 (五)文本,Stroke 属性,SVG 滤镜,SVG 模糊效果

下面是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 教程 (五)文本,Stroke 属性,SVG 滤镜,SVG 模糊效果

下面是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 教程 (五)文本,Stroke 属性,SVG 滤镜,SVG 模糊效果

下面是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 教程 (五)文本,Stroke 属性,SVG 滤镜,SVG 模糊效果

下面是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 教程 (五)文本,Stroke 属性,SVG 滤镜,SVG 模糊效果 除此之外,您可以在每个 SVG 元素上使用多个滤镜!

 

SVG 模糊效果


注意: Internet Explorer和Safari不支持SVG滤镜!


<defs> 和 <filter>

所有互联网的SVG滤镜定义在<defs>元素中。<defs>元素定义短并含有特殊元素(如滤镜)定义。

<filter>标签用来定义SVG滤镜。<filter>标签使用必需的id属性来定义向图形应用哪个滤镜?


 

SVG <feGaussianBlur>

 

实例 1

<feGaussianBlur> 元素是用于创建模糊效果:

SVG 教程 (五)文本,Stroke 属性,SVG 滤镜,SVG 模糊效果SVG 教程 (五)文本,Stroke 属性,SVG 滤镜,SVG 模糊效果

下面是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 模糊效果

相关推荐