SVGのpatternでCSS backgroundの背景を作る
ボーダー柄の背景を作る
背景用のSVGを作成する。
パタ−ンに使うSVG
<rect fill="white" x="0" y="0" height="40" width="40"/>
<rect fill="skyblue" x="0" y="0" height="40" width="20"/>
pattern要素の中にいれて、rect要素のfillに設定し、widthとheightを100%にする。
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<defs>
<pattern id="border" patternUnits="userSpaceOnUse"
width="40" height="40">
<rect fill="white" x="0" y="0" height="40" width="40"/>
<rect fill="skyblue" x="0" y="0" height="40" width="20"/>
</pattern>
</defs>
<rect width="100%" height="100%" style="fill: url(#border)"/>
</svg>
SVGをbackgroundのurlに設定する
<div style="background:url('/images/post-2013-07-27/border.svg');height:100px;">
</div>
斜めにする
pattern要素をpatternTransformで回転させる。
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<defs>
<pattern id="border" patternUnits="userSpaceOnUse"
width="40" height="40" patternTransform="rotate(45)">
<rect fill="white" x="0" y="0" height="40" width="40"/>
<rect fill="skyblue" x="0" y="0" height="40" width="20"/>
</pattern>
</defs>
<rect width="100%" height="100%" style="fill: url(#border)"/>
</svg>
アニメーション付き
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<defs>
<pattern id="berbar-pole" patternUnits="userSpaceOnUse"
x="0" y="0" width="100" height="100" patternTransform="rotate(45) scale(0.3)">
<animateTransform additive="sum" attributeName="patternTransform"
type="translate" begin="0s" dur="1s"
fill="freeze"
from="0, 0" to="100, 0" repeatCount="indefinite"/>
<rect fill="white" x="0" y="0" height="100" width="100"/>
<rect fill="red" x="0" y="0" height="100" width="25"/>
<rect fill="blue" x="50" y="0" height="100" width="25"/>
</pattern>
</defs>
<rect width="100%" height="100%" style="fill: url(#berbar-pole)"/>
</svg>
チェック柄
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<defs>
<pattern id="check"
patternUnits="userSpaceOnUse"
width="100" height="100"
patternTransform="scale(0.75)">
<rect width="100" height="100" fill="skyblue"/>
<g fill="white">
<rect width="50" height="100" opacity="0.5"/>
<rect width="100" height="50" opacity="0.5"/>
</g>
</pattern>
</defs>
<rect width="100%" height="100%" style="fill: url(#check)"/>
</svg>
水玉柄
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<defs>
<pattern id="mizutama" patternUnits="userSpaceOnUse"
width="100" height="100" patternTransform="rotate(45) scale(0.4)">
<rect fill="skyblue" x="0" y="0" width="100" height="100" />
<circle fill="white" cx="50" cy="50" r="25"></circle>
</pattern>
</defs>
<rect width="100%" height="100%" style="fill: url(#mizutama)"/>
</svg>
作ってみたもの
グラデーションとチェック柄パタ−ンのマスク
六角形パターン
リンク
Tweet
