SVG FEBlendElement.in1 属性

SVG FEBlendElement.in1 属性是用于指定 <feBlend> 元素中的第一个输入图像源的属性。它定义了要与第二个输入图像源混合的图像。

属性值

SVG FEBlendElement.in1 属性可以接受以下值：

• <filter-primitive-reference>: 表示引用图像源的标识符。它可以是其他滤镜效果的输出结果，也可以是期望与该滤镜效果混合的图像源。
• SourceGraphic: 表示当前 SVG 元素的可视表示作为输入图像源。

用法

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <filter id="blendFilter">
    <feBlend in="SourceGraphic" in2="filterInput" mode="multiply" />
  </filter>

  <circle cx="50" cy="50" r="40" fill="red" filter="url(#blendFilter)" />

  <image x="120" y="20" width="160" height="160" xlink:href="image.jpg" id="filterInput" />
</svg>

上面的示例中，我们定义了一个 <feBlend> 元素用于将当前 SVG 元素与一个图像源进行混合。通过设置 in1 属性为 "SourceGraphic"，将使用当前 SVG 元素的可视内容作为第一个输入图像源。而 in2 属性指向了一个 id 为 "filterInput" 的图像元素作为第二个输入图像源。

相关属性

SVG FEBlendElement 元素还具有其他属性，用于控制混合模式的行为。这些属性包括：

• in2: 指定第二个输入图像源。
• mode: 指定混合模式，如：normal, multiply, screen 等。

参考链接

• SVG FEBlendElement.in1 (MDN Web Docs)