SVGFEGaussianBlurElement: метод setStdDeviation()
Базовая реализация Широко поддерживается
Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.
Метод setStdDeviation() интерфейса SVGFEGaussianBlurElement задаёт значения для атрибута stdDeviation.
Синтаксис
SVGFEGaussianBlurElement.setStdDeviation(x, y)
Параметры
x-
Число с плавающей точкой, представляющее X-компоненту атрибута
stdDeviation. y-
Число с плавающей точкой, представляющее Y-компоненту атрибута
stdDeviation.
Возвращаемое значение
None (undefined).
Примеры
Использование setStdDeviation()
<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
});
Спецификации
Совместимость с браузерами
| Рабочие столы | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | |
setStdDeviation |
5 | 12 | 3 | ≤12.1 | 6 | 18 | 4 | ≤12.1 | 6 | 1.0 | 4.4 |
См. также
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SVGFEGaussianBlurElement/setStdDeviation