W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

SVG 实例



尝试一下 实例

以下实例将SVG代码直接嵌入到HTML代码中。

这些是Firefox,Internet Explorer 9,Google Chrome,Opera和Safari支持的。


SVG 实例

SVG 基础形状

一个圆形
一个矩形
一个不透明的矩形
一个不透明的矩形2
一个带圆角的矩形
一个椭圆
累叠而上的三个椭圆
两个椭圆
一条直线
三角形
四边形
一个星星
另一个星星
一条折线
另一条折线
一个路径
二次贝塞尔曲线
编写文本
旋转文本
几行文字
文字链接
定义一条线,文本或轮廓颜色(stoke)
定义一条线宽度,文本或轮廓(stroke-width)
stroke-linecap属性定义不同类型的开放路径的终结
定义虚线(stroke-dasharray)

SVG 滤镜

feGaussianBlur - 模糊效果
feOffset - 偏移一个矩形,然后混合偏移图像顶部
feOffset - 模糊偏移图像
feOffset - 使阴影变黑色
feOffset - 为阴影涂上一层颜色
一个feBlend滤镜
滤镜 1
滤镜 2
滤镜 3
滤镜 4
滤镜 5
滤镜 6

SVG 渐变

水平线性渐变从黄色到红色的椭圆形
垂直线性渐变从黄色到红色椭圆形
水平线性渐变从黄色到红色并添加一个椭圆内文本
放射性渐变从白色到蓝色椭圆
放射性渐变从白色到蓝色的另一个椭圆

SVG 杂项

重复用 5 秒时间淡出的矩形
矩形会变大并改变颜色
会改变颜色的三个矩形
沿一个运动路径移动的文本
沿一个运动路径移动、旋转并缩放的文本
沿一个运动路径移动、旋转并缩放的文本 + 逐步放大并改变颜色的矩形
旋转椭圆