使用Vanilla JavaScript从URL获取并内联操作SVG数据

// 示例SVG URL，每次请求可能会不同
const svgUrl = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=test&format=svg";

/**
 * 从URL获取SVG并允许内联操作
 * @param {string} url SVG的URL
 * @returns {Promise<HTMLElement|null>} 包含SVG的临时DOM元素，如果失败则返回null
 */
async function fetchAndManipulateSvg(url) {
    try {
        // 1. 发起请求并获取响应
        const response = await fetch(url);

        // 检查请求是否成功
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        // 2. 将响应体解析为纯文本（SVG是XML文本）
        const svgText = await response.text();

        // 3. 创建一个临时的DOM元素作为SVG的容器
        const holder = document.createElement('div');

        // 4. 将SVG文本注入到临时容器的innerHTML中
        // 这样SVG就被解析成了DOM元素，可以被JavaScript访问
        holder.innerHTML = svgText;

        // 5. 现在，可以像操作普通DOM一样操作SVG内部元素
        // 例如，查找所有的路径元素
        const paths = holder.querySelectorAll('path');
        console.log('SVG中找到的路径元素:', paths);

        // 示例：修改第一个路径元素的填充颜色
        if (paths.length > 0) {
            paths[0].setAttribute('fill', 'blue'); // 将第一个路径设为蓝色
            console.log('第一个路径颜色已修改为蓝色。');
        }

        // 示例：查找并修改SVG的根元素
        const svgElement = holder.querySelector('svg');
        if (svgElement) {
            svgElement.setAttribute('width', '200');
            svgElement.setAttribute('height', '200');
            console.log('SVG尺寸已修改为200x200。');
        }

        // 返回包含修改后SVG的临时容器，以便后续使用
        return holder;

    } catch (error) {
        console.error('获取或操作SVG时发生错误:', error);
        return null;
    }
}

// 调用函数并处理返回的SVG容器
fetchAndManipulateSvg(svgUrl).then(svgHolder => {
    if (svgHolder) {
        console.log('成功获取并修改SVG。');
        // 如果需要将修改后的SVG添加到页面中，可以这样做：
        // document.body.appendChild(svgHolder.querySelector('svg'));
        // 或者，如果你只需要SVG的字符串形式：
        // const modifiedSvgString = svgHolder.innerHTML;
        // console.log('修改后的SVG字符串:', modifiedSvgString);
    } else {
        console.log('未能获取或修改SVG。');
    }
});