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 秒时间淡出的矩形

矩形会变大并改变颜色

会改变颜色的三个矩形

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

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

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