SVGFEGaussianBlurElement:setStdDeviation() 方法
SVGFEGaussianBlurElement
接口的 setStdDeviation()
方法用于设置 stdDeviation
属性的值。
语法
js
setStdDeviation(x, y)
参数
返回值
无(undefined
)。
示例
使用 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
});
规范
规范 |
---|
滤镜效果模块第 1 级 # dom-svgfegaussianblurelement-setstddeviation |
浏览器兼容性
加载中…