有没有办法隔离 SVG 样式？答案

【问题标题】：Is there a way to isolate SVG styles?有没有办法隔离 SVG 样式？
【发布时间】：2020-08-30 18:02:29
【问题描述】：

<svg>
    <defs>
        <style>
             .test {
                 fill: red;
             }
        </style>
    </defs>
    <circle class="test"></circle>
</svg>
<div class="test">test</div>

如何制作作品类 .test 仅适用于 SVG 元素。有没有办法隔离 SVG 类/样式？

【问题讨论】：

在这种情况下，由于您使用的是 fill 它仅适用于 svg 元素。您也可以仅对 svg 元素使用选择器：svg .test{...}
反正既然是内联样式，就永远不会应用到div上
@vals 这是不正确的。在内联 SVG 中定义的 CSS 规则集将应用于它们匹配的整个 DOM 中的任何元素。如果您在上面的示例中将border 属性声明添加到.test 规则集中，它绝对适用于<div>。
@Sean 你是对的！我一直认为它会在 svg 的“内部”。你总能学到新东西！

标签： css svg scope styles

【解决方案1】：

shadowDOM 方法为我打破了 SVG 中的样式。所以这里有一个替代方案：

let svgs = document.getElementsByTagName("svg");
for (let i = 0; i < svgs.length; i++) {
  let svg = svgs[i];
  let img = document.createElement("IMG");
  img.src = `data:image/svg+xml,${encodeURIComponent(new XMLSerializer().serializeToString(svg))}`;
  svg.parentNode.replaceChild(img, svg);
}

它使用数据 URL 将 svgs 转换为 imgs。简单！

【讨论】：

【解决方案2】：

你也可以这样做：

<svg class="MY-SVG-CLASS" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 303.182 218.285">
<defs><style>svg.MY-SVG-CLASS .cls-1{ …

向svg添加一个类，并将该类添加到svg本身的内联样式中。

【讨论】：

【解决方案3】：

是的，通过将 SVG 放入 W3C 标准 Web 组件的 shadowDOM 中

https://developers.google.com/web/fundamentals/web-components/shadowdom

在所有现代浏览器中均受支持。

【讨论】：