SVGチュートリアル

SVG要素

SVG填充パターン

SVGフィルルパターンは、形状を画像で構成するパターンでフィルルを適用します。このパターンはSVG画像（形状）またはビットマップ画像で構成できます。SVGフィルルパターンはPhotoshopなどのツールで慣れ親しんだ「タイル」のようなものです。

フィルルパターンの例

これはシンプルなSVGフィルルパターンの例です：

例

<svg width="500" height="150">
　　　　<defs>
　　　　　　　　<pattern id="pattern"1"　x="10"　y="10"　width="20"　height="20"　patternunits="userSpaceOnUse">
　　　　　　　　　　　　<circle　cx="10"　cy="10"　r="10" style="stroke:　none;　fill:　#0000ff"></circle>
　　　　　　　　</pattern>
　　　　</defs>
　　　　<rect　x="10"　y="10"　width="100"　height="100"　style="stroke:　#000000;　fill:　url(#pattern1);"></rect>
</svg>

テストを見て‹/›

まず、<defs>要素内で<pattern>要素を定義します。パターンにはcircle要素が含まれています。このcircle要素はフィルルパターンとして使用されます。

次に、CSS属性で<rect>要素を宣言しますfill、この要素は以下を参照<pattern>そのstyle属性の要素ID。

次に、<rect>要素を宣言し、その要素はCSS fill属性でstyle属性の<pattern>要素IDを参照します。

実行後の画像効果：

注意：<pattern>要素で定義された円がどうやって矩形のフィルルとして使用されるかを確認してください。また、円が左から右、上から下にどのように繰り返されるかも確認してください。

X、Y、幅、高さ

<pattern>要素のxおよびy属性は、パターンが<pattern>要素内の形状でどの位置から始まるかを定義します。

<pattern>要素のwidthおよびheight属性は、パターンの幅と高さを定義します。

これは最初から始まる例であり、以下に続きます。xとy設定されています：

例

<svg width="500" height="150">
　　　　<defs>
　　　　　　　　<pattern id="pattern"2"
　　　　　　　　　　　　　　　　　x="0" y="0" width="20"　height="20"
　　　　　　　　　　　　　　　　　patternUnits="userSpaceOnUse"
　　　　　　　　<circle　cx="10"　cy="10"　r="10" style="stroke:　none;　fill:　#0000ff"></circle>
　　　　　　　　</pattern>
　　　　</defs>
　　　　<rect　x="10"　y="10"　width="100"　height="100"
　　　　　　　　　　style="stroke:　#000000;　fill:　url(#pattern"2);"　/>
</svg>

テストを見て‹/›

実行後の画像効果：

注意してください、パターンは現在、円の中央から始まっています（矩形の上端と左端）。自分の填充パターンを作成する際には、xとy属性値を使用して必要な効果を実現します。

widthとheight属性で設定されたパターンの幅と高さです。

前の例ではwidthに設定されていますheightすべてが20に設定されています。これは円の直径です。したがって、円は空間なしに何度も繰り返されます。

この例では、パターンのwidth（幅）が25がありますが、20。ご注意ください、現在は水平円の間に5ピクセル間隔のものです。

これはまた、height設定されています25 の例：

以下は同じ例ですが、xとyが設定されています10 (<pattern>要素内の円心):

現在、パターンは完全な円から始まっていますが、垂直と水平に余分なスペースがあります。

ネストパターン

内側に別の填充パターンを使用して填充パターンを内側から使用することができます。これは、円を填充パターンとして使用する矩形の例です。円の内部には矩形が填充パターンとして使用されます。

例

<svg width="500" height="150">　　　　
<defs>　　　　
<pattern id="innerPattern"　　　　
x="3"　y="3"　width="9" height="9"　　　　
patternUnits="userSpaceOnUse"　　　　
>　　　　
<rect x="0" y="0" width="6" height="6"　　　　
style="stroke:　none;　fill:　#ff0000;"　/>　　　　
</pattern>　　　　
<pattern id="outerPattern"　　　　
x="12"　y="12"　width="25" height="25"　　　　
patternUnits="userSpaceOnUse"　　　　
>　　　　
<circle　cx="10"　cy="10"　r="10" style="stroke:　#0000ff;　fill:　url(#innerPattern)"　/>　　　　
</pattern>　　　　
</defs>　　　　
<rect　x="10"　y="10"　width="100"　height="100"　　　　
style="stroke:　#000000;　fill:　url(#outerPattern);"　/>　　　　
</svg>

テストを見て‹/›

実行後の画像効果：

ご覧の通り、外部矩形は円で塗りつぶされ、円は矩形で塗りつぶされています。

変換パターン

標準のSVG変換関数を使用して填充パターンを変換することができます。patternTransform属性を使用してこれを実現できます。以下はSVGパターン変換の例です:

例

<svg width="500" height="150">　　　　
<defs>　　　　
<pattern id="transformedPattern"　　　　
x="10"　y="10"　width="20"　height="20"　　　　
patternUnits="userSpaceOnUse"　　　　
patternTransform="rotate(35)"　　　　
>　　　　
<circle　cx="10"　cy="10"　r="10"　style="stroke:　none;　fill:　#0000ff"　/>　　　　
</pattern>　　　　
</defs>　　　　
<rect　x="10"　y="10"　width="100"　height="100"　　　　
style="stroke:　#000000;　fill:　url(#transformedPattern);"　/>　　　　
</svg>

テストを見て‹/›

この例では、矩形のフィルルパターンとして使用される前に回転させた簡単なパターンを定義しています35実行後の画像効果：

SVGぼかし効果 SVGグラデーション