SVG 类型属性

SVG（Scalable Vector Graphics，可缩放矢量图形）是一种使用 XML 格式定义 2D 图形的格式，可以通过使用 SVG 属性来创建和控制图像。本文将向程序员介绍 SVG 类型属性，并提供相关代码示例。

基本类型

<rect> 属性

<rect> 属性表示矩形元素，可以通过其属性控制矩形的位置、尺寸、填充等。常用属性包括：

• x：矩形左上角 x 轴坐标值
• y：矩形左上角 y 轴坐标值
• width：矩形宽度
• height：矩形高度
• fill：矩形填充颜色

示例代码：

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

<circle> 属性

<circle> 属性表示圆形元素，可以通过其属性控制圆形的位置、半径、填充等。常用属性包括：

• cx：圆形中心点 x 轴坐标值
• cy：圆形中心点 y 轴坐标值
• r：圆形半径
• fill：圆形填充颜色

示例代码：

<svg>
  <circle cx="50" cy="50" r="30" fill="blue" />
</svg>

<line> 属性

<line> 属性表示直线元素，可以通过其属性控制直线的位置、长度、宽度、颜色等。常用属性包括：

• x1：直线起点 x 轴坐标值
• y1：直线起点 y 轴坐标值
• x2：直线终点 x 轴坐标值
• y2：直线终点 y 轴坐标值
• stroke：直线颜色
• stroke-width：直线宽度

示例代码：

<svg>
  <line x1="10" y1="10" x2="50" y2="50" stroke="black" stroke-width="2" />
</svg>

<path> 属性

<path> 属性表示路径元素，可以通过其属性控制路径的形状、颜色等。常用属性包括：

• d：路径数据，使用命令和参数定义路径
• stroke：路径颜色
• stroke-width：路径宽度

示例代码：

<svg>
  <path d="M 10 10 L 50 50 H 100 V 150" stroke="black" stroke-width="2" />
</svg>

高级类型

<g> 属性

<g> 属性表示分组元素，可以通过其属性将多个元素分组。常用属性包括：

• transform：分组变换，包括缩放、旋转、平移等操作

示例代码：

<svg>
  <g transform="translate(100, 100)">
    <circle cx="0" cy="0" r="50" fill="yellow" />
    <rect x="-25" y="-25" width="50" height="50" fill="blue" />
  </g>
</svg>

<text> 属性

<text> 属性表示文本元素，可以通过其属性控制文本的位置、内容、字体等。常用属性包括：

• x：文本左侧 x 轴坐标值
• y：文本基线 y 轴坐标值
• fill：文本颜色
• font-size：字体大小
• font-family：字体样式

示例代码：

<svg>
  <text x="50" y="50" fill="red" font-size="20" font-family="Arial">Hello SVG!</text>
</svg>

<image> 属性

<image> 属性表示图像元素，可以通过其属性显示外部图像。常用属性包括：

• x：图像左侧 x 轴坐标值
• y：图像上侧 y 轴坐标值
• width：图像宽度
• height：图像高度
• href：外部图像路径

示例代码：

<svg>
  <image x="50" y="50" width="100" height="100" href="example.jpg" />
</svg>

总结

本文向程序员介绍了 SVG 类型属性，包括基本类型如 <rect>、<circle>、<line>、<path>，以及高级类型如 <g>、<text>、<image> 等。掌握这些属性可以帮助开发者更好的创建和控制 SVG 图像。