JavaScript中动态加载和修改SVG内容的实用指南

const svgUrl = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=test&format=svg";

fetch(svgUrl)
    .then(response => {
        // 确保请求成功
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        // 将响应解析为文本
        return response.text();
    })
    .then(svgText => {
        // svgText 现在包含了SVG的XML字符串
        console.log("SVG 文本内容已获取:", svgText);
        // 继续下一步：解析并操作SVG
    })
    .catch(error => {
        console.error("获取SVG时发生错误:", error);
    });

// ... 承接上一步的 .then(svgText => { ...
    const holder = document.createElement('div');
    holder.innerHTML = svgText;
    // 此时，holder 元素内部包含了SVG的DOM结构
    console.log("SVG已注入临时DOM:", holder);
// ...

// ... 承接上一步的 .then(svgText => { ...
    const holder = document.createElement('div');
    holder.innerHTML = svgText;

    // 查找SVG内部的第一个 <path> 元素
    const svgPath = holder.querySelector('path');

    if (svgPath) {
        // 打印找到的 path 元素
        console.log("找到SVG路径元素:", svgPath);
        // 修改其填充颜色
        svgPath.setAttribute('fill', 'red');
        console.log("路径颜色已修改为红色。");
    } else {
        console.warn("未找到SVG路径元素。");
    }

    // 如果需要将修改后的SVG添加到页面中
    // document.body.appendChild(holder.firstElementChild); // 将SVG元素直接添加到body
// ...

/**
 * 从URL获取SVG内容，动态修改其颜色，并将其添加到页面。
 * @param {string} url SVG的URL
 * @param {string} newColor 要设置的新颜色
 */
function loadAndModifySvg(url, newColor = 'blue') {
    fetch(url)
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.text();
        })
        .then(svgText => {
            // 创建一个临时容器
            const holder = document.createElement('div');
            holder.innerHTML = svgText;

            // 获取SVG根元素
            const svgElement = holder.querySelector('svg');

            if (svgElement) {
                // 查找SVG内部的所有路径元素并修改其填充颜色
                const paths = svgElement.querySelectorAll('path');
                paths.forEach(path => {
                    path.setAttribute('fill', newColor);
                });

                // 查找所有矩形元素并修改其填充颜色 (如果存在)
                const rects = svgElement.querySelectorAll('rect');
                rects.forEach(rect => {
                    rect.setAttribute('fill', newColor);
                });

                // 将修改后的SVG元素添加到页面中的某个位置
                // 例如，添加到 body 或某个特定的容器
                document.body.appendChild(svgElement);
                console.log("修改后的SVG已添加到页面。");
            } else {
                console.error("从SVG文本中未找到SVG根元素。");
            }
        })
        .catch(error => {
            console.error("加载或修改SVG时发生错误:", error);
        });
}

// 调用函数，加载一个二维码SVG并将其颜色改为绿色
const qrCodeUrl = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=Hello%20World&format=svg";
loadAndModifySvg(qrCodeUrl, 'green');

// 稍后加载另一个SVG并将其颜色改为红色
setTimeout(() => {
    const anotherQrCodeUrl = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=Another%20Test&format=svg";
    loadAndModifySvg(anotherQrCodeUrl, 'red');
}, 2000);