DEMO: http://sources.ikeepstudying.com/svg/class/class3.php SVG <circle> SVG 圆形 - <circle> <circle> 标签可用来创建一个圆:…
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
呢?
这不是我们的重点了解移步到《CSS Baseline: The Good, The Bad And The Ugly》 译文:《CSS基线之道》 在svg中xy 的坐标就是 基于baseline
如图:
所以就看不到预想的文字没有距上边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 的最后一个规则定义多出的字母。
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
写一个文本:
下面是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 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属性定义一条线,文本或元素轮廓颜色:
下面是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 入门教程系列(列表):
本文:SVG 教程 (五)文本,Stroke 属性,SVG 滤镜,SVG 模糊效果