SVG 实例
亲自试一试实例
下面的例子将 SVG 代码直接嵌入到 HTML 代码中。
Firefox、Internet Explorer 9、Google Chrome、Opera 和 Safari 都支持这么做。
SVG 实例
SVG 基础形状
- 圆
- 长方形
- 不透明的矩形
- 不透明度为 2 的矩形
- 带圆角的矩形
- 椭圆
- 三个椭圆彼此重叠
- 两个椭圆
- 线
- 有三个边的多边形
- 有四个边的多边形
- 星星
- 另一个星星
- 折线
- 另一条折线
- 路径
- 二次贝塞尔曲线
- 写一段文字
- 旋转文本
- 多行文本
- 作为链接的文本
- 定义线条、文本或轮廓的颜色 (stroke)
- 定义线条、文本或轮廓的宽度 (stroke-width)
- 定义开放路径的不同类型的结尾 (stroke-linecap)
- 定义虚线 (stroke-dasharray)
SVG 滤镜
- feGaussianBlur - 模糊效果
- feOffset - 偏移一个矩形，然后将原始图像混合到偏移图像的顶部
- feOffset - 模糊偏移的图像
- feOffset - 使阴影变黑
- feOffset - 将阴影处理为某种颜色
- feBlend 滤镜
- 滤镜 1
- 滤镜 2
- 滤镜 3
- 滤镜 4
- 滤镜 5
- 滤镜 6