6

2 つ以上の SVG タグを含む Web ページがあります。各 SVG タグには、特定の SVG 要素の CSS スタイルを含むスタイル タグ ブロックが含まれています。残念ながら、これらのスタイルシートはグローバル スタイルに溶け込んでいるようです。たとえば、最初の SVG 要素でクラス 'x1' のスタイルを設定すると、2 番目の SVG でクラス 'x1' のスタイルも設定されます。特定の SVG ドキュメントごとに異なるスタイルを設定できるようにしたいと考えています。これは可能ですか？

4

3 に答える 3

3

ブラウザがそれをサポートしたら、<style scoped>. これは、Firefox 21 以降、または Chrome 19 以降を意味します (ただし、chrome://flags で有効にする必要があります)。

于 2013-02-02T00:01:27.373 に答える
1

id要素を互いに区別するためにsを使用する必要があります。次に、特定の要素に影響を与えるようにCSSスタイルを構成します。ブラウザのサポートでは、CSSスタイルを個別のファイルまたは<style>セクションに配置するのが一般的な方法です。

于 2013-02-02T00:06:21.240 に答える
1

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>

于 2020-07-16T10:11:27.307 に答える