stroke

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

stroke 属性はプレゼンテーション属性で、この図形の輪郭を描画するのに使われる色（またはグラデーションやパターンなどの SVG ペイントサーバー）を定義します。

メモ: プレゼンテーション属性ですので、 stroke は CSS プロパティとして使用できます。

この属性は、以下の SVG 要素で使用できます。

例

html
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <!-- 単純な色の輪郭 -->
  <circle cx="5" cy="5" r="4" fill="none" stroke="green" />

  <!-- グラデーションによる円の輪郭 -->
  <defs>
    <linearGradient id="myGradient">
      <stop offset="0%" stop-color="green" />
      <stop offset="100%" stop-color="white" />
    </linearGradient>
  </defs>

  <circle cx="15" cy="5" r="4" fill="none" stroke="url(#myGradient)" />
</svg>

使用上の注意

値 <paint>
既定値 なし
アニメーション 可

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# SpecifyingStrokePaint

ブラウザーの互換性

BCD tables only load in the browser