SVG 模糊效果
SVG <feGaussianBlur>
The <feGaussianBlur> filter is used to create blur effects
這是 SVG 程式碼
示例
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="f1" x="0" y="0" xmlns="http://www.w3.org/2000/svg">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" fill="yellow" filter="url(#f1)" />
</svg>
自己動手試一試 »
程式碼解釋
- 元素
<filter>的id屬性定義了濾鏡的唯一名稱。 - The blur effect is defined with the
<feGaussianBlur>element - The
in="SourceGraphic"part defines that the effect is created for the entire element - The
stdDeviationattribute defines the amount of the blur - <rect> 元素的
filter屬性將元素指向 "f1" 濾鏡。
SVG <feGaussianBlur>
The stdDeviation attribute defines the amount of the blur. A higher value results in a more blurry image
這是 SVG 程式碼
示例
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="f2" x="0" y="0" xmlns="http://www.w3.org/2000/svg">
<feGaussianBlur in="SourceGraphic" stdDeviation="55" />
</filter>
</defs>
<rect width="90" height="90" fill="yellow" filter="url(#f2)" />
</svg>
自己動手試一試 »
