如何制作HTML5 SVG描边文字

在很多时候,SVG是最容易在网页上做出文字特效的方法。现在SVG已经被所有的现代浏览器支持,包括IE9。要在页面上制作SVG文字,可以直接将SVG代码插入带页面中,SVG文字代码十分简单易懂。如下是一段SVG描边文字的代码:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <text fill="#e96" style="font-size:60px; font-family: Futura Condensed ExtraBold, Arial Black, sans-serif; color: yellow;" stroke = "black" stroke-width = "2px">STROKED SVG TEXT</text>
</svg>

效果如下:

搜狗截图20160811123317

正如你所见,在HTML中制作SVG描边文字是一件非常容易的事情。SVG文字和和普通文本的主要区别是它不能使用color属性(SVG文字可以通过fill属性来改变文字颜色。另外提一点, y 属性用于设置文字的基线)。

SVG制作文字描边效果也比使用CSS来实现要简单得多。

既然SVG文字如此好用,为什么不在网页中广泛使用它们呢?有以下几个原因:

  • 浏览器对SVG的支持:虽然现代所有的现代浏览器,如Firefox、Chrome 和 Safari,以及IE9等都支持SVG,但是IE8级以下的浏览器不支持SVG,想要在它们中使用SVG需要使用javascript来实现。
  • SVG1.1没有文本换行功能,使它不适合在文章正文中使用。
  • 拷贝SVG文本在不同的浏览器上仍存在问题:你会发现你可以在最新版本的Chrome 和 Safari浏览器上复制和粘贴SVG文本,但是在Firefox浏览器上却不行。

通过本文的学习,你可以将SVG作为普通文字来使用(在ISO4中,网页的文字使用的就是SVG格式),至于将SVG作为标题和一些文字特效的内容,我们将在后续文章中讲解。

 

转自:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201501081128.html

更多参考:

SVG 系列教程列表

SVG动画入门

SVG动画入门(二)

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

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

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

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

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

Web流程图绘制使用raphael

HTML5对比HTML4带来的新变化

 

本文:如何制作HTML5 SVG描边文字