集册 SVG 教程 SVG 实例

SVG 实例

Xebcnor     最近更新时间:2019-09-11 06:38:59

454

SVG 实例

在线实例

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

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

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

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渐变

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

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

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

展开阅读全文