mozilla

Revision 311395 of operator

  • Revision slug: SVG/Attribute/operator
  • Revision title: operator
  • Revision id: 311395
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment

Revision Content

« SVG Attribute reference home

The operator attribute as two meaning based on the context it's used.

  • For the {{SVGElement("feComposite")}} element, it defines the compositing operation that is to be performed.
  • For the {{SVGElement("feMorphology")}} element, it defines whether to erode (i.e., thin) or dilate (fatten) the source graphic.

Usage context

For the {{SVGElement("feComposite")}}  element

Categories None
Value over | in | out | atop | xor | arithmetic
Animatable Yes
Normative document SVG 1.1 (2nd Edition)

For the {{ SVGElement("feMorphology") }} element

Categories None
Value erode | dilate
Animatable Yes
Normative document SVG 1.1 (2nd Edition)

Example

Elements

The following elements can use the operator attribute

  • {{ SVGElement("feComposite") }}
  • {{ SVGElement("feMorphology") }}

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>The <code>operator</code> attribute as two meaning based on the context it's used.</p>
<ul>
  <li>For the {{SVGElement("feComposite")}} element, it defines the compositing operation that is to be performed.</li>
  <li>For the {{SVGElement("feMorphology")}} element, it defines whether to erode (i.e., thin) or dilate (fatten) the source graphic.</li>
</ul>
<h2 id="Usage_context">Usage context</h2>
<h3 id="For_animation_elements">For the {{SVGElement("feComposite")}}&nbsp; element</h3>
<table class="standard-table">
  <tbody>
    <tr>
      <th scope="row">Categories</th>
      <td><em>None</em></td>
    </tr>
    <tr>
      <th scope="row">Value</th>
      <td><code>over</code> | <code>in</code> | <code>out</code> | <code>atop</code> | <code>xor</code> | <code>arithmetic</code></td>
    </tr>
    <tr>
      <th scope="row">Animatable</th>
      <td>Yes</td>
    </tr>
    <tr>
      <th scope="row">Normative document</th>
      <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feCompositeOperatorAttribute" title="http://www.w3.org/TR/SVG11/filters.html#feCompositeOperatorAttribute">SVG 1.1 (2nd Edition)</a></td>
    </tr>
  </tbody>
</table>
<h3 id="For_the_.7B.7B_SVGElement(.22feColorMatrix.22)_.7D.7D_element">For the {{ SVGElement("feMorphology") }} element</h3>
<table class="standard-table">
  <tbody>
    <tr>
      <th scope="row">Categories</th>
      <td><em>None</em></td>
    </tr>
    <tr>
      <th scope="row">Value</th>
      <td><code>erode</code> | <code>dilate</code></td>
    </tr>
    <tr>
      <th scope="row">Animatable</th>
      <td>Yes</td>
    </tr>
    <tr>
      <th scope="row">Normative document</th>
      <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMorphologyOperatorAttribute" title="http://www.w3.org/TR/SVG11/filters.html#feMorphologyOperatorAttribute">SVG 1.1 (2nd Edition)</a></td>
    </tr>
  </tbody>
</table>
<h2 id="Example">Example</h2>
<h2 id="Elements">Elements</h2>
<p>The following elements can use the <code>operator</code> attribute</p>
<ul>
  <li>{{ SVGElement("feComposite") }}</li>
  <li>{{ SVGElement("feMorphology") }}</li>
</ul>
Revert to this revision