2016-06-25 7 views
0

を衝突しています。私がこれをすれば、Buf2つの別々のsvgsは私がそれらを個別にレンダリングした場合、それは大丈夫です、このような</p> <pre><code><svg>svg 1 stuff</svg> </code></pre> <p>などの2つの別々のsvgsその後、別のSVG</p> <pre><code><svg> svg 2 stuff </svg> </code></pre> <p>を持って

<svg> svg 1 stuff</svg> 
<svg>svg 2 stuff</svg> 

それはスタイルやCSSや何かが相互作用しているようだとsvgsは面白い見える?

各SVG内のスタイルやCSSは独立していませんか?

答えて

0

CSSがクラッシュする可能性があります。両方が同じドキュメントにある場合は、いずれかのSVGにあるCSSがすべてに適用されます。後の規則は、以前の規則を上書きし、両方のSVGに影響を与える可能性があります。

おそらく、おそらくおそらくおそらく、彼らはid属性を突き止めている可能性があります。これは、Illustratorなどのエディタプログラムを使用してこれらのファイルを作成した場合、よくある問題です。このプログラムは、グラデーション、マスク、クリッピングパスなどの要素の属性値を自動的に生成します(id)。残念ながら、新しいファイルごとに同じIDシーケンスを生成する傾向があります。

idの属性はドキュメント内で一意である必要があります。そのため、両方のSVGをページ内で結合すると重複があると、予期しないことが起こります。正確に何が起こるかは、ブラウザによって異なります。したがって、ChromeとFirefoxでファイルが異なって見える場合は、それが問題であるidの属性が重複しているという手掛かりになります。

SVGのいずれかを手作業で実行し、id属性の名前をに変更する以外は、問題を解決する簡単な方法はありません。

関連する問題

 関連する問題