SVGFEGaussianBlurElement: setStdDeviation() method
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.
Phương thức setStdDeviation() của giao diện SVGFEGaussianBlurElement đặt các giá trị cho thuộc tính stdDeviation.
Cú pháp
js
setStdDeviation(x, y)
Tham số
x-
Một số thực đại diện cho thành phần X của thuộc tính
stdDeviation. y-
Một số thực đại diện cho thành phần Y của thuộc tính
stdDeviation.
Giá trị trả về
Không có (undefined).
Ví dụ
Sử dụng 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"
fill="hotpink"
filter="url(#gaussian-blur-filter)" />
</svg>
<!-- Button to update the blur -->
<button id="updateBlur">Update Blur</button>
js
// 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
});
Thông số kỹ thuật
| Specification |
|---|
| Filter Effects Module Level 1 # dom-svgfegaussianblurelement-setstddeviation |