Movatterモバイル変換


[0]ホーム

URL:


  1. 面向开发者的 Web 技术
  2. SVG:可缩放矢量图形
  3. 参考
  4. SVG 元素参考
  5. <feBlend>

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in EnglishAlways switch to English

<feBlend>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

<feBlend>SVG 滤镜原语根据特定的混合模式将两个对象组合在一起。这类似于图像编辑软件中混合两个图层。该模式由mode 属性定义。

使用上下文

类别滤镜元素
允许的内容任意数量、任意顺序的下列元素:
<animate><set>

属性

DOM 接口

该元素实现了SVGFEBlendElement 接口。

示例

SVG

html
<svg  width="200"  height="200"  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink">  <defs>    <filter>      <feFlood        result="floodFill"        x="0"        y="0"        width="100%"        height="100%"        flood-color="green"        flood-opacity="1" />      <feBlend in="SourceGraphic" in2="floodFill" mode="multiply" />    </filter>  </defs>  <image    href="mdn_logo_only_color.png"    x="10%"    y="10%"    width="80%"    height="80%"    /></svg>

结果

规范

Specification
Filter Effects Module Level 1
# feBlendElement

浏览器兼容性

参见

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2026 Movatter.jp