📜  SVG FEMergeNode.in1 属性(1)

📅  最后修改于: 2023-12-03 15:35:11.653000             🧑  作者: Mango

SVG FEMergeNode.in1 属性

在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, textshadow,这些输入源是按照它们在 <feMerge> 元素中出现的顺序进行合并的。

你还可以在同一场景中使用多个 <feMerge> 元素,在组合效果时使用不同的合并顺序。

更多关于SVG的信息,请参见 SVG规范