矢量图形 - 基本形状 - 绘制 SVG 椭圆

前端 - HTML5 《矢量图形 - 基本形状 - 绘制 SVG 椭圆》

在前端开发中，矢量图形的应用越来越广泛，它能够在不同的设备和分辨率下保持清晰的显示效果。SVG（Scalable Vector Graphics）作为一种基于 XML 语法的矢量图形格式，为我们提供了强大的绘图能力。本文将详细介绍如何在 HTML5 中绘制 SVG 椭圆。

1. SVG 椭圆的基本概念

SVG 中的椭圆由两个半径（长半轴和短半轴）以及椭圆的中心点位置来定义。通过指定这些参数，我们可以绘制出不同大小和位置的椭圆。

椭圆的关键属性

属性名	描述
`cx`	椭圆中心点的 x 坐标，默认值为 0。
`cy`	椭圆中心点的 y 坐标，默认值为 0。
`rx`	椭圆的水平半径，必须为正数。
`ry`	椭圆的垂直半径，必须为正数。

2. 绘制 SVG 椭圆的基本语法

在 HTML5 中，我们可以使用 <ellipse> 标签来绘制 SVG 椭圆。基本语法如下：

<svg width="200" height="200">
    <ellipse cx="100" cy="100" rx="50" ry="30" fill="blue" />
</svg>

代码解释

<svg> 标签：用于创建一个 SVG 绘图区域，width 和 height 属性分别指定了绘图区域的宽度和高度。
<ellipse> 标签：用于绘制椭圆。
- cx="100"：指定椭圆中心点的 x 坐标为 100。
- cy="100"：指定椭圆中心点的 y 坐标为 100。
- rx="50"：指定椭圆的水平半径为 50。
- ry="30"：指定椭圆的垂直半径为 30。
- fill="blue"：指定椭圆的填充颜色为蓝色。

3. 实际演示代码

下面是一个包含多个椭圆的完整 HTML 示例，展示了不同位置和大小的椭圆：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绘制 SVG 椭圆</title>
</head>
<body>
    <h1>绘制 SVG 椭圆示例</h1>
    <svg width="400" height="400">
        <!-- 第一个椭圆 -->
        <ellipse cx="100" cy="100" rx="50" ry="30" fill="red" />
        <!-- 第二个椭圆 -->
        <ellipse cx="300" cy="100" rx="30" ry="50" fill="green" />
        <!-- 第三个椭圆 -->
        <ellipse cx="200" cy="300" rx="60" ry="60" fill="yellow" />
    </svg>
</body>
</html>

代码解释

我们创建了一个宽度和高度均为 400 的 SVG 绘图区域。
在这个区域内，我们绘制了三个不同的椭圆：
- 第一个椭圆的中心点在 (100, 100)，水平半径为 50，垂直半径为 30，填充颜色为红色。
- 第二个椭圆的中心点在 (300, 100)，水平半径为 30，垂直半径为 50，填充颜色为绿色。
- 第三个椭圆的中心点在 (200, 300)，水平半径和垂直半径均为 60，填充颜色为黄色。

4. 椭圆的其他属性

除了上述的基本属性外，<ellipse> 标签还支持一些其他的属性，用于进一步定制椭圆的外观。

边框属性

stroke：指定椭圆的边框颜色。
stroke-width：指定椭圆边框的宽度。

示例代码

<svg width="200" height="200">
    <ellipse cx="100" cy="100" rx="50" ry="30" fill="lightblue" stroke="black" stroke-width="2" />
</svg>

在这个示例中，我们为椭圆添加了黑色的边框，边框宽度为 2。

总结

通过使用 <ellipse> 标签和相应的属性，我们可以在 HTML5 中轻松地绘制出各种不同大小、位置和颜色的椭圆。这些椭圆不仅可以用于简单的图形展示，还可以结合 CSS 和 JavaScript 实现更加复杂的交互效果。希望本文能够帮助你掌握 SVG 椭圆的绘制方法，为你的前端开发增添更多的创意和可能性。