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

• グラデーションには線形グラデーションと円形グラデーションがあります。
• パターンは模様を作るのに使います。

線形グラデーション（linearGradient）

•  <defs>
       <linearGradient id="gr1">
          <stop offset="0%"   style="stop-color: #ff00cc;" />
          <stop offset="100%" style="stop-color: #0099cc;" />
       </linearGradient>
   </defs>
   
   <rect x="0" y="0" width="400" height="50" style="fill:url(#gr1);" />

グラデーションの定義は linearGradient タグで名前を指定し、stop 要素で色を指定します。 上の例では０％の位置を赤紫、１００％の位置を水色にしています。 両端の色のほかに２０％、５０％など途中の色を含めて指定してもよい。

利用するには fill:url(#名前) です。 図形の左端が０％で指定した色、右端が１００％で指定した色になります。

グラデーションの方向

•  <defs>
        <linearGradient id="gr1">
             ... ...
        </linearGradient>
        <linearGradient id="gr2"
          xlink:href="#gr1" x1="100%" x2="0%" y1="0%" y2="0%" />
   </defs>

向きのちがうグラデーションを作るには、上記の方法でグラデーションを作成した後に、それを利用して向きだけを指定します。

名前がgr2のグラデーションはgr1とグラデーションの向きを左右逆にしたものになります。

上から下へのグラデーションにするには

•   <linearGradient id="gr3"
      xlink:href="#gr1" x1="0%" x2="0%" y1="0%" y2="100%" />

のようにします。

斜め方向のグラデーションも可能です。

繰り返しなど

spreadMethod に次のどれかを指定することができます。

• spreadMethod="pad" オブジェクトにあわせてグラデーションの幅を広げます
• spreadMethod="repeat" 同じ向きで繰り返します
• spreadMethod="reflect" 反転して繰り返します

例

•  <linearGradient id="gr4" xlink:href="#gr1" spreadMethod="pad" />

円形グラデーション（radialGradient）

•  <defs>
       <radialGradient id="gr1">
          <stop offset="0%"   style="stop-color: #ff00cc;" />
          <stop offset="100%" style="stop-color: #0099cc;" />
       </linearGradient>
   </defs>
   
   <rect x="0" y="0" width="400" height="50" style="fill:url(#gr1);" />

グラデーションの定義は radialGradient タグで名前を指定し、stop 要素で色を指定します。 上の例では０％の位置を赤紫、１００％の位置を水色にしています。 両端の色のほかに２０％、５０％など途中の色を含めて指定してもよい。

利用するには fill:url(#名前) です。 図形の左端が０％で指定した色、右端が１００％で指定した色になります。

グラデーションの中心

•  <defs>
       <radialGradient id="gr1" cx="0" cy="0" r="100%">
          <stop offset="0%"   style="stop-color: #ff00cc;" />
          <stop offset="100%" style="stop-color: #0099cc;" />
       </linearGradient>
   </defs>

• cx 中心位置、初期値は５０％（バウンディングボックスの中心）
• cy 中心位置、初期値は５０％（バウンディングボックスの中心）
• r
• fx
• fy

パターン

図形をまとめてpatternとして定義することで、模様をfillの属性として使うことができます。

•  <defs>
   <pattern id="pat1" x="0" y="0" width="20%" height="20%"
                patternUnits=""objectBoundingBox">
     <path d="M 0 0 Q 5 20 10 10 T 20 20" style="stroke:black; fill:none;" />
     <path d="M 0 0 h 20 v 20 h -20 z" style="stroke;gray; fill:none;" />
   </pattern>
   </defs>
   
   <rect x="20" y="20" width="100" height="100"
           style="fill:url(#pat1); stroke:black;" />