この記事は2015年4月7日に書かれたもので、内容が古い可能性がありますのでご注意ください。
背景で使用するボーダーやドット、ストライプは今まではPhotoshopでパターンとして切り出していましたが、なんとSVGで作成できるスクリプトを発見しました。
スマートフォン対応などで高解像度の画像を作成してからコードで縮小するという作業がなくなり、画質の問題もこれだけでクリアできるのでとても便利です。
公式サイトを参考にデモを作成しました。
SVGとは?
SVG(Scalable Vector Graphics)はベクター画像を表示する技術です。
JPEGやPNGなどのビットマップ形式とは違い、ベクター形式の画像は、拡大縮小しても画質が劣化しません。
そのため、複雑な図形の作成に向いています。
Textures.js
実装方法
まずgithubからtextures.min.jsとd3.min.jsをダウンロードします。d3.min.jsはデータに基づいてドキュメントを操作するためのJavaScriptライブラリです。
もちろんjQueryの呼び出しも忘れずに。
<script src="d3.min.js" charset="utf-8"></script> <script src="textures.min.js" charset="utf-8"></script>
HTML
<div id="example_1"></div>
javascript
<script type="text/javascript"> var w = 150, //横幅 h = 150; //縦幅 var svg = d3.select("#example_1") .append("svg") .attr("width",w) .attr("height", h); var t = textures.lines() .stroke("White") //パターンの線の色 .thicker(); svg.call(t); svg.append("circle") .attr({ "cx": w/2, //x軸の半径 "cy": h/2, //y軸の半径 "r": 60 //丸さ }) .style({ "fill": t.url(), "stroke": "White", //円周の線の色 "stroke-width": 2 //円周の線の太さ }); </script>
上記はサークルを作成する場合のコードです。
公式サイトを参考にデモを作成しました。
複数の図形を呼び出す場合
この場合は最初に代入する型を用意し、そこに値を代入する手法をとった方がソースが短くなりスッキリします。
HTML
<figure id="example_2" data="example_2"> <div class="box"></div> </figure>
javascript
<script type="text/javascript"> //ベース呼び出し var box = function(id, t) { var figure = d3.select("[data="+id+"]"); var box = figure.select(".box"); var svg = box.append("svg") .attr('width', 140) .attr('height', 140); svg.call(t); svg.append("path") .attr("d", "M 0 0 L 0 140 L 140 140 L 140 0 Z") .style({ "fill": t.url() }); figure.transition().duration(1000).style("opacity",1); } //値 var t = textures.lines(); box("example_2",t); </script>