SVG（7）パターンとグラデーション塗りつぶしを学ぶ

一緒に書く習慣をつけましょう！「ナゲッツデイリーニュープラン・4月アップデートチャレンジ」に参加して7日目です。クリックしてイベントの詳細をご覧ください。

序章

単色に加えて、パターンとグラデーションをSVGのグラフィックの塗りつぶしとアウトラインに使用することもできます。

パターン塗りつぶし

パターンの塗りつぶしpatternsには、塗りつぶしタイプの1つである要素を使用する必要があります。
patternUnitsプロパティは、パターンの配置方法を設定します。デフォルト値objectBoundingBox。

を使用する場合objectBoundingBox、パターンのサイズは、塗りつぶされるオブジェクトのサイズに基づいて計算されます。

    <svg width="400" height="400">
      <defs>
        <pattern id="pa" x="0" y="0" patternUnits="objectBoundingBox" width="20%" height="20%">
          <path d="M 0 0 h 20 v 20 h -20 z" style="stroke: black; fill: none"></path>
        </pattern>
      </defs>

      <rect width="100" height="100" stroke="#aaa" fill="url(#pa)" />
      <rect x="110" width="200" height="200" stroke="#aaa" fill="url(#pa)" />
    </svg>
复制代码

1.2幅と高さを20％に設定します。20pxの正方形がパターンで描かれています。20pxの正方形より20％小さい最初の画像がインターセプトされ、パターンが並べて表示されます。2番目の画像は20pxより20％大きく、パターンが大きくなり、パターンが並べて表示されます。

userSpaceOnUse属性を使用してwidth和height、に従ってパターンを作成します。

  <pattern id="pa" x="0" y="0" patternUnits="userSpaceOnUse" width="40" height="40">
    <path d="M 0 0 h 40 v 40 h -40 z" style="stroke: black; fill: none"></path>
    <path d="M 20 22 A 5 10 -45 1 0 20 34" fill="#aaa" />
    <path d="M 20 22 A 5 10 45 1 1 20 34" fill="#aaa" />
  </pattern>

  <rect fill="url(#pa)" stroke="black" x="0" y="0" width="200" height="200" />
复制代码

2.2width和height設定に従って生成されたパターンを並べて表示します。

patternContentUnitsこのプロパティは、パターンのグラフィックの幅と高さのタイプを設定します。デフォルト値userSpaceOnUse。

userSpaceOnUseデフォルトの座標タイプpxを使用してパターンのサイズを設定します。
objectBoundingBoxパターンのサイズを設定するには、パーセンテージを使用します。

      <defs>
        <pattern
          id="pa"
          x="0"
          y="0"
          width=".2"
          height=".2"
          patternUnits="objectBoundingBox"
          patternContentUnits="objectBoundingBox"
        >
          <path d="M 0 0 h 0.2 v 0.2 h -0.2z" style="stroke: black; stroke-width: 0.01; fill: none"></path>
        </pattern>
      </defs>
      <rect width="100" height="100" stroke="#aaa" fill="url(#pa)" />
      <rect x="110" width="200" height="200" stroke="#aaa" fill="url(#pa)" />
复制代码

2.1表示パターンの正方形もパーセンテージとして計算されます。

グラデーション塗りつぶし

linearGradient線形グラデーション。直線に沿って変化する一連の色で、特定の場所で目的の色を指定します。
属性：

x1,y1グラデーションの開始点。パーセンテージで表されます。デフォルトのグラデーションの方向は左から右です。
x2,y2グラデーションの終了位置。パーセンテージで表されます。
spreadMethodグラデーションの塗りつぶし方法を設定します。

      <defs>
        <linearGradient id="linear" x1="100%" y2="100%">
          <stop offset="0%" style="stop-color: #ffcc00"></stop>
          <stop offset="100%" style="stop-color: #0099cc"></stop>
        </linearGradient>
      </defs>
      <rect x="10" y="10" width="200" height="100" fill="url(#linear)"></rect>
复制代码

radialGradient放射状グラデーション。各グラデーションポイントは、中心点から広がる円形のパスです。
属性：

cx,cy,rグラデーションの範囲を定義します。半径の測定単位は、オブジェクトの平均幅と高さです。デフォルト値は50％です。
fx,fy0％ポイントが配置されている円パスの中心。
spreadMethod描画範囲がグラフィックの端に達しない場合を設定します。

      <defs>
        <radialGradient id="rad" cx="0%" cy="0%" r="60%">
          <stop offset="0%" style="stop-color: #f96" />
          <stop offset="50%" style="stop-color: #9c9" />
          <stop offset="100%" style="stop-color: #906" />
        </radialGradient>
        <radialGradient id="pad" xlink:href="#rad" spreadMethod="pad" />
        <radialGradient id="repeat" xlink:href="#rad" spreadMethod="repeat" />
        <radialGradient id="reflect" xlink:href="#rad" spreadMethod="reflect" />
      </defs>
      <rect x="10" y="10" width="100" height="100" fill="url(#pad)" />
      <rect x="10" y="120" width="100" height="100" fill="url(#repeat)" />
      <rect x="10" y="230" width="100" height="100" fill="url(#reflect)" />
复制代码

stop要素、グラデーションポイントを設定します。

offsetグラデーションポイントの位置を指定するプロパティ。値の範囲は0％〜100％です。
stop-coloroffset位置ポイントの色に対応する属性。
stop-opacityoffset位置ポイントの不透明度に対応する属性。

SVG（7）パターンとグラデーション塗りつぶしを学ぶ

序章

パターン塗りつぶし

グラデーション塗りつぶし

おすすめ