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

SVG <text>


SVG 文本 – <text>

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

在svg中用使用<text>标签去定义一段文字。如 Example 1

在svg中写下

在平坦的路上曲折前行

<svg height="30" width="200">
    <text x="0" y="15" fill="red">在平坦的路上曲折前行</text>
</svg>

在例子1中 x="0" y="15" 是文字定位坐标 可能你会有疑问,为什么文字没有距离上边是15呢?这里首先你需要了解个概念baseline 熟悉css的同学会眼熟 会用到 vertical-align: baseline; 但是什么是 baseline呢?

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

这不是我们的重点了解移步到《CSS Baseline: The Good, The Bad And The Ugly》 译文:《CSS基线之道》 在svg中xy 的坐标就是 基于baseline 如图:

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

所以就看不到预想的文字没有距上边15px。

<tspan>标签

你也可以把<text>标签 设定为文本组,其中可以包含<tspan>,而且每个<tspan>都可以有不同的定位和文本格式。

<svg height="90" width="200">
    <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>

如果没有设置tspan 的 x y 那么文本会类似 css 中行内展示

svg中的文字连接

你可以把文字设置成链接

<svg height="30" width="200" 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>

这里注意下,按照html的习惯直接在a 标签里写文字是不可以的,文字不会显示,这里文字是个文本对象,你要设置这个对象的链接。

transform

到现在svg中的文字标签能满足常规的需要,看似简单,其实不然——“大有可为”!~

比如让文字旋转下Example 4

<svg height="60" width="200">
    <text x="0" y="15" fill="red" 
            transform="rotate(30 20,40)">在平坦的路上曲折前行</text>
</svg>

transform="rotate(30 20,40)" 表示在 (20.40)位置顺时针旋转30度

dx dy

svg 中虽然没有提供排版的相关支持,但是你可以 通过 dx dy 来设置错落的文字 让我们感受下:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="400" height="300" viewBox="0,0,400,300">
    <text x="10" y="20">
        <tspan dx="0 5 10 15 20">12345</tspan> 
    </text>
    <text x="10" y="65">
        <tspan dy="0 5 10 15 20">12345</tspan> 
    </text>
    <text x="10" y="150">
        <tspan dx="0 5 10 15 20" dy="0 5 10 15 20">12345</tspan> 
    </text>
    <text x="10" y="215">
        <tspan dx="0 5 10 15 20" dy="0 5 10 15 20">我爱你中国</tspan> 
    </text>
</svg>

rotate

rotate 文字的旋转属性,rotate可以是个数值列表分别作用于对应的字母

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="400" height="300" viewBox="0,0,400,300">
    <text x="10" y="20">
        <tspan rotate="0 5 10 15 25">在平坦的路上曲折前行</tspan> 
    </text>
</svg>

还是得把baseline拿出来,旋转的单位是度,因为我们的习惯是屏幕定位,所以旋转是沿着y轴顺时针旋转。旋转基于每个字母的基线和字母左边。在例子中,文字(字母)是多于rotate的,这时候按照rotate list 的最后一个规则定义多出的字母。

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

textLength

textLength不好理解,不是文字的长度的意思,指定文字以 textLength 的 SVG viewer去两端对齐排这些文字类似 css text-align:justify

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="400" height="300" viewBox="0,0,400,300">
    <text x="10" y="20">
        <tspan textLength="400" >在平坦的路上曲折前行</tspan> 
    </text>

</svg>

还有个属性配合textLength使用—-lengthAdjust lengthAdjust 有两个值spacing (默认)和 spacingAndGlyphs当设置成spacingAndGlyphs的时候,会拉伸字母,知道适合充满textLength 不太好理解,看下实例就懂了。

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="400" height="300" viewBox="0,0,400,300">
    <text x="0" y="20">
        <tspan 
                textLength="400" 
                lengthAdjust="spacing"
                >在平坦的路上曲折前行</tspan> 
    </text>
    <text x="0" y="80">
        <tspan 
                textLength="400" 
                lengthAdjust="spacingAndGlyphs"
                >在平坦的路上曲折前行</tspan> 
    </text>
</svg>

<path>的使用

<path>标签的使用: 使用过Illustrator的朋友都知道,我们可以让文字跟随路径,做出各种形状的文字。我们需要用<defs>来定义<path>(会在大漠之后相关文章中介绍)。定义好路径后,文字就可以跟着定义的路径跑了。

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="400" height="300" viewBox="0,0,400,300">
    <defs>
          <path id="a1" 
                  d="M0 50 C150 150 100 -50 300 50" 
                  stroke="#000" fill="none"/>
    </defs>
    <text>
       <textPath xlink:href="#a1">在平坦的路上曲折前行</textPath>
    </text>
    <text dy="30">
       <textPath startOffset="30%" xlink:href="#a1">在平坦的路上曲折前行</textPath>
    </text>

</svg>

xlink:href 来指定<path> startOffset 来指定在路径上的起始位置。

这里xlink:href 不但能指定路径,还能指定一段文字。


实例 1

写一个文本:

Snip20150715_21

下面是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

旋转的文字:

Snip20150715_22

下面是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

路径上的文字:

Snip20150715_23

下面是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> 元素):

Snip20150715_24

下面是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> 元素):

Snip20150715_25

下面是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 xmlns="http://www.w3.org/2000/svg"
     width="100px" height="30px" viewBox="0 0 1000 300">

  <text x="250" y="150" 
        font-family="Verdana" 
        font-size="55">
    Hello, out there
  </text>

  <!-- Show outline of canvas using 'rect' element -->
  <rect x="1" y="1" width="998" height="298"
        fill="none" stroke="1" stroke-width="2" />
</svg>

<text>元素用来绘制文本。下面这段代码展示了如何在坐标系中绘制一段文本。

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px">
  <text x="10" y="20">SVG Text Example</text>
</svg>

可以旋转SVG文本。下面的代码做了一个演示。

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px">
  <text x="10"  y="20" 
        transform="rotate(30 20,40)">
    SVG Text Rotation example
  </text>
</svg>

SVG文本还可以应用样式。

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px">
  <text x="10"  y="20"
        style="font-family: Times New Roman;
               font-size  : 24;
               stroke     : #00ff00;
               fill       : #0000ff;">
    SVG text styling
  </text>
</svg>

SVG Stroke 属性


SVG Stroke 属性

SVG提供了一个范围广泛stroke 属性。在本章中,我们将看看下面:

  • stroke
  • stroke-width
  • stroke-linecap
  • stroke-dasharray

所有stroke属性,可应用于任何种类的线条,文字和元素就像一个圆的轮廓。


SVG stroke 属性

Stroke属性定义一条线,文本或元素轮廓颜色:

Snip20150715_26

下面是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属性定义了一条线,文本或元素轮廓厚度:

Snip20150715_27

下面是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属性定义不同类型的开放路径的终结:

Snip20150715_28

下面是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属性用于创建虚线:

Snip20150715_29

下面是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 – 用于照明过滤

Remark 除此之外,您可以在每个 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动画入门

SVG动画入门(二)

SVG技术入门:线条动画实现原理

如何使用CSS来修改SVG原点和制作SVG动画

纯CSS实现帅气的SVG路径描边动画效果

SVG矢量绘图 path路径详解(基本画法)

SVG矢量绘图 path路径详解(贝塞尔曲线及平滑)

Web流程图绘制使用raphael

 

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

One Comment

Leave a Reply