如何让svg组中的所有元素都改变颜色onclick (js)

要让SVG组中的所有元素在点击时改变颜色，你可以使用JavaScript来操作SVG元素的样式。以下是一个基本的实现方法：

基础概念

SVG（Scalable Vector Graphics）是一种基于XML的图像格式，用于描述二维矢量图形。SVG元素可以通过JavaScript进行操作，包括改变其样式属性。

实现步骤

获取SVG组元素：首先，你需要通过JavaScript获取到SVG组元素。
添加事件监听器：为SVG组元素添加一个点击事件监听器。
改变颜色：在事件监听器中，遍历组内的所有子元素，并改变它们的颜色。

示例代码

以下是一个简单的示例代码，展示了如何实现上述功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change SVG Color on Click</title>
    <style>
        .svg-group {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <svg width="200" height="200">
        <g id="svgGroup" class="svg-group">
            <circle cx="50" cy="50" r="40" fill="blue" />
            <rect x="100" y="10" width="50" height="50" fill="red" />
        </g>
    </svg>

    <script>
        document.getElementById('svgGroup').addEventListener('click', function() {
            const children = this.children;
            for (let i = 0; i < children.length; i++) {
                const child = children[i];
                const currentColor = child.getAttribute('fill');
                const newColor = currentColor === 'blue' ? 'green' : 'blue';
                child.setAttribute('fill', newColor);
            }
        });
    </script>
</body>
</html>

解释

HTML部分：定义了一个SVG元素，其中包含一个组（<g>），组内有两个子元素：一个圆形和一个矩形。
CSS部分：为SVG组添加了一个鼠标悬停时的指针样式，以提示用户该组是可点击的。
JavaScript部分：
- 使用document.getElementById获取SVG组元素。
- 为该元素添加一个点击事件监听器。
- 在事件监听器中，遍历组内的所有子元素，并根据当前颜色切换到新的颜色。