SVGエッセンシャルズ 第2版

8章パターンとグラデーション

ここまで、グラフィックオブジェクトを塗りつぶしたり、その輪郭を描いたりするために、単色だけを使ってきました。しかし、単色しか使えないわけではありません。パターンやグラデーションを使って、図形を塗りつぶしたり、その輪郭を描いたりすることができます。この章では、それらについて説明します。

8.1　パターン

パターンを使用するには、グラフィックオブジェクトを定義し、それが水平方向および垂直方向に繰り返されて別のグラフィックオブジェクト（またはストローク）を塗りつぶすように設定します。このグラフィックオブジェクトは、タイル（tile）と呼ばれます。なぜなら、パターンを使ってあるオブジェクトを塗りつぶす行為は、床面をタイルで覆うことにとてもよく似ているからです。この節では、例8-1のSVGによって描かれる二次曲線をタイルとして使います。その領域（20×20ユーザー単位）をはっきりと示すために、境界線をグレーで描きます。

例8-1　パターンタイルのためのパス

<path d="M 0 0 Q 5 20 10 10 T 20 20"
    style="stroke: black; fill: none;"/>
<path d="M 0 0 h20 v20 h-20 z"
    style="stroke: gray; fill: none;"/>

図8-1は、見やすいように拡大してあります。

図8-1　パターンタイルの拡大図

8.1.1　patternUnits属性 ...