Skip to content

Commit

Permalink
Follow-up of mdn#2353. Fixes mdn#1450.
Browse files Browse the repository at this point in the history 
This PR addresses some more minor bits I discovered while reviewing

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
  • Loading branch information
@Ryuno-Ki
Ryuno-Ki committed Feb 20, 2021
1 parent 25c2f8b commit bcfe1c1
Show file tree
Hide file tree
Showing 2 changed files with 113 additions and 117 deletions.
98 changes: 49 additions & 49 deletions files/en-us/web/svg/attribute/in/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,46 +20,46 @@
<h2 id="Usage_notes">Usage notes</h2>

<table class="properties">
<tbody>
<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> | <code>&lt;filter-primitive-reference&gt;</code></td>
</tr>
<tr>
<th scope="row">Default value</th>
<td><code>SourceGraphic</code> for first filter primitive, otherwise result of previous filter primitive</td>
</tr>
<tr>
<th scope="row">Animatable</th>
<td>Yes</td>
</tr>
</tbody>
<tbody>
<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> | <code>&lt;filter-primitive-reference&gt;</code></td>
</tr>
<tr>
<th scope="row">Default value</th>
<td><code>SourceGraphic</code> for first filter primitive, otherwise result of previous filter primitive</td>
</tr>
<tr>
<th scope="row">Animatable</th>
<td>Yes</td>
</tr>
</tbody>
</table>

<dl>
<dt><code>SourceGraphic</code></dt>
<dd>This keyword represents the graphics elements that were the original input into the {{SVGElement("filter")}} element.</dd>
<dt><code>SourceAlpha</code></dt>
<dd>This keyword represents the graphics elements that were the original input into the <code>&lt;filter&gt;</code> element. <code>SourceAlpha</code> has all of the same rules as <code>SourceGraphic</code> except that only the alpha channel is used.</dd>
<dt><code>BackgroundImage</code></dt>
<dd>This keyword represents an image snapshot of the SVG document under the filter region at the time that the <code>&lt;filter&gt;</code> element was invoked.</dd>
<dt><code>BackgroundAlpha</code></dt>
<dd>Same as <code>BackgroundImage</code> except only the alpha channel is used.</dd>
<dt><code>FillPaint</code></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 that might not be the case if a shape is painted with a gradient or pattern which itself includes transparent or semi-transparent parts.</dd>
<dt><code>StrokePaint</code></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 that might not be the case if a shape is painted with a gradient or pattern which itself includes transparent or semi-transparent parts.</dd>
<dt><code>&lt;filter-primitive-reference&gt;</code></dt>
<dd>This value is an assigned name for the filter primitive in the form of a {{cssxref("custom-ident")}}. If supplied, then graphics that result from processing this filter primitive can be referenced by an in attribute on a subsequent filter primitive within the same filter element. If no value is provided, the output will only be available for re-use as the implicit input into the next filter primitive if that filter primitive provides no value for its in attribute.</dd>
<dt><code>SourceGraphic</code></dt>
<dd>This keyword represents the graphics elements that were the original input into the {{SVGElement("filter")}} element.</dd>
<dt><code>SourceAlpha</code></dt>
<dd>This keyword represents the graphics elements that were the original input into the <code>&lt;filter&gt;</code> element. <code>SourceAlpha</code> has all of the same rules as <code>SourceGraphic</code> except that only the alpha channel is used.</dd>
<dt><code>BackgroundImage</code></dt>
<dd>This keyword represents an image snapshot of the SVG document under the filter region at the time that the <code>&lt;filter&gt;</code> element was invoked.</dd>
<dt><code>BackgroundAlpha</code></dt>
<dd>Same as <code>BackgroundImage</code> except only the alpha channel is used.</dd>
<dt><code>FillPaint</code></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 that might not be the case if a shape is painted with a gradient or pattern which itself includes transparent or semi-transparent parts.</dd>
<dt><code>StrokePaint</code></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 that might not be the case if a shape is painted with a gradient or pattern which itself includes transparent or semi-transparent parts.</dd>
<dt><code>&lt;filter-primitive-reference&gt;</code></dt>
<dd>This value is an assigned name for the filter primitive in the form of a {{cssxref("custom-ident")}}. If supplied, then graphics that result from processing this filter primitive can be referenced by an in attribute on a subsequent filter primitive within the same filter element. If no value is provided, the output will only be available for re-use as the implicit input into the next filter primitive if that filter primitive provides no value for its in attribute.</dd>
</dl>

<h2 id="Workaround_for_backgroundImage">Workaround for BackgroundImage</h2>

<p><code>BackgroundImage</code> is not supported as a filter source in modern browsers (see the <a href="/en-US/docs/Web/SVG/Element/feComposite#browser_compatibility">feComposite compatibility table</a>). We therefore need to import one of the images to blend inside the filter itself, using an <code>&lt;feImage&gt;</code> element.</p>

<div class="notecard note">
<h4>Note</h4>
<p>Firefox <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=455986">Bug 455986</a> means that <code>feImage</code> cannot load partial images, including circles, rectangles, paths or other fragments defined in the document. So that this example works on more browsers, a full external image of the logo is loaded.</p>
<h4>Note</h4>
<p>Firefox <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=455986">Bug 455986</a> means that <code>feImage</code> cannot load partial images, including circles, rectangles, paths or other fragments defined in the document. So that this example works on more browsers, a full external image of the logo is loaded.</p>
</div>


Expand Down Expand Up @@ -96,23 +96,23 @@ <h3 id="Result">Result</h3>
<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("Filters 1.0", "filters.html#FilterPrimitiveInAttribute", "in")}}</td>
<td>{{Spec2("Filters 1.0")}}</td>
<td>No change</td>
</tr>
<tr>
<td>{{SpecName("SVG1.1", "#element-attrdef-filter-primitive-in", "in")}}</td>
<td>{{Spec2("SVG1.1")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("Filters 1.0", "filters.html#FilterPrimitiveInAttribute", "in")}}</td>
<td>{{Spec2("Filters 1.0")}}</td>
<td>No change</td>
</tr>
<tr>
<td>{{SpecName("SVG1.1", "#element-attrdef-filter-primitive-in", "in")}}</td>
<td>{{Spec2("SVG1.1")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
132 changes: 64 additions & 68 deletions files/en-us/web/svg/element/fecomposite/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,46 +19,45 @@
<th>Description</th>
</tr>
<tr>
<td><p>over <img src="operation_over.png" title="over operator" width="300"></p></td>
<td><p>over <img src="operation_over.png" alt="over operator" width="300"></p></td>
<td>The source graphic defined by the {{SVGAttr("in")}} attribute (the MDN logo) is placed over the destination graphic defined by the {{SVGAttr("in2")}} attribute (the circle).
<p>This is the <em>default operation</em>, which will be used if no operation or an unsupported operation is specified.</p>
</td>
</tr>
<tr>
<td><p>in <img src="operation_in.png" title="in operator"></p></td>
<td><p>in <img src="operation_in.png" alt="in operator"></p></td>
<td>The parts of the source graphic defined by the <code>in</code> attribute that overlap the destination graphic defined in the <code>in2</code> attribute, replace the destination graphic.</td>
</tr>
<tr>
<td><p>over <img src="operation_out.png" title="out operator"> </p></td>
<td><p>out <img src="operation_out.png" alt="out operator"> </p></td>
<td>The parts of the source graphic defined by the <code>in</code> attribute that fall outside the destination graphic defined in the <code>in2</code> attribute, are displayed.</td>
</tr>
<tr>
<td><p>atop <img src="operation_atop.png" title="atop operator"></p></td>
<td><p>atop <img src="operation_atop.png" alt="atop operator"></p></td>
<td>The parts of the source graphic defined in the <code>in</code> attribute, which overlap the destination graphic defined in the <code>in2</code> attribute, replace the destination graphic. The parts of the destination graphic that do not overlap with the source graphic stay untouched.</td>
</tr>
<tr>
<td><p>xor <img src="operation_xor.png" title="xor operator"></p></td>
<td><p>xor <img src="operation_xor.png" alt="xor operator"></p></td>
<td>The non-overlapping regions of the source graphic defined in the <code>in</code> attribute and the destination graphic defined in the <code>in2</code> attribute are combined.</td>
</tr>
<tr>
<td><p>lighter <img src="operation_lighter.png" title="lighter operator"> </p></td>
<td><p>lighter <img src="operation_lighter.png" alt="lighter operator"> </p></td>
<td>The sum of the source graphic defined in the <code>in</code> attribute and the destination graphic defined in the <code>in2</code> attribute is displayed.</td>
</tr>
<tr>
<td><p>arithmetic <img src="operation_arithmetic.png" title="arithmetic operator"></p></td>
<td>
<p>The <code>arithmetic</code> operation is useful for combining the output from the {{SVGElement("feDiffuseLighting")}} and {{SVGElement("feSpecularLighting")}} filters with texture data. If the <code>arithmetic</code> operation is chosen, each result pixel is computed using the following formula:</p>
<td><p>arithmetic <img src="operation_arithmetic.png" alt="arithmetic operator"></p></td>
<td>
<p>The <code>arithmetic</code> operation is useful for combining the output from the {{SVGElement("feDiffuseLighting")}} and {{SVGElement("feSpecularLighting")}} filters with texture data. If the <code>arithmetic</code> operation is chosen, each result pixel is computed using the following formula:</p>

<pre class="brush: plain">result = k1*i1*i2 + k2*i1 + k3*i2 + k4</pre>
<pre class="brush: plain">result = k1*i1*i2 + k2*i1 + k3*i2 + k4</pre>

<p>where:</p>
<ul>
<li><code>i1</code> and <code>i2</code> indicate the corresponding pixel channel values of the input image, which map to {{SVGAttr("in")}} and {{SVGAttr("in2")}} respectively</li>
<li>{{SVGAttr("k1")}},{{SVGAttr("k2")}},{{SVGAttr("k3")}},and {{SVGAttr("k4")}} indicate the values of the attributes with the same name.</li>
</ul>
</td>
<p>where:</p>
<ul>
<li><code>i1</code> and <code>i2</code> indicate the corresponding pixel channel values of the input image, which map to {{SVGAttr("in")}} and {{SVGAttr("in2")}} respectively</li>
<li>{{SVGAttr("k1")}}, {{SVGAttr("k2")}}, {{SVGAttr("k3")}}, and {{SVGAttr("k4")}} indicate the values of the attributes with the same name.</li>
</ul>
</td>
</tr>

</table>

<h2 id="Usage_context">Usage context</h2>
Expand All @@ -70,28 +69,26 @@ <h2 id="Attributes">Attributes</h2>
<h3 id="Global_attributes">Global attributes</h3>

<ul>
<li><a href="/en-US/docs/Web/SVG/Attribute#core_attributes">Core attributes</a> »</li>
<li><a href="/en-US/docs/Web/SVG/Attribute#presentation_attributes">Presentation attributes</a> »</li>
<li><a href="/en-US/docs/Web/SVG/Attribute#filter_primitive_attributes">Filter primitive attributes</a> »</li>
<li>{{SVGAttr("class")}}</li>
<li>{{SVGAttr("style")}}</li>
<li><a href="/en-US/docs/Web/SVG/Attribute#core_attributes">Core attributes</a> »</li>
<li><a href="/en-US/docs/Web/SVG/Attribute#presentation_attributes">Presentation attributes</a> »</li>
<li><a href="/en-US/docs/Web/SVG/Attribute#filter_primitive_attributes">Filter primitive attributes</a> »</li>
<li>{{SVGAttr("class")}}</li>
<li>{{SVGAttr("style")}}</li>
</ul>

<h3 id="Specific_attributes">Specific attributes</h3>

<ul>
<li>{{SVGAttr("in")}}: First input for the given filter primitive.</li>
<li>{{SVGAttr("in2")}}: Second input for the given filter primitive (works the same as the <code>in</code> attribute).</li>
<li>{{SVGAttr("operator")}}: <code>over</code> | <code>in</code> | <code>out</code> | <code>atop</code> | <code>xor</code> | <code>lighter</code> | <code>arithmetic</code></li>
<li>{{SVGAttr("k1")}}, {{SVGAttr("k2")}}, {{SVGAttr("k3")}}, {{SVGAttr("k4")}}: Values used for calculating the result pixel in <code>arithmetic</code> {{SVGAttr("operator")}} filter primitives.</li>
<li>{{SVGAttr("in")}}: First input for the given filter primitive.</li>
<li>{{SVGAttr("in2")}}: Second input for the given filter primitive (works the same as the <code>in</code> attribute).</li>
<li>{{SVGAttr("operator")}}: <code>over</code> | <code>in</code> | <code>out</code> | <code>atop</code> | <code>xor</code> | <code>lighter</code> | <code>arithmetic</code></li>
<li>{{SVGAttr("k1")}}, {{SVGAttr("k2")}}, {{SVGAttr("k3")}}, {{SVGAttr("k4")}}: Values used for calculating the result pixel in <code>arithmetic</code> {{SVGAttr("operator")}} filter primitives.</li>
</ul>


<h2 id="DOM_Interface">DOM Interface</h2>

<p>This element implements the {{domxref("SVGFECompositeElement")}} interface.</p>


<h2 id="Example">Example</h2>

<p>This example defines filters for each of the supported operations (<code>over</code>, <code>atop</code>, <code>lighter</code>, etc.), which composite an input <code>SourceGraphic</code> with an image of the MDN logo. The filters are each applied to a circle element, which is then used as the <code>SourceGraphic</code>. The relevant code for just one filter (<code>lighter</code>) is shown below:</p>
Expand All @@ -108,7 +105,7 @@ <h2 id="Example">Example</h2>

<div class="notecard note">
<h4>Note</h4>
<p><code>BackgroundImage</code> cannot be used as a compositing source on modern browsers, so we can't define a filter that composites using whatever pixels happen to be under the filter as one of the sources. The approach above is a <a href="/en-US/docs/Web/SVG/Attribute/in#workaround_for_backgroundimage">Workaround because we can't use <code>BackgroundImage</code></a>.</p>
<p><code>BackgroundImage</code> cannot be used as a compositing source on modern browsers, so we can't define a filter that composites using whatever pixels happen to be under the filter as one of the sources. The approach above is a <a href="/en-US/docs/Web/SVG/Attribute/in#workaround_for_backgroundimage">workaround because we can't use <code>BackgroundImage</code></a>.</p>
</div>

<h3 id="SVG">SVG</h3>
Expand Down Expand Up @@ -177,7 +174,6 @@ <h3 id="SVG">SVG</h3>

<h3 id="Result">Result</h3>


<p>The image below shows the rendered file.</p>

<div>
Expand Down Expand Up @@ -246,25 +242,25 @@ <h3 id="Result">Result</h3>
<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('Filters 1.0', '#feCompositeElement', '&lt;feComposite&gt;')}}</td>
<td>{{Spec2('Filters 1.0')}}</td>
<td>Added <code>lighter</code> value for <code>operator</code> attribute.</td>
</tr>
<tr>
<td>{{SpecName('SVG1.1', 'filters.html#feCompositeElement', '&lt;feComposite&gt;')}}</td>
<td>{{Spec2('SVG1.1')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('Filters 1.0', '#feCompositeElement', '&lt;feComposite&gt;')}}</td>
<td>{{Spec2('Filters 1.0')}}</td>
<td>Added <code>lighter</code> value for <code>operator</code> attribute.</td>
</tr>
<tr>
<td>{{SpecName('SVG1.1', 'filters.html#feCompositeElement', '&lt;feComposite&gt;')}}</td>
<td>{{Spec2('SVG1.1')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>
Expand All @@ -274,23 +270,23 @@ <h2 id="Browser_compatibility">Browser compatibility</h2>
<h2 id="See_also">See also</h2>

<ul>
<li>{{SVGElement("filter")}}</li>
<li>{{SVGElement("animate")}}</li>
<li>{{SVGElement("set")}}</li>
<li>{{SVGElement("feBlend")}}</li>
<li>{{SVGElement("feColorMatrix")}}</li>
<li>{{SVGElement("feComponentTransfer")}}</li>
<li>{{SVGElement("feConvolveMatrix")}}</li>
<li>{{SVGElement("feDiffuseLighting")}}</li>
<li>{{SVGElement("feDisplacementMap")}}</li>
<li>{{SVGElement("feFlood")}}</li>
<li>{{SVGElement("feGaussianBlur")}}</li>
<li>{{SVGElement("feImage")}}</li>
<li>{{SVGElement("feMerge")}}</li>
<li>{{SVGElement("feMorphology")}}</li>
<li>{{SVGElement("feOffset")}}</li>
<li>{{SVGElement("feSpecularLighting")}}</li>
<li>{{SVGElement("feTile")}}</li>
<li>{{SVGElement("feTurbulence")}}</li>
<li><a href="/en-US/docs/Web/SVG/Tutorial/Filter_effects">SVG tutorial: Filter effects</a></li>
<li>{{SVGElement("filter")}}</li>
<li>{{SVGElement("animate")}}</li>
<li>{{SVGElement("set")}}</li>
<li>{{SVGElement("feBlend")}}</li>
<li>{{SVGElement("feColorMatrix")}}</li>
<li>{{SVGElement("feComponentTransfer")}}</li>
<li>{{SVGElement("feConvolveMatrix")}}</li>
<li>{{SVGElement("feDiffuseLighting")}}</li>
<li>{{SVGElement("feDisplacementMap")}}</li>
<li>{{SVGElement("feFlood")}}</li>
<li>{{SVGElement("feGaussianBlur")}}</li>
<li>{{SVGElement("feImage")}}</li>
<li>{{SVGElement("feMerge")}}</li>
<li>{{SVGElement("feMorphology")}}</li>
<li>{{SVGElement("feOffset")}}</li>
<li>{{SVGElement("feSpecularLighting")}}</li>
<li>{{SVGElement("feTile")}}</li>
<li>{{SVGElement("feTurbulence")}}</li>
<li><a href="/en-US/docs/Web/SVG/Tutorial/Filter_effects">SVG tutorial: Filter effects</a></li>
</ul>

0 comments on commit bcfe1c1

Please sign in to comment.