矢量图形-嵌套与组合-图形的组合操作-前端-HTML5-书闪BookChips

135 - 矢量图形 - 嵌套与组合 - 图形的组合操作

作者：

贺及楼

成为作者

更新日期：2025-02-27 13:06:37

矢量图形 - 嵌套与组合 - 图形的组合操作

在 HTML5 中，我们可以使用 <svg>（Scalable Vector Graphics，可缩放矢量图形）元素来创建和操作矢量图形。矢量图形具有无损缩放的特性，在不同的设备和分辨率下都能保持清晰的显示效果。本文将重点介绍 SVG 中图形的嵌套与组合操作，通过具体的例子来展示如何利用这些操作创建复杂而有趣的图形。

基本概念

嵌套

在 SVG 中，嵌套是指在一个 SVG 元素内部放置其他 SVG 元素。通过嵌套，我们可以将多个简单的图形组合成一个更复杂的图形。嵌套的元素会继承其父元素的属性，如位置、变换等。

组合

组合是将多个图形作为一个整体进行操作的方法。在 SVG 中，我们可以使用 <g>（Group）元素来实现图形的组合。<g> 元素可以将多个图形元素组合在一起，方便对这些图形进行统一的变换、样式设置等操作。

演示代码及示例

简单的嵌套示例

下面的代码展示了如何在一个 SVG 元素中嵌套多个圆形：

<!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>
    <svg width="200" height="200">
        <!-- 外层圆形 -->
        <circle cx="100" cy="100" r="80" fill="blue" />
        <!-- 内层圆形 -->
        <circle cx="100" cy="100" r="40" fill="yellow" />
    </svg>
</body>
</html>

在这个示例中，我们在一个 SVG 元素中嵌套了两个圆形。外层圆形的半径为 80，填充颜色为蓝色；内层圆形的半径为 40，填充颜色为黄色。由于两个圆形的圆心位置相同，所以内层圆形会显示在外层圆形的内部。

使用 `<g>` 元素进行组合

下面的代码展示了如何使用 <g> 元素将多个图形组合在一起，并对组合后的图形进行统一的变换：

<!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>
    <svg width="300" height="300">
        <g transform="translate(50, 50) rotate(45)">
            <!-- 组合中的矩形 -->
            <rect x="0" y="0" width="100" height="50" fill="green" />
            <!-- 组合中的圆形 -->
            <circle cx="120" cy="25" r="25" fill="red" />
        </g>
    </svg>
</body>
</html>

在这个示例中，我们使用 <g> 元素将一个矩形和一个圆形组合在一起。通过 transform 属性，我们对组合后的图形进行了平移和旋转操作。具体来说，我们将组合后的图形向右平移 50 个单位，向下平移 50 个单位，并绕其原点旋转 45 度。

嵌套与组合的结合使用

下面的代码展示了如何将嵌套和组合结合使用，创建一个更复杂的图形：

<!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>
    <svg width="400" height="400">
        <g transform="translate(100, 100)">
            <!-- 外层组合 -->
            <rect x="0" y="0" width="200" height="200" fill="lightgray" />
            <g transform="translate(50, 50)">
                <!-- 内层组合 -->
                <circle cx="0" cy="0" r="50" fill="orange" />
                <circle cx="100" cy="0" r="50" fill="purple" />
            </g>
        </g>
    </svg>
</body>
</html>

在这个示例中，我们首先使用 <g> 元素将一个矩形和另一个 <g> 元素组合在一起，并将其平移到 (100, 100) 的位置。然后，在内部的 <g> 元素中，我们又组合了两个圆形，并将其平移到 (50, 50) 的位置。通过这种嵌套和组合的方式，我们可以创建出非常复杂的图形。

总结

操作	描述	示例元素
嵌套	在一个 SVG 元素内部放置其他 SVG 元素，子元素可继承父元素属性	`<circle>` 嵌套在 `<svg>` 中
组合	使用 `<g>` 元素将多个图形组合成一个整体，方便统一操作	`<rect>` 和 `<circle>` 组合在 `<g>` 中

通过嵌套和组合操作，我们可以在 HTML5 的 SVG 中创建出各种各样复杂而有趣的矢量图形。这些操作不仅可以提高代码的可读性和可维护性，还可以让我们更加灵活地控制图形的布局和样式。希望本文的介绍和示例能够帮助你更好地理解和应用 SVG 中的嵌套与组合操作。