Posted: 2015.09.29 / Category: javascript 

一昔前だと単純な斜め線とか円をバックに置きたいときは画像で作ってましたが、最近ではわりとSVGを使うことが多いようです。
SVGの良いところはベクターなので画面全体に配置しても荒くなったりしないとか、コードで作成できるので後々アニメーションなどもできたりします。
ここでは単純な図形ですが画面全体に表示する方法をご紹介します。

ライブラリのダウンロード

SVGタグとCSSだけでできるかと思ったのですが、パスはサイズ100%指定ができないようなのでJavaScriptを使用します。
今回は「Snap.svg」というSVGの描画する為のライブラリを使用します。

Snap.svg

画面全体に斜め線を引く

最初はSVGのPath機能を使用して画面全体に線を描いてみます。

HTMLで空のsvgを用意します。

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-bg"></svg>

CSSは配置方法によって色々指定する必要がありますが、とりあえずwdith,heightに100%を指定します。

CSS

#svg-bg {
        width: 100%;
        height: 100%;
    }

JavaScriptの部分です。
線だけだとわかりにくいのでPathで三角形を作成してfillで塗りつぶします。

JavaScript

<script type='text/javascript' src='snap.svg-min.js'></script>
<script>
    window.onload = function () {
        var winW = document.documentElement.clientWidth,
            winH = document.documentElement.clientHeight;
        Snap("#svg-bg").path('M0,0 L' + winW + ',0 L0,' + winH + ' Z')
            .attr({
                fill: '#5ba4cf'
            });
    };
</script>

重要なのは９行目の「.path」の部分ですね。
pathの単純な例を見てみましょう。

path(‘M0,0 L200,0 0,200 Z’)

これは0,0地点から開始(M)して、200,0と0,200を通り(L)閉じる（Z）という記述になります。
今回は画面全体に表示したかったので直接数値に指定ではなく、あらかじめ画面幅を入れた「winW」という変数を入れます。

画面全体に曲線を描く

円のような曲線です。
pathの部分でSを指定すると曲線になってくれます。

JavaScript

Snap("#svg-bg")
    .path(
        'M0,0 ' +
        'L' + winW + ',0 ' +
        'L' + winW + ',0' +
        'S' + winW/2 + ',' + winH + ' 0,0' +
        'Z'
    )
    .attr({
        fill: '#5ba4cf'
    });

画面全体に波線を引く

曲線にポイントを増やせば波線っぽくなる。

JavaScript

Snap('#svg-bg')
.path(
    'M0,0 ' +
    'L' + winW + ',0 ' +
    'L' + winW + ',' + centerLine + ' ' +
    'S' +
        (winW * (7 / 8)) + ',' + (centerLine+50) + ' ' +
        (winW * (6 / 8)) + ',' + (centerLine-50) + ' ' +
        (winW * (5 / 8)) + ',' + (centerLine+50) + ' ' +
        (winW * (4 / 8)) + ',' + (centerLine-50) + ' ' +
        (winW * (3 / 8)) + ',' + (centerLine+50) + ' ' +
        (winW * (2 / 8)) + ',' + (centerLine-50) + ' ' +
        (winW * (1 / 8)) + ',' + (centerLine+50) + ' ' +
    '0,' + centerLine + ' ' +
    'Z'
)
.attr({
    fill: '#5ba4cf'
});

パターン（模様を並べる）

今までは一画面に納めてましたが、一画面に収まらない縦長のページで模様をリピートして描画したい場合があります。
Snap.svgはパターン（pattern）という機能を使うことで簡単にできます。

JavaScript

var patternH = winW;
var paper = Snap("#svg-bg");

var pattern1 = paper
    .path([
        'M0, 0 ' +
        'L' + winW + ',' + patternH/2 +
        'L0' + ',' + patternH +
        'Z'
    ])
    .attr(
    {
        fill: '#e2ded0',
        opacity: 0.4
    });
var pattern2 = paper
    .path([
        'M' + winW + ',0' +
        'L0,' + patternH/2 +
        'L' + winW + ',' + patternH +
        'Z'
    ])
    .attr(
    {
        fill: '#e2ded0',
        opacity: 0.5
    });
var patternGroup = paper.g(pattern1, pattern2)
        .pattern(0, 0, winW, patternH);

paper
    .rect(0, 0, winW, 3000)
    .attr({
        fill: patternGroup
    });

まず、通常通りPath図形を描画します。
ここでは複数の図を組み合わせたかったのでgでグループ化しました。（28行目）
そのあと続くpatternではパターン化する範囲を指定しています。

最後に31行目では単純な四角を描画し、登録したパターンで塗りつぶしています。
ここでは内容が少ししかなかったので3000という数値を入れてますが、通常はドキュメントサイズを指定すればいいでしょう。