Revision 427203 of in

  • Revision slug: Web/SVG/Attribute/in
  • Revision title: in
  • Revision id: 427203
  • Created:
  • Creator: Jeremie
  • Is current revision? Yes
  • Comment SVG/Attribute/in Web/SVG/Attribute/in

Revision Content

« SVG Attribute reference home

The in attribute identifies input for the given filter primitive.

The value can be either one of six keywords define below or can be a string which matches a previous {{SVGAttr("result")}} attribute value within the same {{SVGElement("filter")}} element. If no value is provided and this is the first filter primitive, then this filter primitive will use SourceGraphic as its input. If no value is provided and this is a subsequent filter primitive, then this filter primitive will use the result from the previous filter primitive as its input.

If the value for {{SVGAttr("result")}} appears multiple times within a given {{SVGElement("filter")}} element, then a reference to that result will use the closest preceding filter primitive with the given value for attribute {{SVGAttr("result")}}.

Usage context

Categories None
Value SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>
Animatable Yes
Normative document SVG 1.1 (2nd Edition)
SourceGraphic
This keyword represents the graphics elements that were the original input into the {{SVGElement("filter")}} element.
SourceAlpha
This keyword represents the graphics elements that were the original input into the {{SVGElement("filter")}} element. SourceAlpha has all of the same rules as SourceGraphic except that only the alpha channel is used.
BackgroundImage
This keyword represents an image snapshot of the SVG document under the filter region at the time that the {{SVGElement("filter")}} element was invoked.
BackgroundAlpha
Same as BackgroundImage except only the alpha channel is used.
FillPaint
This keyword represents the value of the {{SVGAttr("fill")}} property on the target element for the filter effect. In many cases, the FillPaint is opaque everywhere, but it might not be the case if a shape is paint with a gradient or pattern which itself includes transparent or semi-transparent parts.
StrokePaint
This keyword represents the value of the {{SVGAttr("stroke")}} property on the target element for the filter effect. In many cases, the StrokePaint is opaque everywhere, but it might not be the case if a shape is paint with a gradient or pattern which itself includes transparent or semi-transparent parts.

Example

Elements

The following elements can use the in attribute

  • {{SVGElement("feBlend")}}
  • {{SVGElement("feColorMatrix")}}
  • {{SVGElement("feComponentTransfer")}}
  • {{SVGElement("feComposite")}}
  • {{SVGElement("feConvolveMatrix")}}
  • {{SVGElement("feDiffuseLighting")}}
  • {{SVGElement("feDisplacementMap")}}
  • {{SVGElement("feGaussianBlur")}}
  • {{SVGElement("feMorphology")}}
  • {{SVGElement("feOffset")}}
  • {{SVGElement("feSpecularLighting")}}
  • {{SVGElement("feTile")}}

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>The <code>in</code> attribute identifies input for the given filter primitive.</p>
<p>The value can be either one of six keywords define below or can be a string which matches a previous {{SVGAttr("result")}} attribute value within the same {{SVGElement("filter")}} element. If no value is provided and this is the first filter primitive, then this filter primitive will use <code>SourceGraphic</code> as its input. If no value is provided and this is a subsequent filter primitive, then this filter primitive will use the result from the previous filter primitive as its input.<br />
  <br />
  If the value for {{SVGAttr("result")}} appears multiple times within a given {{SVGElement("filter")}} element, then a reference to that result will use the closest preceding filter primitive with the given value for attribute {{SVGAttr("result")}}.</p>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <th scope="row">Categories</th>
      <td>None</td>
    </tr>
    <tr>
      <th scope="row">Value</th>
      <td><code>SourceGraphic</code> | <code>SourceAlpha</code> | <code>BackgroundImage</code> | <code>BackgroundAlpha</code> | <code>FillPaint</code> | <code>StrokePaint</code> | &lt;filter-primitive-reference&gt;</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#FilterPrimitiveInAttribute" title="http://www.w3.org/TR/SVG11/filters.html#FilterPrimitiveInAttribute">SVG 1.1 (2nd Edition)</a></td>
    </tr>
  </tbody>
</table>
<dl>
  <dt>
    SourceGraphic</dt>
  <dd>
    This keyword represents the graphics elements that were the original input into the {{SVGElement("filter")}} element.</dd>
  <dt>
    SourceAlpha</dt>
  <dd>
    This keyword represents the graphics elements that were the original input into the {{SVGElement("filter")}} element. <code>SourceAlpha</code> has all of the same rules as <code>SourceGraphic</code> except that only the alpha channel is used.</dd>
  <dt>
    BackgroundImage</dt>
  <dd>
    This keyword represents an image snapshot of the SVG document under the filter region at the time that the {{SVGElement("filter")}} element was invoked.</dd>
  <dt>
    BackgroundAlpha</dt>
  <dd>
    Same as <code>BackgroundImage</code> except only the alpha channel is used.</dd>
  <dt>
    FillPaint</dt>
  <dd>
    This keyword represents the value of the {{SVGAttr("fill")}} property on the target element for the filter effect. In many cases, the <code>FillPaint</code> is opaque everywhere, but it might not be the case if a shape is paint with a gradient or pattern which itself includes transparent or semi-transparent parts.</dd>
  <dt>
    StrokePaint</dt>
  <dd>
    This keyword represents the value of the {{SVGAttr("stroke")}} property on the target element for the filter effect. In many cases, the <code>StrokePaint</code> is opaque everywhere, but it might not be the case if a shape is paint with a gradient or pattern which itself includes transparent or semi-transparent parts.</dd>
</dl>
<h2 id="Example">Example</h2>
<h2 id="Elements">Elements</h2>
<p>The following elements can use the <code>in</code> attribute</p>
<ul>
  <li>{{SVGElement("feBlend")}}</li>
  <li>{{SVGElement("feColorMatrix")}}</li>
  <li>{{SVGElement("feComponentTransfer")}}</li>
  <li>{{SVGElement("feComposite")}}</li>
  <li>{{SVGElement("feConvolveMatrix")}}</li>
  <li>{{SVGElement("feDiffuseLighting")}}</li>
  <li>{{SVGElement("feDisplacementMap")}}</li>
  <li>{{SVGElement("feGaussianBlur")}}</li>
  <li>{{SVGElement("feMorphology")}}</li>
  <li>{{SVGElement("feOffset")}}</li>
  <li>{{SVGElement("feSpecularLighting")}}</li>
  <li>{{SVGElement("feTile")}}</li>
</ul>
Revert to this revision