📅  最后修改于: 2023-12-03 15:35:11.653000             🧑  作者: Mango
在SVG中,<feMergeNode>
元素表示复合效果中的一个输入源。 in
属性用来指定该源的ID。<feMergeNode>
元素可以多次出现用于指定多个输入源。
<feMerge>
元素用于组合多个渲染效果。<feMerge>
元素中的显示顺序是从上到下,在组合图像时第一个 feMergeNode
元素会放在最上面。合并的顺序由元素出现的顺序决定。
以下是一个示例:
<svg width="200" height="200">
<defs>
<filter id="merge">
<feMerge>
<feMergeNode in="background"/>
<feMergeNode in="text" />
<feMergeNode in="shadow"/>
</feMerge>
</filter>
<rect id="background" x="0" y="0" width="200" height="200" fill="yellow" />
<text id="text" x="50%" y="50%" font-size="60" fill="blue" text-anchor="middle">SVG</text>
<feDropShadow id="shadow" dx="0" dy="6" stdDeviation="2" flood-color="black" flood-opacity="0.5"/>
</defs>
<rect x="10" y="10" width="180" height="180" filter="url(#merge)" />
</svg>
在上面的示例中,<feMergeNode>
元素定义了三个输入源 background
, text
和 shadow
,这些输入源是按照它们在 <feMerge>
元素中出现的顺序进行合并的。
你还可以在同一场景中使用多个 <feMerge>
元素,在组合效果时使用不同的合并顺序。
更多关于SVG的信息,请参见 SVG规范。