SVG 例子

亲自尝试示例

下面的示例将 SVG 代码直接嵌入到 HTML 代码中。

Firefox、Internet Explorer 9、Google Chrome、Opera 和 Safari 均支持此功能。

SVG 示例

SVG 基本形状

一个圆圈
矩形
不透明度的矩形
不透明度为 2 的矩形
圆角矩形
椭圆
三个椭圆相互叠放
两个椭圆
一条线
有三条边的多边形
有四条边的多边形
一个明星
另一颗星
折线
另一条折线
一条路径
二次贝塞尔曲线
撰写文本
旋转文本
多行文本
文本作为链接
定义线条、文本或轮廓的颜色（描边）
定义线条、文本或轮廓的宽度（笔触宽度）
定义开放路径的不同类型的结尾（stroke-linecap）
定义虚线（stroke-dasharray）

SVG 过滤器

feGaussianBlur - 模糊效果
feOffset - 偏移一个矩形，然后将原始图像混合到偏移图像的顶部
feOffset - 模糊偏移图像
feOffset - 使阴影变黑
feOffset - 将阴影视为颜色
feBlend 滤镜
过滤器 1
过滤器 2
过滤器 3
过滤器 4
过滤器 5
过滤器 6

SVG 渐变

具有从黄色到红色的水平线性渐变的椭圆
具有从黄色到红色的垂直线性渐变的椭圆
一个水平线性渐变从黄色到红色的椭圆，以及一段文字
具有从白色到蓝色的径向渐变的椭圆
另一个具有从白色到蓝色的径向渐变的椭圆

SVG 杂项

矩形在 5 秒内反复消失
一个会改变颜色的不断扩大的矩形
三个会改变颜色的矩形
沿运动路径移动文本
沿运动路径移动、旋转和缩放文本
沿运动路径移动、旋转和缩放文本 + 会改变颜色的不断扩大的矩形
旋转椭圆