SVGルート要素のデフォルトの背景色

たとえば、SVGドキュメント全体のデフォルトの背景色を赤に設定したいと思います。

<svg viewBox="0 0 500 600" style="background: red">/* content */</svg>

上記の解決策は機能しますが、スタイル属性のbackgroundプロパティは残念ながら標準のものではありません：http : //www.w3.org/TR/SVG/styling.html#SVGStylingProperties、そしてそれはSVGでのクリーニングプロセス中に削除されますクリーナー。

この背景色を宣言する別の方法はありますか？

SVG 1.2 Tinyにはビューポートフィルがありますが、現時点ではほとんどのブラウザがSVG 1.1をターゲットにしているため、このプロパティがどれだけ広く実装されているかはわかりません。OperaはFWIWを実装しています。

よりクロスブラウザなソリューションは現在<rect>、幅と高さが100％で、<svg>要素の最初の子としてfill = "red"を持つ要素を貼り付けることです。次に例を示します。

<rect width="100%" height="100%" fill="red"/>

これはSafariで動作します。SVGは要素の境界ボックスがカバーするbackground-colorでのみ色を付けます。そのため、ピクセル境界がゼロのボーダー（ストローク）を設定します。それはあなたのためにあなたの背景色ですべてを塗りつぶします。

<svg style='stroke-width: 0px; background-color: blue;'> </svg>

これは@Robert Longsonの答えであり、コードが追加されています（元々はコードがありませんでしたが、後で追加されました）。

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
 <rect width="100%" height="100%" fill="red"/>
</svg>

この回答は以下を使用します：

• https://stackoverflow.com/a/11293812/6747994
• https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes

私が見つけた非常に単純な解決策を報告させてください、それは以前の答えには書かれていません。また、SVGで背景を設定したいのですが、これがスタンドアロンのSVGファイルでも機能することを望んでいます。

まあ、このソリューションは本当にシンプルです。実際、SVGはスタイルタグをサポートしているため、次のようなことができます

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
  <style>svg { background-color: red; }</style>
  <text>hello</text>
</svg>

私は現在、このようなファイルに取り組んでいます：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.css" ?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  width="100%"
  height="100%"
  viewBox="0 0 600 600">
...

そして私はこれを入れようとしましたstyle.css：

svg {
  background: #bf1f1f;
}

それはだ作業クロムとFirefox上で、しかし、私はそれは良い習慣だとは思いません。EyeOfGnome画像ビューアはそれをレンダリングせず、Inkscapeはそのような背景を格納するために特別な名前空間を使用します：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    version="1.1"
    ...
  <sodipodi:namedview
     pagecolor="#480000" ... >

さて、SVGルート要素はSVG推奨のペイント可能な要素の一部ではないようです。

だから私はそれが単純な「ハック」ではないと思いますので、私はロバート・ロングソンによって提供された「正しい」解決策を使うことを勧めます。あると思われる標準的な方法 SVGと背景を設定します。

別の回避策<div>は、同じサイズを使用してをラップすること<svg>です。その後、あなたは適用することができるように"background-color"なり、"background-image"それはに影響を与えますsvg。

<div class="background">
  <svg></svg>
</div>

<style type="text/css">
.background{
  background-color: black; 
  /*background-image: */
}
</style>