SVG 实例

上一节:SVG 渐变- 放射性下一节:SVG 参考手册

优化或报错有奖

在线实例

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

谷歌Chrome，火狐，Internet Explorer9，和Safari都支持。

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

SVG 实例

SVG基本形状

一个圆

矩形

不透明矩形

一个矩形不透明2

一个带圆角矩形

一个椭圆

累叠而上的三个椭圆

两个椭圆

一条线

三角形

四边形

一个星星

另一个星星

折线

另一个折线

路径

二次贝塞尔曲线

编写文字

旋转文本

路径上文字

几行文字

文本链接

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

定义一条线宽度，文本或轮廓（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 秒时间淡出的矩形

矩形会变大并改变颜色

会改变颜色的三个矩形

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

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

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

上一节:SVG 渐变- 放射性下一节:SVG 参考手册

优化或报错有奖