SVGFEGaussianBlurElement: setStdDeviation()-Methode

Baseline Widely available

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

Die Methode setStdDeviation() des SVGFEGaussianBlurElement-Interfaces setzt die Werte für das Attribut stdDeviation.

Syntax

SVGFEGaussianBlurElement.setStdDeviation(x, y)

Parameter

x: Ein Float, der die X-Komponente des Attributs stdDeviation darstellt.
y: Ein Float, der die Y-Komponente des Attributs stdDeviation darstellt.

Rückgabewert

Keiner (undefined).

Beispiele

Verwendung von `setStdDeviation()`

html

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="gaussian-blur-filter">
      <feGaussianBlur
        in="SourceGraphic"
        stdDeviation="5 5"
        result="blurred-graphic" />
    </filter>
  </defs>

  <!-- Rectangle with an initial blur effect -->
  <rect
    x="50"
    y="50"
    width="100"
    height="100"
    style="fill:hotpink;"
    filter="url(#gaussian-blur-filter)" />
</svg>

<!-- Button to update the blur -->
<button id="updateBlur">Update Blur</button>

// Get the feGaussianBlur element
const gaussianBlur = document.querySelector("feGaussianBlur");

// Button to trigger the update
document.getElementById("updateBlur").addEventListener("click", () => {
  // Change the standard deviation (blur radius) of the blur effect
  gaussianBlur.setStdDeviation(15, 20); // Update to X: 15, Y: 20
});

Spezifikationen

Specification
Filter Effects Module Level 1 # dom-svgfegaussianblurelement-setstddeviation

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

SVGAnimatedLength