概要

stop-colorプロパティは、CSSでSVGのグラデーションに使用される色を指定するためのプロパティです。SVGのグラデーションでは、複数の色の「ストップ」を設定することで、滑らかな色の移行が実現されます。stop-colorはその「ストップ」の位置で使用する色を指定し、グラデーションの見た目をカスタマイズするのに使われます。ウェブデザインで美しいビジュアル効果を簡単に実現できる強力なツールです。

構文

stop {
  stop-color: <color>;
}

パラメータ

  • <color>
    グラデーションのストップ位置に指定する色です。#FF5733、rgb(255, 87, 51)、red、rgba(255, 87, 51, 0.8)など、さまざまな形式で指定できます。

例

stop {
  stop-color: #FF5733; /* オレンジ系の色を指定 */
}

この設定により、グラデーションの指定位置で指定した色が適用されます。

戻り値

stop-colorは、指定された色をグラデーションのストップ位置に適用し、色の変化を演出します。これにより、SVGグラデーションがよりカラフルで魅力的になります。

説明

stop-colorは、SVGのグラデーション（線形グラデーションや放射状グラデーション）のストップ位置に使う色を指定するプロパティです。複数のストップを設定して、それぞれの位置に異なる色を配置することで、滑らかな色の移り変わりを表現します。例えば、左側を赤、右側を青にしたい場合、ストップ位置にそれぞれ赤と青を指定することで、赤から青へのグラデーションを簡単に実現できます。

主な特徴

  • SVGグラデーション内の特定の位置に色を設定するため、デザインの細かな調整が可能です。
  • カラーコード、RGBA、HSLAなどの色指定方法を使って、透明度や色調を柔軟に調整できます。
  • グラデーションの美しいビジュアル効果を活用し、ウェブページに視覚的な魅力を追加できます。

使用例

基本的な使用例 - 線形グラデーションで色を設定

以下の例では、線形グラデーションの色をstop-colorで設定し、赤から青へのグラデーションを作成しています。

<svg width="200" height="200">
  <defs>
    <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="red" /> <!-- 開始位置に赤色を設定 -->
      <stop offset="100%" stop-color="blue" /> <!-- 終了位置に青色を設定 -->
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="180" height="180" fill="url(#gradient1)" />
</svg>

この設定により、赤から青への滑らかなグラデーションが描画されます。

放射状グラデーションでの使用例

放射状グラデーションを使用し、中心から外側にかけて色が変化する設定をします。

<svg width="200" height="200">
  <defs>
    <radialGradient id="gradient2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="yellow" /> <!-- 中心に黄色を設定 -->
      <stop offset="100%" stop-color="green" /> <!-- 外側に緑色を設定 -->
    </radialGradient>
  </defs>
  <circle cx="100" cy="100" r="80" fill="url(#gradient2)" />
</svg>

この例では、中心から外側へ黄色から緑へのグラデーションが描かれます。

複数のストップ位置で色を設定する例

複数のストップ位置を設定し、より複雑なグラデーション効果を作成します。

<svg width="200" height="200">
  <defs>
    <linearGradient id="gradient3" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="purple" /> <!-- 最初のストップに紫色を設定 -->
      <stop offset="50%" stop-color="pink" /> <!-- 中央にピンク色を設定 -->
      <stop offset="100%" stop-color="cyan" /> <!-- 最後にシアン色を設定 -->
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="180" height="180" fill="url(#gradient3)" />
</svg>

この設定により、紫からピンク、シアンへの複雑なグラデーションが実現されます。

注意点

  • stop-colorは、SVG内でのみ使用できるプロパティです。HTMLやCSSで直接使うことはできませんが、SVGの中で指定することで、複雑な色合いのグラデーションを表現できます。
  • グラデーションを使用する際には、ブラウザの対応状況を確認してください。現代の主要なブラウザではサポートされていますが、非常に古いブラウザでは動作しない場合があります。
  • グラデーションが複雑になると、ページの読み込み速度に影響を与える可能性があるため、パフォーマンスに配慮して使用してください。

まとめ

stop-colorプロパティは、SVGグラデーションの色を細かく調整できる強力なツールです。複数のストップ位置に異なる色を設定することで、シンプルな色の移り変わりから、複雑で美しいグラデーション効果まで、様々なビジュアル表現を実現できます。ウェブデザインに視覚的な魅力を加えたいとき、ぜひこのプロパティを活用してみてください。

参照:

stop-color - MDN Web Docs