概要

strokeプロパティは、CSSでSVG図形の線の色を設定するためのプロパティです。SVG（Scalable Vector Graphics）は、拡大しても画質が劣化しないベクター形式の画像を描くための言語で、図形や線のデザインを細かくカスタマイズできます。strokeはその中でも、図形の輪郭や線の色を指定するプロパティで、シンプルな図形から複雑なイラストまで、多様なデザインを実現します。

構文

.element {
  stroke: <color>;
}

パラメータ

  • <color>
    線の色を指定します。#FF5733、rgb(255, 87, 51)、red、rgba(255, 87, 51, 0.8)など、さまざまな形式で指定可能です。

例

.element {
  stroke: #FF5733; /* オレンジ系の色を指定 */
}

この設定により、指定したSVG図形の線がオレンジ色になります。

戻り値

strokeは指定された色をSVG図形の線に適用します。これにより、図形の外観がカスタマイズされ、ウェブデザインの視覚的な魅力を高めることができます。

説明

strokeプロパティは、SVG図形の線の色を設定するために使用されます。例えば、円、四角形、線などの図形の輪郭部分に色を付けることができます。これにより、図形の輪郭を強調したり、デザイン全体の配色と調和させたりできます。線の幅やスタイルもstroke-widthやstroke-dasharrayなどのプロパティと組み合わせることで、さらに細かい調整が可能です。

主な特徴

  • SVG図形の線の色を柔軟に変更でき、デザインの一貫性を保つことができます。
  • CSSカラーモデル（RGB、RGBA、HSL、HSLAなど）を使って多様な色指定が可能です。
  • 他のSVGプロパティと組み合わせることで、複雑で美しいグラフィックスを作成できます。

使用例

基本的な使用例 - シンプルな図形の線に色を設定

以下の例では、SVGの円に対してstrokeプロパティを使用して線の色を赤に設定しています。

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="red" stroke-width="4" fill="none" />
</svg>

この設定により、円の輪郭が赤色に設定され、線の幅が4pxになります。

複数の図形で異なる線の色を設定する例

複数のSVG図形を描画し、それぞれ異なる線の色を設定します。

<svg width="200" height="100">
  <!-- 四角形 -->
  <rect x="10" y="10" width="60" height="60" stroke="blue" stroke-width="5" fill="none" />
  
  <!-- 円 -->
  <circle cx="120" cy="50" r="30" stroke="green" stroke-width="4" fill="none" />
  <!-- 線 -->
  <line x1="160" y1="10" x2="190" y2="90" stroke="purple" stroke-width="3" />
</svg>

この例では、四角形の線は青、円は緑、線は紫に設定されています。

線の色をグラデーションで設定する例

strokeを使って、グラデーションによる線の色を設定することも可能です。

<svg width="200" height="100">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color: red; stop-opacity: 1" />
      <stop offset="100%" style="stop-color: yellow; stop-opacity: 1" />
    </linearGradient>
  </defs>
  
  <rect x="10" y="10" width="180" height="80" stroke="url(#grad1)" stroke-width="5" fill="none" />
</svg>

この設定では、四角形の線が赤から黄色に変わるグラデーションで描かれます。

注意点

  • strokeプロパティは、SVG専用のプロパティであり、HTMLやCSSの他の要素には直接適用できませんが、SVG内でのグラフィック表現を大幅に拡張します。
  • 線の見た目をカスタマイズするためには、strokeだけでなくstroke-width（線の幅）やstroke-linecap（線の端の形状）などの関連プロパティも一緒に使用することが推奨されます。
  • strokeプロパティは、色の選択によって視認性に影響を与えるため、背景色や他の要素とのバランスを考慮して設定する必要があります。

まとめ

strokeプロパティは、SVG図形の線の色を自由に設定できる強力なツールです。単純な図形から複雑なイラストまで、SVGの柔軟性を活かして美しいデザインを作成する際に欠かせないプロパティです。他のSVGプロパティと組み合わせることで、より洗練されたグラフィックを実現し、ウェブデザインの魅力を引き出すことができます。

参照:

stroke - MDN Web Docs