svg_examples

SVG 示例展示

探索 SVG 能力

下面列出的示例展示了 SVG 的各种特性。大多数现代网页浏览器广泛支持将 SVG 代码直接嵌入到 HTML 中，让你能够本地渲染这些图形。

每个项目通常代表一个常见的用例或特定的 SVG 功能。点击它们（如果它们是交互式链接）可以查看代码和渲染后的图形。

SVG 特性示例

SVG 基本形状

一个圆形 一个矩形 一个带透明度的矩形 一个带透明度的矩形（另一个示例） 一个带圆角的矩形 一个椭圆 三个叠在一起的椭圆 两个椭圆 一条直线 一个有三条边的多边形（三角形） 一个有四条边的多边形（四边形） 一个星星（使用多边形或路径） 另一种星星变体 一条折线（由直线段组成的开放形状） 另一个折线示例 一个路径（复杂形状） 一个二次贝塞尔曲线 渲染文本 旋转文本 多行文本 作为超链接的文本 定义描边颜色 (stroke) 定义描边粗细 (stroke-width) 定义线条末端样式 (stroke-linecap) 创建虚线 (stroke-dasharray)

SVG 滤镜

高斯模糊效果 (feGaussianBlur) 偏移元素并混合 (feOffset, feBlend) 模糊偏移图像以创建柔和阴影 (feOffset, feGaussianBlur) 创建黑色阴影 (feOffset, SourceAlpha) 给阴影着色 (feColorMatrix) 一个 feBlend 滤镜示例 滤镜示例 1 滤镜示例 2 滤镜示例 3 滤镜示例 4 滤镜示例 5 滤镜示例 6

SVG 渐变

带有水平线性渐变的椭圆（黄色到红色） 带有垂直线性渐变的椭圆（黄色到红色） 带有水平线性渐变和文本的椭圆 带有径向渐变的椭圆（白色到蓝色） 另一个带有径向渐变的椭圆示例

SVG 其他（包括使用 SMIL 的动画）

带有重复淡出动画的矩形（5 秒） 一个颜色变化的生长矩形（动画） 三个颜色变化的矩形（动画） 沿着运动路径移动的文本（动画） 沿着运动路径移动、旋转和缩放的文本（动画） 组合动画：运动路径上的文本和一个颜色变化的生长矩形 旋转的椭圆（动画）

注意： 虽然 SMIL (Synchronized Multimedia Integration Language) 用于某些 SVG 动画，但 CSS Animations 和 Web Animations API 也是动画 SVG 元素的强大现代替代方案，特别是在与其它 HTML 内容协调时。