有没有办法隔离 SVG 样式？

Question

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

如何制作 class .test 仅适用于 SVG 元素。有没有办法隔离 SVG classes/styles?

Answer 1

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

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

所有现代浏览器都支持。

Answer 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{ …

将 class 添加到 svg 并将 class 添加到 svg 本身的内联样式。

Answer 3

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);
}

它将 svgs 转换为带有数据 URL 的 imgs。简单！

有没有办法隔离 SVG 样式？

Is there a way to isolate SVG styles?

css

svg

styles

scope