2014年3月12日水曜日

svgを使って背景画像を傾ける

svgを使えば背景画像を傾けることだってできちゃうんだぜ．






通常cssを使って背景画像をタイル状に並べる場合，この並びを傾けると言ったことは出来ませんが，一度svgにおいて画像を傾けておくことで簡単に傾いた背景タイリングが可能になります．

手順


  1. 傾けたい背景画像をsvgファイルに埋め込むためにdataスキーム形式に変換する
  2. svgを作ってそこに画像を埋め込む
  3. htmlからcssを使って上で作ったsvg画像を背景に設定する

画像ファイルをdataスキーム形式に変換する


ツールで変換してもいいけれど，拙作スクリプトで変換しても可．

svgを作る


このsvgを作る際のポイントは二つあって，
  • サイズ未指定のsvgとすること
  • pattern要素を使って敷き詰めを定義すること
つまり，敷き詰め処理はcssに行わせるのじゃなくって，svgにやらせるわけですね．
例を示します． 

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <defs>
  <pattern id="myPattern" width="100" height="100" patternUnits="userSpaceOnUse" patternTransform="rotate(-23,0,0)">
   <image xlink:href="data:image/gif;base64,..." width="100" height="100"/>
  </pattern>
 </defs>
 <rect fill="url(#myPattern)" width="100%" height="100%"/>
</svg>

大きさが全体に渡るようにrect要素を定義し，その塗り潰しをpattern要素で定義します．
またpattern要素ではimage要素を挿入して先ほどのdataスキーム形式の画像を差し込みます．
ここでこのテクニックの主役となるのがpattern-transform属性で，この属性を使って画像を傾けるわけです．
確認としてsvgファイルをブラウザで表示して下さい．
上手く動作しない場合はpatternUnits属性とかpatternの大きさを再確認して下さい．
※場合によってはimageのpreserveAspectRatio="none"も必要となるかも知れません．


htmlから参照する


そうしたらhtmlからsvgを参照します．
その際に注意すべき点としてはbackground-sizeを100% 100%とすることです．
敷き詰めはsvg側で行うため，css側でサイズを指定すると失敗します．

<!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
 <style type="text/css">
body{
 background-image:url(bg.svg);
 background-size:100% 100%;
 display:block;
 height:1000px;
}
 </style>
 </head>
 <body>
 </body>
</html>

以上です．
svgは取っ付きにくいかも知れませんが，このように半ばパターン的な使い方も出来ますので是非チャレンジしてみて下さい．




時刻:
ラベル: , , , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)