SVGキャンバスの背景色を設定する
SVGキャンバスの背景色を設定するコードを紹介します。
概要
こちらの記事でも紹介した通り、svgの図形を表示するエリアはデフォルトでは背景色が透過色に設定されています。
この記事ではsvgの図形を表示するエリアに背景色を設定する場合のコード記述について紹介します。
デフォルトの動作
最初にデフォルトの動作を確認します。下記のHTMLを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
<!--
body{
background-color:#E0E0E0;
}
.SvgFrame{
border:solid 1px #404040;
}
-->
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="320" width="640" viewBox="0 0 640 320" class="SvgFrame">
<line x1="20" y1="10" x2="600" y2="280" style="stroke:rgb(0,0,128);stroke-width:1" />
</svg>
</body>
</html>
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。背景色が透過になっておりBodyタグに設定されたページのカラーがSVG画像の領域にも反映されていることが確認できます。
背景色を設定する : CSSで背景色を設定する
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
<!--
body{
background-color:#E0E0E0;
}
.SvgFrame{
background-color:#FFFFFF;
border:solid 1px #404040;
}
-->
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="320" width="640" viewBox="0 0 640 320" class="SvgFrame">
<line x1="20" y1="10" x2="600" y2="280" style="stroke:rgb(0,0,128);stroke-width:1" />
</svg>
</body>
</html>
解説
svg画像を表示する領域のクラスSvgFrame クラスに背景色を設定することでsvg表示エリアの背景色を設定できます。下記の記述により、背景色を白(#FFFFFF)に設定しています。
.SvgFrame{
background-color:#FFFFFF;
border:solid 1px #404040;
}
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。svgが表示されるエリアの背景色が白色に設定されていることが確認できます。
背景色を設定する : 矩形で描画する
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
<!--
body{
background-color:#E0E0E0;
}
.SvgFrame{
border:solid 1px #404040;
}
-->
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="320" width="640" viewBox="0 0 640 320" class="SvgFrame">
<path d="M0 0 L 640 0 L 640 320 L 0 320" style="fill:#FFFFFF;stroke-width:0" />
<line x1="20" y1="10" x2="600" y2="280" style="stroke:rgb(0,0,128);stroke-width:1" />
</svg>
</body>
</html>
解説
svg画像を表示する領域全体の大きさで矩形を塗りつぶし描画します。塗りつぶしたカラーがsvg表示エリアの背景色となります。下記の記述により、白(#FFFFFF)色の矩形をsvg乗りエア全体に描画しています。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="320" width="640" viewBox="0 0 640 320" class="SvgFrame">
<path d="M0 0 L 640 0 L 640 320 L 0 320" style="fill:#FFFFFF;stroke-width:0" />
<line x1="20" y1="10" x2="600" y2="280" style="stroke:rgb(0,0,128);stroke-width:1" />
</svg>
下記のコードが領域全体を塗りつぶす矩形の描画になります。d属性の値の最初の
M0 0 で(x,y)=(0,0)の位置にペンを移動します。続いて
L640 0 で(x,y)=(640,0)の位置にペンを移動します。さらに
L 640 320 で(x,y)=(640,320)の位置にペンを移動、
L 0 320 で(x,y)=(0,320)の位置にペンを移動します。それぞれの頂点を結ぶ閉じた図形で描画されます。描画色はstyle属性のfillプロパティに設定した値が利用されます。また線幅はstroke-width プロパティの値で設定されます。
<path d="M0 0 L 640 0 L 640 320 L 0 320" style="fill:#FFFFFF;stroke-width:0" />
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。svgが表示されるエリアの背景色が白色に設定されていることが確認できます。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
