使用CSS选择器更改SVG填充的颜色/样式

使用 CSS 选择器更改 SVG 元素的填充颜色或样式是一种常见的做法，特别是在需要动态调整 SVG 图像的外观时。以下是一些示例，展示了如何使用 CSS 选择器来更改 SVG 元素的填充颜色和样式。

示例 1：内联 SVG

如果你的 SVG 是内联的（即直接嵌入在 HTML 中），你可以直接使用 CSS 选择器来更改其样式。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG with CSS</title>
    <style>
        /* 使用 CSS 选择器更改 SVG 元素的填充颜色 */
        .my-svg .cls-1 {
            fill: red;
        }
        .my-svg .cls-2 {
            fill: blue;
        }
    </style>
</head>
<body>
    <svg class="my-svg" width="100" height="100" viewBox="0 0 100 100">
        <circle class="cls-1" cx="50" cy="50" r="40"/>
        <rect class="cls-2" x="10" y="10" width="30" height="30"/>
    </svg>
</body>
</html>

在这个示例中，我们有一个内联的 SVG，其中包含一个圆形和一个矩形。我们使用 CSS 选择器 .my-svg .cls-1 和 .my-svg .cls-2 来更改它们的填充颜色。

示例 2：外部 SVG 文件

如果你的 SVG 存储在外部文件中，你可以使用 <object>、<embed> 或 <iframe> 标签将其嵌入到 HTML 中。然后，你可以使用 JavaScript 动态更改其样式。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG with CSS</title>
    <style>
        /* 初始样式 */
        .my-svg .cls-1 {
            fill: green;
        }
        .my-svg .cls-2 {
            fill: yellow;
        }
    </style>
</head>
<body>
    <object id="mySvg" type="image/svg+xml" data="example.svg" class="my-svg"></object>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var svgObject = document.getElementById("mySvg");
            svgObject.addEventListener("load", function() {
                var svgDoc = svgObject.contentDocument;
                var circle = svgDoc.querySelector(".cls-1");
                var rect = svgDoc.querySelector(".cls-2");

                // 更改填充颜色
                circle.style.fill = "red";
                rect.style.fill = "blue";
            });
        });
    </script>
</body>
</html>

在这个示例中，我们使用 <object> 标签嵌入了一个外部的 SVG 文件 example.svg。然后，我们使用 JavaScript 在 SVG 加载完成后更改其样式。

示例 3：使用 CSS 变量

你还可以使用 CSS 变量来动态更改 SVG 的样式。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG with CSS Variables</title>
    <style>
        :root {
            --circle-color: green;
            --rect-color: yellow;
        }
        .my-svg .cls-1 {
            fill: var(--circle-color);
        }
        .my-svg .cls-2 {
            fill: var(--rect-color);
        }
    </style>
</head>
<body>
    <svg class="my-svg" width="100" height="100" viewBox="0 0 100 100">
        <circle class="cls-1" cx="50" cy="50" r="40"/>
        <rect class="cls-2" x="10" y="10" width="30" height="30"/>
    </svg>
    <button onclick="changeColors()">Change Colors</button>
    <script>
        function changeColors() {
            document.documentElement.style.setProperty('--circle-color', 'red');
            document.documentElement.style.setProperty('--rect-color', 'blue');
        }
    </script>
</body>
</html>

在这个示例中，我们使用 CSS 变量 --circle-color 和 --rect-color 来定义 SVG 元素的填充颜色。通过 JavaScript，我们可以动态更改这些变量的值，从而更新 SVG 的样式。