166

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

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

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

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

4

7 に答える 7

153

SVG 1.2 Tiny has viewport-fillほとんどのブラウザが現時点で SVG 1.1 をターゲットにしているため、このプロパティがどの程度広く実装されているかはわかりません。Opera は FWIW を実装しています。

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

<rect width="100%" height="100%" fill="red"/>
于 2012-07-02T12:35:50.997 に答える
54

これがSafariで機能することがわかりました。SVG は、要素の境界ボックスがカバーする background-color でのみ色を付けます。したがって、ピクセル境界がゼロの境界線 (ストローク) を指定します。背景色で全体を埋めます。

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

于 2013-12-03T17:11:50.750 に答える
3

別の回避策<div>として、同じサイズを使用して<svg>. その後、 に申請できるように"background-color"なり"background-image"、 に影響しsvgます。

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

<style type="text/css">
.background{
  background-color: black; 
  /*background-image: */
}
</style>
于 2013-10-26T03:31:33.160 に答える
0

backgroundbackground-color広くサポートされていない

なしの最短のコードは、半径 10000 の円を描くことです。これは、viewBox とは異なる width-height-aspect-ratios でも機能します。

<circle r="1e5" fill="red"/>


<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
 <circle r="1e5" fill="red"/>
</svg>

于 2021-11-09T13:34:17.067 に答える