html5中外描边怎么写,如何制作HTML5 SVG描边文字

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

STROKED SVG TEXT

效果如下：

正如你所见，在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作为标题和一些文字特效的内容，我们将在后续文章中讲解。

更多参考：

相关

Related Posts

SVG 入门教程系列列表 (含视频)

SVG 入门教程系列列表： SVG 教程 (一) SVG 教程 (二)矩形 SVG…

HTML5对比HTML4带来的新变化

HTML5入门 HTML5是HTML的最新版本，目标是更好地开发网络应用程序。 HTML5比HTML4拥有更简洁的语法并且提供了更多新的特性。 本文将对HTML5做一个大体的介绍。 HTML5能做什么？ 1. 离线存储 HTML5可以让你的WEB应用程序离线也能运行,它提供了一个称作“应用程序缓存"的离线存储功能，因此即使当用户离线，浏览器仍然能够访问到它所需的文件。 这些文件可以是HTML，CSS，Javascript…

SVG 教程 (一)

DEMO: http://sources.ikeepstudying.com/svg/class/class1.php SVG 简介 SVG 是使用 XML 来描述二维图形和绘图程序的语言。 学习之前应具备的基础知识： 继续学习之前，你应该对以下内容有基本的了解：…