SVG 关键点属性

简介

SVG（Scalable Vector Graphics）是一种用于定义可缩放矢量图形的标记语言。SVG 图像由基本的形状、路径、文本和图像组成，这些都可以通过一些属性来控制其外观和行为。其中一些属性称为关键点属性（key-point attributes），它们可以用来定义图像的关键特征，是使用 SVG 时必须了解和掌握的重要内容。

常见关键点属性

viewBox

viewBox 属性用于定义可见区域的范围和位置，它指定了图像在用户坐标系统中应该如何放置和缩放。它是一个包含四个数字的空格分隔列表，分别代表可见区域的左上角 x 坐标、左上角 y 坐标、宽度和高度。例如：

<svg viewBox="0 0 100 100">
  <!-- ... -->
</svg>

表示 SVG 图像的可见区域从原点开始，宽度为 100，高度为 100。

width 和 height

width 和 height 属性用于指定 SVG 图像的宽度和高度。这两个属性可以与 viewBox 属性一起使用，以控制图像在页面上的大小和比例。例如：

<svg viewBox="0 0 100 100" width="200" height="200">
  <!-- ... -->
</svg>

表示 SVG 图像的宽度和高度都为 200。

fill 和 stroke

fill 和 stroke 属性用于控制 SVG 形状的填充和描边。fill 属性用于指定填充颜色，可以是颜色值、渐变或图案。stroke 属性用于指定描边颜色和宽度。下面是一个例子：

<rect x="20" y="20" width="60" height="60" fill="#ff0000" stroke="#000000" stroke-width="2" />

表示一个宽为 60，高为 60，以（20,20）为左上角的矩形，填充颜色为红色，描边颜色为黑色，描边宽度为 2 像素。

transform

transform 属性用于表示 SVG 元素的变换，可以用来平移、旋转、缩放和倾斜元素。它是一个空格分隔列表，每个元素代表一个变换操作。常见的变换有 translate（平移）、rotate（旋转）、scale（缩放）和 skewX/skewY（倾斜）。例如：

<rect x="20" y="20" width="60" height="60" transform="rotate(45) scale(1.5)" />

表示对一个矩形进行了 45 度的旋转和 1.5 倍的缩放。

总结

本文介绍了 SVG 图像中的关键点属性，包括 viewBox、width、height、fill、stroke 和 transform。掌握这些属性可以帮助开发者更好地使用 SVG，实现自己需要的图形效果。