如何在SVG中嵌入SVG并分离类与ID的命名空间？

问题核心在于：SVG中的ID是全局唯一的，嵌套SVG内的<style>默认属于全局作用域，因此后定义的#text-font样式会覆盖前面的规则，导致两个文本都显示蓝色。以下是两种无需修改内部<style>和ID的解决方案：

方案一：使用CSS Containment（纯CSS，无JS） #

给每个嵌套的<svg>添加contain: layout style样式，利用CSS隔离特性让内部样式仅作用于当前SVG容器内的元素，同时避免ID冲突带来的样式覆盖。

修改后的代码：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <svg style="contain: layout style;">
        <style>
            #text-font {
                fill: red;
            }
        </style>
        <text id="text-font" x="50" y="50">TEST</text>
    </svg>
  
    <svg style="contain: layout style;">
        <style>
            #text-font {
                fill: blue;
            }
        </style>
        <text id="text-font" x="100" y="100">TEST</text>
    </svg>
</svg>

说明：contain: layout style会隔离布局和样式作用域，现代浏览器（Chrome、Firefox、Edge、Safari 15.4+）均支持该特性。

方案二：使用Shadow DOM（兼容性更好，需少量JS） #

通过将每个嵌套SVG封装到Shadow DOM中，实现完全的样式与ID隔离，支持绝大多数浏览器（包括更早版本的Safari）。

修改后的代码：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <svg>
        <style>
            #text-font {
                fill: red;
            }
        </style>
        <text id="text-font" x="50" y="50">TEST</text>
    </svg>
  
    <svg>
        <style>
            #text-font {
                fill: blue;
            }
        </style>
        <text id="text-font" x="100" y="100">TEST</text>
    </svg>
    <script>
        // 遍历所有嵌套SVG，封装到Shadow DOM
        document.querySelectorAll('svg > svg').forEach(svg => {
            const shadowRoot = svg.attachShadow({ mode: 'open' });
            shadowRoot.appendChild(svg.cloneNode(true));
            svg.remove();
        });
    </script>
</svg>

说明：Shadow DOM会为每个嵌套SVG创建独立的DOM作用域，内部的ID和样式不会与外部或其他嵌套SVG冲突，完全满足合并单文件的需求。

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