SVG 实例

在线实例

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

几乎所有现代浏览器都支持 SVG（可缩放矢量图形）格式。

以下是一些主要浏览器的支持情况：

1. Google Chrome：全面支持SVG，版本从1.0开始。
2. Mozilla Firefox：全面支持SVG，版本从1.5开始。
3. Microsoft Edge：全面支持SVG。
4. Safari：全面支持SVG，版本从3.1开始。
5. Opera：全面支持SVG，版本从9.0开始。

移动浏览器支持:

• iOS Safari：全面支持SVG。
• Android Browser：全面支持SVG。
• Chrome for Android：全面支持SVG。

SVG 实例

SVG基本形状

一个圆

矩形

不透明矩形

一个矩形不透明2

一个带圆角矩形

一个椭圆

累叠而上的三个椭圆

两个椭圆

一条线

三角形

四边形

一个星星

另一个星星

折线

另一个折线

路径

二次贝塞尔曲线

编写文字

旋转文本

路径上文字

几行文字

文本链接

定义一条线，文本或轮廓颜色（stroke）

定义一条线宽度，文本或轮廓（stroke-width）

stroke-linecap属性定义不同类型的开放路径的终结：

定义虚线（stroke-dasharray）

SVG滤镜

feGaussianBlur - 模糊效果

feOffset - 偏移一个矩形，然后混合偏移图像顶部

feOffset - 模糊偏移图像

feOffset - 使阴影变黑色

feOffset - 为阴影涂上一层颜色

一个feBlend滤镜

一个feColorMatrix滤镜

一个feComponentTransfer滤镜

feOffset、feFlood、feComposite、feMerge 以及 feMergeNode

一个feMorphology滤镜

滤镜1

滤镜2

滤镜3

滤镜4

滤镜5

滤镜6

SVG渐变

水平线性渐变从黄色到红色的椭圆形

垂直线性渐变从黄色到红色椭圆形

水平线性渐变从黄色到红色并添加一个椭圆内文本

放射性渐变从白色到蓝色椭圆

放射性渐变从白色到蓝色的另一个椭圆

SVG杂项

重复用 5 秒时间淡出的矩形

矩形会变大并改变颜色

会改变颜色的三个矩形

沿一个运动路径移动的文本

沿一个运动路径移动、旋转并缩放的文本

沿一个运动路径移动、旋转并缩放的文本 + 逐步放大并改变颜色的矩形