SVGFECompositeElement: operator property

Baseline

Widely available

This feature is well established and works across many devices and browser versions. Its been available across browsers since July 2015.

See full compatibility
Learn more

The operator read-only property of the SVGFECompositeElement interface reflects the operator attribute of the given <feComposite> element.

Value

An SVGAnimatedEnumeration object.

Examples

Using out, in and over operators in <feComposite> element.

html

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="filter1">
    <feImage
      href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
      width="200"
      x="-70"
      y="10" />
    <feComposite in2="SourceGraphic" operator="out" />
  </filter>
  <filter id="filter2">
    <feImage
      href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
      width="120"
      x="30"
      y="10" />
    <feComposite in2="SourceGraphic" operator="in" />
    <feComposite in2="SourceGraphic" operator="over" />
  </filter>
  <filter id="filter3">
    <feImage
      href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
      width="140"
      x="80"
      y="10" />
    <feComposite
      in2="SourceGraphic"
      operator="arithmetic"
      k1="0.1"
      k2="0.2"
      k3="0.3"
      k4="0.4" />
  </filter>
  <circle cx="30" cy="50" r="30" filter="url(#filter1)" />
  <circle cx="90" cy="50" r="30" filter="url(#filter2)" />
  <circle cx="150" cy="50" r="30" filter="url(#filter3)" />
</svg>

Specifications

Specification
Filter Effects Module Level 1 # dom-svgfecompositeelement-operator

Browser compatibility

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on Jan 31, 2025 by MDN contributors.

View this page on GitHub Report a problem with this content