2

HTML5 ドキュメント内の外部 CSS とインライン SVG には、本当に苦労しています。

現在、最新バージョンの Chrome for Mac で開発を行っており、外部スタイルシートでスタイル設定された SVG を Firefox で動作させたいと考えていました。

Chrome の場合、Web ページのスタイルシート内に SVG-CSS を含めると問題なく動作します。すべての html 要素と SVG 要素のスタイルを設定するだけです。私のスタイルシートは次のようになります。

body {
  //blalba
}

<![CDATA[

line {
 //blabla
}

circle {
  //blabla
}

]]>

（クロムの下で正常に動作します）

今、私がそのルートに行くと、Firefox のすべての SVG 要素に黒い塗りつぶしがあるため、これは機能していないようです。Inline-CSS は SVG 内で正常に動作しますが、外部スタイルシートを SVG 内で動作させることができません。

これが私がいじっているコードです：

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="styles/style.css" ?>
<svg width="827" height="185" viewBox="0 0 827 185" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect class="background" x="0" y="10" width="825" height="125" />
</svg>

これは正しい方法だと思いましたが、Chrome でも Firefox でも機能しません。私のスタイルシートは次のようになります。

<![CDATA[ // <- if tried leaving this out, no change

line {
 //blabla
}

circle {
  //blabla
}

]]> // <- if tried leaving this out, no change

スタイルシートへのパスも再確認しました。私は何を間違っていますか？

ご協力ありがとうございました！:)

4

1 に答える 1

4

SVG が HTML でインライン化されている場合、link他のスタイルシートと同じように要素を使用しないのはなぜですか?

<link rel="stylesheet" href="styles/style.css">

ここに例があります。

于 2012-07-03T13:25:14.793 に答える