SVG 教程入门-JavaScript中文网-JavaScript教程资源分享门户

SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的 XML 标记语言。在 web 前端开发中，SVG 是一个非常强大且灵活的工具，可以用来创建各种图形、动画和交互效果。本章节将介绍 SVG 的基本概念、语法和常见用法。

什么是 SVG？

SVG 是一种基于 XML 的标记语言，用于描述二维图形和动画。与传统的基于像素的图像格式（如 JPEG、PNG）不同，SVG 是基于矢量的，可以无损地缩放到任意大小而不会失真。这使得 SVG 特别适合用于响应式 web 设计和高清屏幕显示。

SVG 图形以 <svg> 元素开始，其中包含了图形的所有内容。常见的 SVG 元素包括 <rect>（矩形）、<circle>（圆形）、<line>（直线）等。每个元素都有一些属性，用来定义其外观和行为。

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="red" />
</svg>

上面的代码创建了一个宽高为 100px 的 SVG 画布，并在其中绘制了一个红色的矩形。其中 x 和 y 属性表示矩形左上角的坐标，width 和 height 属性表示矩形的宽度和高度，fill 属性表示填充颜色。

SVG 使用一个以左上角为原点的坐标系统，x 轴向右增长，y 轴向下增长。可以通过设置 viewBox 属性来定义 SVG 坐标系的大小和位置。

<svg viewBox="0 0 100 100" width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="blue" />
</svg>

上面的代码将 SVG 坐标系统定义为宽高为 100 的正方形区域，然后在其中绘制了一个蓝色的矩形。

SVG 支持多种图形变换操作，如平移、缩放、旋转等。可以使用 transform 属性来实现这些效果。

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="green" transform="translate(20, 20) rotate(45)" />
</svg>

上面的代码创建了一个绿色矩形，并对其进行了平移和旋转操作，使其向右下方移动了 20px，并顺时针旋转了 45 度。

以上就是关于 SVG 的基本概念、语法和常见用法的介绍。希望通过本章节的学习，你能对 SVG 有一个更深入的了解。在接下来的章节中，我们将继续探讨 SVG 的高级特性和实际应用。