SVG 实例

在线实例

下面的例子是把SVG代码直接嵌入到HTML代码中。

Google Chrome，Firefox，Internet Explorer 9，和Safari都支持。

注意： 下面的例子将不会在 Opera 运行，即使Opera支持SVG - 它也不支持SVG在HTML代码中直接使用。

SVG 实例

SVG基本形状

一个圆
矩形
不透明矩形
一个矩形不透明2
一个带圆角矩形
一个椭圆
累叠而上的三个椭圆
两个椭圆
一条线
三角形
四边形
一个星星
另一个星星
折线
另一个折线
路径
二次贝塞尔曲线
编写文字
旋转文本
几行文字
文本链接
定义一条线，文本或轮廓颜色（stroke）
定义一条线宽度，文本或轮廓（stroke-width）
stroke-linecap属性定义不同类型的开放路径的终结
定义虚线（stroke-dasharray）

SVG 滤镜

feGaussianBlur - 模糊效果
feOffset - 偏移一个矩形，然后混合偏移图像顶部
feOffset - 模糊偏移图像
feOffset - 使阴影变黑色
feOffset - 为阴影涂上一层颜色
一个feBlend滤镜
滤镜 1
滤镜 2
滤镜 3
滤镜 4
滤镜 5
滤镜 6

SVG 渐变

水平线性渐变从黄色到红色的椭圆形
垂直线性渐变从黄色到红色椭圆形
水平线性渐变从黄色到红色并添加一个椭圆内文本
放射性渐变从白色到蓝色椭圆
放射性渐变从白色到蓝色的另一个椭圆

SVG 杂项

重复用 5 秒时间淡出的矩形
矩形会变大并改变颜色
会改变颜色的三个矩形
沿一个运动路径移动的文本
沿一个运动路径移动、旋转并缩放的文本
沿一个运动路径移动、旋转并缩放的文本 + 逐步放大并改变颜色的矩形
旋转椭圆