<feMerge>
**<feMerge>** SVG 元素允許同時應用過濾器效果,而不是順序應用。這是透過其他過濾器透過result 屬性儲存其輸出,然後在 <feMergeNode> 子元素中訪問它來實現的。
使用上下文
| 類別 | 濾鏡基本元素 |
|---|---|
| 允許的內容 | 任意數量的以下元素,以任意順序排列<feMergeNode> |
示例
SVG
html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<filter id="feOffset" x="-40" y="-20" width="100" height="200">
<feOffset in="SourceGraphic" dx="60" dy="60" />
<feGaussianBlur stdDeviation="5" result="blur2" />
<feMerge>
<feMergeNode in="blur2" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<rect
x="40"
y="40"
width="100"
height="100"
style="stroke: #000000; fill: green; filter: url(#feOffset);" />
</svg>
結果
DOM 介面
此元素實現了 SVGFEMergeElement 介面。
規範
| 規範 |
|---|
| 濾鏡效果模組 1 級 # feMergeElement |
瀏覽器相容性
BCD 表格僅在啟用 JavaScript 的瀏覽器中載入。
另請參閱
- SVG 濾鏡基本屬性
flood-color屬性flood-opacity屬性<filter><feBlend><feColorMatrix><feComponentTransfer><feComposite><feConvolveMatrix><feDiffuseLighting><feDisplacementMap><feFlood><feGaussianBlur><feImage><feMergeNode><feMorphology><feOffset><feSpecularLighting><feTile><feTurbulence>- SVG 教程:濾鏡效果