如何在HTML5中使用SVG

对于开发人员而言，最直观的区别在于: 1.对于画在Canvas上的部件，你需要处理重绘。而SVG则不用，你修改svg dom则系统会自动帮你重绘 2.Hittest，即canvas不负责帮你侦测鼠标/触摸事件发生在哪一个图形元件上而svg可以。 3.Canvas效率高得多 canvas的工作方式就像传统的2d图形引擎比如GDI而SVG的工作方式更像WPF(XAML)、HTML/CSS这类由标记控制的绘图引擎

通过<img />标签

这可能是最简单的使用SVG的方法，而且是开发者最熟悉的方法。SVG文件能够像位图一样通过<img />标签在网页上使用。

缺点是：SVG图像可能包含动画，但链接里面的文件和任何脚本和交互的SVG代码部分将被忽略。

通过CSS

可以通过CSS来有效的使用SVG：像位图一样，SVG文件能够通过background-image实现来渲染。

通过@font-face作为字体使用

大多数字体都是矢量图形，SVG可以通过CSS来作为文字嵌入到网页中，从而替代.woft、.otf 和 .eof 格式的文字。代码像下面这样：

@font-face {font-family: GabbaGrabbaurl('gabbagabba.otf’) format('opentype’),url('gabbagabba.svg#gabba’) format('svg’)}

因为它们缺乏真正的字体控制如字距和有限的浏览器支持，应该在使用SVG文字时给它们一个回退的方法。

方法/步骤

HTML结构

该鼠标点击按钮特效中每一个可点击的元素都是一个<button>按钮

CSS样式

以下是该css3点击按钮特效的通用CSS样式：

插件中通过在点击按钮时使用javascript来为它添加相应的动画CLASS来执行动画效果：

上面的CSS代码可以生成如下图的动画效果：

在“Stana”效果中，使用了html5 SVG clipPath，在它上面添加了一个transition。这个效果只能在Chrome浏览器中才能看到效果。

在“Stoja”效果中使用了CSS clip-path属性，这个效果也需要浏览器的支持才能看得到的。

---