SVG 点属性

SVG（Scalable Vector Graphics）是一种以 XML 为基础的矢量图形格式，可用于创建可缩放的图像。在 SVG 中，点是指由 x 和 y 坐标组成的对象。点属性可用于在 SVG 中描述和控制点。

常见点属性

下面是一些常见的 SVG 点属性：

cx

描述圆形或椭圆形元素的中心 x 坐标。

<circle cx="50" cy="50" r="40" />

cy

描述圆形或椭圆形元素的中心 y 坐标。

<circle cx="50" cy="50" r="40" />

r

描述圆形或椭圆形元素的半径。

<circle cx="50" cy="50" r="40" />

x

描述矩形元素的左上角 x 坐标。

<rect x="10" y="10" width="100" height="100" />

y

描述矩形元素的左上角 y 坐标。

<rect x="10" y="10" width="100" height="100" />

points

描述一个多边形元素的顶点坐标。points 属性的值应该是一组以逗号分隔的坐标对，每对坐标用空格隔开。

<polygon points="0,0 100,0 100,100 0,100" />

实例

下面是一个使用 SVG 点属性来创建一个含有多个圆形的 SVG 元素的示例：

<svg width="300" height="300">
  <circle cx="50" cy="50" r="25" fill="red" />
  <circle cx="150" cy="50" r="25" fill="green" />
  <circle cx="250" cy="50" r="25" fill="blue" />
  <circle cx="100" cy="150" r="25" fill="yellow" />
  <circle cx="200" cy="150" r="25" fill="purple" />
</svg>

该示例创建了一个宽度为 300 像素，高度为 300 像素的 SVG 元素。该元素中包含五个圆形，每个圆形的颜色不同且位置不同。

结论

SVG 点属性可用于描述和控制 SVG 元素中的点。常用的 SVG 点属性包括 cx、cy、r、x、y 和 points。在使用 SVG 时，程序员应该学习这些点属性以及它们在 SVG 元素中的含义。