SVG 学习之——SVG 实例

查看 SVG 文件

如果没有安装 SVG 查看器，您就无法查看 SVG 文件。

注释：Firefox 1.5 和 Opera 9 对 SVG 的支持是原生性的。假如您使用这些浏览器中的一款，就不必安装 SVG 查看器。

从 Adobe 免费下载 SVG 查看器。

查看 SVG 源代码

如需查看 SVG 源代码，请打开这些例子，然后在窗口中右键单击，选择“查看源代码”。

SVG 实例

SVG 形状

矩形 带有透明度的矩形 带有透明度的矩形 2 带有圆角的矩形 圆形 椭圆形 累叠而上的三个椭圆 两个椭圆 一条线 三角形 四边形 折线 路径 螺旋

SVG 滤镜

feGaussianBlur 滤镜 另一个feGaussianBlur 滤镜 feBlend 滤镜 feColorMatrix 滤镜 feComponentTransfer 滤镜 feOffset 滤镜 feOffset、feFlood、feComposite、feMerge 以及 feMergeNode feMorphology 滤镜 滤镜 1 滤镜 2 滤镜 3 滤镜 4 滤镜 5 滤镜 6

SVG 渐变

线形渐变 (水平渐变) 线形渐变 (垂直渐变) 放射性渐变 放射性渐变 2

SVG Misc

向矩形添加一个 "a" 元素，这样矩形就可以作为一个超级链接了。 当用户在圆上面点击时，使用 JavaScript 创建一个元素。 重复用 5 秒时间淡出的矩形 动态改变矩形的 x、y 以及 width、height 属性来创造出动画效果，并改变矩形的颜色 会改变颜色的三个矩形 沿一个运动路径移动的文本 沿一个运动路径移动、旋转并缩放的文本 沿一个运动路径移动、旋转并缩放的文本 + 逐步放大并改变颜色的矩形