SVG中CDATA包裹的JavaScript无法运行及多嵌入场景JS适配请求

一、先解决你示例中脚本不生效的问题 #

你原来的脚本无法将背景改为蓝色，是因为在SVG文档的DOM环境中，直接append字符串形式的<style>标签不会被正确解析。SVG元素需要使用命名空间创建，修正后的脚本如下：

<svg id="test" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1435 1084">
<style type="text/css">
    svg{background:red}
</style>
<script type="text/javascript">//<![CDATA[
    const x=1;
    const y=1;

    if (x===y){
        // 使用SVG命名空间创建style元素
        const styleEl = document.createElementNS('http://www.w3.org/2000/svg', 'style');
        styleEl.textContent = 'svg{background:blue}';
        document.getElementById('test').appendChild(styleEl);
    }
//]]></script>
</svg>

此时：

• 当SVG以<img>嵌入时，浏览器禁用脚本，显示默认红色背景；
• 当SVG独立打开、以<object>/<iframe>嵌入或内联到HTML中时，脚本正常执行，背景变为蓝色。

二、区分所有场景执行不同JS的方案 #

通过判断SVG的运行环境，可以针对独立打开、内联、iframe/object、image四种场景执行不同逻辑：

<svg id="test" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1435 1084">
<style type="text/css">
    svg{background:red} <!-- image嵌入时显示此样式 -->
</style>
<script type="text/javascript">//<![CDATA[
    // 判断当前运行环境
    function getRuntimeEnv() {
        // 内联SVG：属于HTML文档的一部分
        if (document instanceof HTMLDocument) {
            return 'inline';
        }
        // 独立打开：当前窗口即为顶层窗口
        if (window.top === window.self) {
            return 'standalone';
        }
        // iframe/object嵌入：当前窗口被嵌套在其他窗口中
        return 'embedded';
    }

    const env = getRuntimeEnv();
    
    // 根据环境执行不同逻辑
    switch(env) {
        case 'inline':
            // 内联场景：设置绿色背景
            document.getElementById('test').style.background = 'green';
            break;
        case 'standalone':
            // 独立打开场景：设置蓝色背景
            const styleEl = document.createElementNS('http://www.w3.org/2000/svg', 'style');
            styleEl.textContent = 'svg{background:blue}';
            document.getElementById('test').appendChild(styleEl);
            break;
        case 'embedded':
            // iframe/object嵌入场景：设置紫色背景
            document.getElementById('test').style.background = 'purple';
            break;
    }
//]]></script>
</svg>

环境判断逻辑说明： #

1. 内联场景：SVG直接嵌入HTML中，此时document是HTML文档实例，而非SVG文档；
2. 独立打开：SVG单独在浏览器标签页打开，window.top等于window.self；
3. iframe/object嵌入：SVG被嵌套在其他页面中，window.top不等于window.self；
4. image嵌入：浏览器完全禁用SVG内的脚本，默认样式直接生效。

关键注意事项 #

• SVG的DOM操作必须使用http://www.w3.org/2000/svg命名空间创建元素，否则无法被SVG渲染引擎识别；
• <img>嵌入SVG时，不仅脚本被禁用，外部资源引用（如外部样式表、图片）也会受限，这是浏览器的安全策略。

内容的提问来源于stack exchange，提问作者newnew