1. ホーム
  2. svg

[解決済み] SVG ルート要素のデフォルトの背景色

2022-04-23 04:59:23

質問

SVGドキュメント全体のデフォルトの背景色を、例えば赤に設定したいのですが、可能でしょうか?

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

上記の解決策は機能しますが、style 属性の background プロパティは残念ながら標準的なものではありません。 http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties そのため、SVG Cleanerでクリーニングする際に削除されます。

この背景色を宣言する他の方法はあるのでしょうか?

どのように解決するのですか?

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

現在のところ、よりクロスブラウザな解決策としては <rect> の最初の子として、幅と高さが 100% で fill="red" の要素を使用します。 <svg> 要素を例にとって説明します。

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