6

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

4

3 回答 3

3

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

于 2013-02-02T00:01:27.373 回答
1

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

于 2013-02-02T00:06:21.240 回答
1

使用影子 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>

于 2020-07-16T10:11:27.307 回答