SVGFEDropShadowElement: setStdDeviation() Methode

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.

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.