CSS 样式表作用于单个 svg 标记答案

【问题标题】：CSS stylesheet scoped to a single svg tagCSS 样式表作用于单个 svg 标记
【发布时间】：2020-07-16 18:11:27
【问题描述】：

我有一个包含两个或多个 SVG 标记的网页。每个 SVG 标记都包含一个样式标记块，其中包含给定 SVG 元素的 CSS 样式。不幸的是，这些样式表似乎融入了全局样式。例如，在第一个 SVG 元素上设置类“x1”的样式将导致第二个 SVG 上的类“x1”的样式也被设置。我希望能够为每个特定的 SVG 文档设置不同的样式。这可能吗？

【问题讨论】：

接受的答案不再有效，这是一个现代解决方案stackoverflow.com/a/62932376/4137472

标签： css html svg

【解决方案1】：

一旦浏览器支持它，你需要<style scoped>。这意味着 Firefox 21 或更高版本，或者 Chrome 19 或更高版本（但您需要在 chrome://flags 中启用它）。

【讨论】：

更新：根据 caniuse.com 上的链接，这已从规范中删除 - github.com/whatwg/html/issues/552
这不再起作用（以前在标志下工作），这是一个有效的 Shadow DOM 解决方案stackoverflow.com/a/62932376/4137472

【解决方案2】：

使用 Shadow DOM

如果你不需要支持 IE 和其他古老的浏览器，创建一个自定义元素，它会将它的所有子元素放入它的 Shadow Root 中。

class SVGContainer extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({mode: 'closed'});
    shadowRoot.append(...this.childNodes);
  }
}

customElements.define('svg-container', SVGContainer);

<style>#svg-text { fill: red; }</style>
<label id="html-text">I am HTML</label>
<svg-container>
  <svg viewBox="0 0 100 30">
    <style>#html-text { color: red; }</style>
    <text id="svg-text" y="20">I am SVG</text>
  </svg>
</svg-container>

【讨论】：

这段代码 sn-p 只是为我显示黑色文本。 Chrome 98.0.4758.82（官方版本）（64 位）
@GusTButt 没错，如果有错误，文字会是红色的。

【解决方案3】：

您应该使用ids 来区分元素。然后配置CSS 样式以影响某些元素。对于浏览器支持，将 CSS 样式放入单独的文件或 <style> 部分是一种常见做法。

【讨论】：