SVGFEDropShadowElement: 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 January 2020.

Die setStdDeviation() Methode des SVGFEDropShadowElement Interfaces legt die Werte für das stdDeviation Attribut fest.

Syntax

setStdDeviation(x, y)

Parameter

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

In diesem Beispiel setzen wir die horizontalen und vertikalen Standardabweichungen für eine Unschärfeoperation für einen <feDropShadow> Filter-Schattierungseffekt mithilfe der setStdDeviation() Methode des SVGFEDropShadowElement Interfaces.

html

<svg height="200" width="200" viewBox="0 0 200 200">
  <defs>
    <filter id="drop-shadow-filter">
      <feDropShadow
        in="SourceGraphic"
        dx="10"
        dy="10"
        stdDeviation="5 5"
        flood-color="gray" />
    </filter>
  </defs>

  <!-- Rectangle with an initial gray shadow -->
  <rect
    x="50"
    y="50"
    width="100"
    height="100"
    fill="red"
    filter="url(#drop-shadow-filter)" />
</svg>

<!-- Button to update the shadow -->
<button id="updateShadow" type="button">Update Shadow</button>

// Get the feDropShadow element
const dropShadow = document.querySelector("feDropShadow");

// Button to trigger the update
document.getElementById("updateShadow").addEventListener("click", () => {
  // Change the standard deviation (blur radius) of the shadow
  dropShadow.setStdDeviation(15, 20);
});

Klicken Sie auf das rote Rechteck, um den Unschärfeeffekt des Schattens zu aktualisieren.

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

SVGAnimatedLength