このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

stdDeviation

Baseline Widely available

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

stdDeviation 属性は、ぼかし操作の標準偏差を定義します。

この属性は次の SVG 要素で使用できます。

html
<svg viewBox="0 0 480 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="gaussianBlur1">
    <feGaussianBlur stdDeviation="1" />
  </filter>
  <filter id="gaussianBlur2">
    <feGaussianBlur stdDeviation="5" />
  </filter>
  <filter id="gaussianBlur3" x="-30%" y="-30%" width="160%" height="160%">
    <feGaussianBlur stdDeviation="10" />
  </filter>

  <circle cx="100" cy="100" r="50" filter="url(#gaussianBlur1)" />
  <circle cx="240" cy="100" r="50" filter="url(#gaussianBlur2)" />
  <circle cx="380" cy="100" r="50" filter="url(#gaussianBlur3)" />
</svg>

使用上のメモ

<number-optional-number>
デフォルト値 0
アニメーション
<number-optional-number>

2 つの数値が指定された場合、1 つ目の数値は X 軸方向の標準偏差を表します。2 つ目の数値は Y 軸方向の標準偏差を表します。1 つの数値のみが指定された場合は、その値が X 軸と Y 軸の両方に使用されます。

負の値は使用できません。値が 0 の場合、指定されたフィルタープリミティブの効果が無効になります(つまり、結果はフィルター処理前の入力画像となります)。X または Y のいずれか一方のみ stdDeviation が 0 の場合、ぼかし処理は値が 0 以外の方向に対してのみ適用されます。

仕様書

Specification
Filter Effects Module Level 1
# element-attrdef-fegaussianblur-stddeviation

ブラウザーの互換性

svg.elements.feDropShadow.stdDeviation

svg.elements.feGaussianBlur.stdDeviation