当前位置：首页 > news >正文

SVG 参考手册

news 2025/11/3 10:10:21

SVG 参考手册

引言

SVG（可缩放矢量图形）是一种基于可扩展标记语言（XML）的图形图像格式。SVG 图像在放大或缩小时不会失去清晰度，因此非常适合用于网页设计、移动应用和其他需要高质量图形显示的场合。本参考手册旨在为开发者提供SVG的基础知识、常用标签、属性以及高级应用技巧。

SVG 简介

什么是SVG？

SVG 是一种用于描述二维图形的 XML 格式。与传统的位图格式（如 JPEG、PNG）不同，SVG 图像是基于数学描述的，这意味着它们可以无限放大而不失真。

SVG 的优势

可缩放：SVG 图像可以无限放大或缩小，而不会失真。
可编辑：SVG 图像可以使用文本编辑器进行编辑，便于修改和更新。
可交互：SVG 支持交互式功能，如事件处理和动画。
跨平台：SVG 图像可以在任何支持 SVG 的浏览器中查看。

SVG 基础

SVG 基本结构

一个 SVG 图像的基本结构如下：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><!-- 图形内容 -->
</svg>

width 和 height：定义 SVG 图像的宽度和高度。
xmlns：定义 SVG 命名空间。

常用图形元素

SVG 提供了多种图形元素，如矩形、圆形、椭圆、多边形、线段等。以下是一些常用图形元素的示例：

<!-- 矩形 -->
<rect x="10" y="10" width="100" height="50" fill="blue" stroke="black" stroke-width="2" /><!-- 圆形 -->
<circle cx="50" cy="50" r="40" fill="red" stroke="black" stroke-width="2" /><!-- 椭圆 -->
<ellipse cx="50" cy="50" rx="40" ry="20" fill="green" stroke="black" stroke-width="2" /><!-- 多边形 -->
<polygon points="10,10 50,10 50,50 10,50" fill="purple" stroke="black" stroke-width="2" /><!-- 线段 -->
<line x1="10" y1="10" x2="50" y2="50" stroke="orange" stroke-width="2" />

SVG 属性

SVG 图形元素可以具有多种属性，用于定义其外观和行为。以下是一些常用属性的示例：

fill：定义图形的填充颜色。
stroke：定义图形的边框颜色。
stroke-width：定义图形边框的宽度。
x 和 y：定义图形的位置。
width 和 height：定义图形的宽度和高度。

SVG 高级应用

动画

SVG 支持多种动画效果，如平移、缩放、旋转等。以下是一个简单的动画示例：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="red" stroke="black" stroke-width="2"><animate attributeName="cx" from="50" to="150" dur="2s" fill="freeze" /></circle>
</svg>

交互

SVG 支持交互式功能，如事件处理和用户输入。以下是一个简单的交互示例：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="red" stroke="black" stroke-width="2" id="myCircle" /><script>document.getElementById("myCircle").addEventListener("click", function() {alert("Circle clicked!");});</script>
</svg>