Question

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

Answer 1

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

Answer 2

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

Answer 3

使用Shadow DOM

如果您不需要支持IE和其他古老的浏览器，请创建一个“自定义元素”，它将所有子元素放入“影子根”。

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>

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

3 个答案:

使用Shadow DOM