加载SVG图像url并更改图像颜色

在网页中加载 SVG 图像并更改其颜色，可以通过多种方式实现。以下是几种常见的方法：

方法 1：直接在 HTML 中嵌入 SVG 并使用 CSS 修改颜色

如果你可以直接在 HTML 中嵌入 SVG 代码，那么可以使用 CSS 来修改 SVG 的颜色。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Change SVG Color</title>
    <style>
        .svg-icon {
            fill: red; /* 修改 SVG 的填充颜色 */
        }
    </style>
</head>
<body>
    <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
    </svg>
</body>
</html>

方法 2：使用 JavaScript 动态加载 SVG 并修改颜色

如果你需要从 URL 动态加载 SVG 图像并修改其颜色，可以使用 JavaScript 来实现。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Change SVG Color</title>
    <style>
        .svg-icon {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="svg-container"></div>

    <script>
        // SVG 图像的 URL
        const svgUrl = 'path/to/your/image.svg';

        // 加载 SVG 图像
        fetch(svgUrl)
            .then(response => response.text())
            .then(svgText => {
                // 创建一个 div 元素来容纳 SVG
                const div = document.createElement('div');
                div.innerHTML = svgText;

                // 获取 SVG 元素
                const svgElement = div.querySelector('svg');
                svgElement.classList.add('svg-icon');

                // 修改 SVG 的颜色
                svgElement.querySelectorAll('path').forEach(path => {
                    path.setAttribute('fill', 'red');
                });

                // 将 SVG 元素添加到页面
                document.getElementById('svg-container').appendChild(svgElement);
            })
            .catch(error => console.error('Error loading SVG:', error));
    </script>
</body>
</html>

方法 3：使用 CSS 过滤器修改嵌入的 SVG 图像颜色

如果你不能直接修改 SVG 文件，可以使用 CSS 过滤器来改变嵌入的 SVG 图像的颜色。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Change SVG Color</title>
    <style>
        .svg-icon {
            width: 100px;
            height: 100px;
            filter: invert(50%) sepia(100%) saturate(1000%) hue-rotate(180deg);
        }
    </style>
</head>
<body>
    <img src="path/to/your/image.svg" class="svg-icon" alt="SVG Icon">
</body>
</html>