filters/publish/Filters.html@b31bb9367aef
filters/publish/Filters.html
Wed, 07 Sep 2011 10:26:03 +1000
- author
- Dean Jackson <dino@apple.com>
- date
- Wed, 07 Sep 2011 10:26:03 +1000
- changeset 36
- b31bb9367aef
- parent 35
- 31e848f19ceb
- child 40
- 3f1fdd4a8004
- permissions
- -rw-r--r--
- Added opacity function
- Corrected luminanceToAlpha values
1 <!--
2 Filter Effects 1.0
4 $Id$
6 Note: This document is generated from ../master/Filters.html.
7 Run "make" from ../master/ to regenerate it.
8 -->
10 <!DOCTYPE html
11 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
12 <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/><title>Filter Effects 1.0</title><link rel="stylesheet" type="text/css" href="style/svg-style.css"/><link rel="stylesheet" type="text/css" href="style/svg-style-extra.css"/><link rel="stylesheet" href="style/base.css"/><link rel="stylesheet" href="http://www.w3.org/StyleSheets/TR/W3C-ED"/></head><body>
14 <div class="head">
15 <p><a href="http://www.w3.org/"><img height="48" width="72" alt="W3C" src="http://www.w3.org/Icons/w3c_home"/></a></p>
16 <h1 id="pagetitle">Filter Effects 1.0: Language</h1>
17 <h2 id="pagesubtitle">W3C Editor’s Draft <em>07 September 2011</em></h2>
18 <dl><dt>This version:</dt><dd><a href="https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/publish/Filters.html" class="url">https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/publish/Filters.html</a></dd><dt>Latest version:</dt><dd><a href="http://www.w3.org/TR/FilterEffects10/" class="url">http://www.w3.org/TR/FilterEffects10/</a></dd><dt>Previous version:</dt><dd><a href="http://www.w3.org/TR/2007/WD-SVGFilter12-20070501/" class="url">http://www.w3.org/TR/2007/WD-SVGFilter12-20070501/</a></dd><dt>Editors:</dt><dd><a href="mailto:ed@opera.com">Erik Dahlström</a>, (<a href="http://www.opera.com/">Opera Software ASA</a>)</dd><dd><a href="mailto:dino@apple.com">Dean Jackson</a> (<a href="http://www.apple.com/">Apple Inc</a>)</dd><dt>Authors:</dt><dd>The authors of this specification are the participants of the W3C SVG and CSS Working Groups.</dd></dl>
19 <p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2011 <a href="http://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>, <a href="http://www.ercim.org/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.</p>
20 </div>
22 <hr/>
24 <h2 id="abstract">Abstract</h2>
26 <p>
27 Filter effects are a way of processing an element's display before it is
28 displayed in the document. Typically, rendering an element via CSS or SVG
29 can conceptually described as if the element, including its children, are
30 drawn into a buffer (such as a raster image) and then that buffer is
31 composited into the elements parent. Filters apply an effect before the
32 compositing stage. Examples of such effects are blurring, changing color
33 intensity and warping the image.
34 </p>
36 <p>
37 Although originally designed for use in SVG, filter effects simply define
38 a set of operations to apply on an image buffer. In SVG they are triggered
39 by a style instruction (the 'filter property' property), and have very little
40 specific to an SVG environment. This specification describes filters in
41 a manner that allow them to be used in other presentational environments,
42 such as HTML styled by CSS and XSL:FO. It also defines a CSS property
43 value function that allows a filter chain to produce a CSS <image> value.
44 </p>
46 <h2 id="status">Status of This Document</h2>
48 <p><em>This section describes the status of this document at the time of its
49 publication. Other documents may supersede this document. The latest status
50 of this document series is maintained at the W3C. </em> </p>
52 <p>
53 This document is the first public working draft of this specification. There
54 is an accompanying <a href="http://dev.w3.org/SVG/modules/filters/publish/SVGFilterPrimer.html">Filter Effects 1.0, Part 1:
55 Primer</a> that lists the ways SVG filters may be used.
56 </p>
58 <p>
59 This document has been produced by the <a href="http://www.w3.org/Style/CSS">W3C CSS</a> and <a href="http://www.w3.org/Graphics/SVG">SVG</a> Working Groups as part of the
60 <a href="http://www.w3.org/Interaction/">W3C Interaction Domain</a>.
61 </p>
63 <p>
64 The (<a href="http://lists.w3.org/Archives/Public/public-fx/">archived</a>)
65 public mailing list <a href="mailto:www-style@w3.org?Subject=%5Bfilters%5D%20PUT%20SUBJECT%20HERE">
66 public-fx@w3.org</a> (see <a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
67 discussion of this specification. Acceptance of the archiving policy is
68 requested automatically upon first post to the list. When sending e-mail,
69 please put the text “filters” in the subject, preferably like
70 this: “[filters] <em>summary of
71 comment</em>”
72 </p>
74 <p>
75 The latest information regarding <a href="http://www.w3.org/Graphics/SVG/Disclosures">patent disclosures</a>
76 related to this document is available on the Web. As of this publication,
77 the SVG Working Group are not aware of any royalty-bearing patents they
78 believe to be essential to SVG. <span class="note">[@@ Add patent link for CSS WG]</span>
79 </p>
81 <p>
82 Publication of this document does not imply endorsement by the W3C
83 membership. A list of current W3C Recommendations and other technical
84 documents can be found at <a href="http://www.w3.org/TR/">http://www.w3.org/TR/</a>. W3C publications may
85 be updated, replaced, or obsoleted by other documents at any time. It is
86 inappropriate to cite a W3C Working Draft as anything other than a <em>work
87 in progress</em>."
88 </p>
90 <p>
91 The <a href="ChangeLog">list of changes made to this specification</a> is
92 available.
93 </p>
95 <ul class="toc">
96 <li><a href="#introduction">1 Introduction</a></li>
97 <li><a href="#FilterDefinitions">2 Definitions</a></li>
98 <li><a href="#FilterProperty">3 The <span class="prop-name">‘filter’</span>
99 property</a><ul class="toc">
100 <li><a href="#filters-in-css">3.1 How the <a href="#FilterProperty"><span class="prop-name">‘filter’</span></a> property applies to content formatted by CSS (e.g HTML)</a></li></ul></li>
101 <li><a href="#FilterFunction">4 Filter Functions</a></li>
102 <li><a href="#FilterElement">5 The <span class="element-name">‘filter’</span>
103 element</a></li>
104 <li><a href="#FilterEffectsRegion">6 Filter effects region</a></li>
105 <li><a href="#AccessBackgroundImage">7 Accessing the background image</a><ul class="toc">
106 <li><a href="#AccessBackgroundImageSVG">7.1 Accessing the background image in SVG</a></li></ul></li>
107 <li><a href="#FilterPrimitivesOverview">8 Filter primitives overview</a><ul class="toc">
108 <li><a href="#FilterPrimitivesOverviewIntro">8.1 Overview</a></li>
109 <li><a href="#CommonAttributes">8.2 Common attributes</a></li>
110 <li><a href="#FilterPrimitiveSubRegion">8.3 Filter primitive subregion</a></li></ul></li>
111 <li><a href="#LightSourceDefinitions">9 Light source elements and properties</a><ul class="toc">
112 <li><a href="#LightSourceIntro">9.1 Introduction</a></li>
113 <li><a href="#feDistantLightElement">9.2 Light source <span class="element-name">‘feDistantLight’</span></a></li>
114 <li><a href="#fePointLightElement">9.3 Light source <span class="element-name">‘fePointLight’</span></a></li>
115 <li><a href="#feSpotLightElement">9.4 Light source <span class="element-name">‘feSpotLight’</span></a></li>
116 <li><a href="#LightingColorProperty">9.5 The <span class="prop-name">‘lighting-color’</span> property</a></li></ul></li>
117 <li><a href="#feBlendElement">10 Filter primitive <span class="element-name">‘feBlend’</span></a></li>
118 <li><a href="#feColorMatrixElement">11 Filter primitive <span class="element-name">‘feColorMatrix’</span></a></li>
119 <li><a href="#feComponentTransferElement">12 Filter primitive <span class="element-name">‘feComponentTransfer’</span></a></li>
120 <li><a href="#feCompositeElement">13 Filter primitive <span class="element-name">‘feComposite’</span></a></li>
121 <li><a href="#feConvolveMatrixElement">14 Filter primitive <span class="element-name">‘feConvolveMatrix’</span></a></li>
122 <li><a href="#feDiffuseLightingElement">15 Filter primitive <span class="element-name">‘feDiffuseLighting’</span></a></li>
123 <li><a href="#feDisplacementMapElement">16 Filter primitive <span class="element-name">‘feDisplacementMap’</span></a></li>
124 <li><a href="#feFloodElement">17 Filter primitive <span class="element-name">‘feFlood’</span></a></li>
125 <li><a href="#feGaussianBlurElement">18 Filter primitive <span class="element-name">‘feGaussianBlur’</span></a></li>
126 <li><a href="#feUnsharpMaskElement">19 Filter primitive <span class="element-name">‘feUnsharpMask’</span></a></li>
127 <li><a href="#feImageElement">20 Filter primitive <span class="element-name">‘feImage’</span></a></li>
128 <li><a href="#feMergeElement">21 Filter primitive <span class="element-name">‘feMerge’</span></a></li>
129 <li><a href="#feMorphologyElement">22 Filter primitive <span class="element-name">‘feMorphology’</span></a></li>
130 <li><a href="#feOffsetElement">23 Filter primitive <span class="element-name">‘feOffset’</span></a></li>
131 <li><a href="#feSpecularLightingElement">24 Filter primitive <span class="element-name">‘feSpecularLighting’</span></a></li>
132 <li><a href="#feTileElement">25 Filter primitive <span class="element-name">‘feTile’</span></a></li>
133 <li><a href="#feTurbulenceElement">26 Filter primitive <span class="element-name">‘feTurbulence’</span></a></li>
134 <li><a href="#feDropShadowElement">27 Filter primitive <span class="element-name">‘feDropShadow’</span></a></li>
135 <li><a href="#feDiffuseSpecularElement">28 Filter primitive <span class="element-name">‘feDiffuseSpecular’</span></a></li>
136 <li><a href="#feCustomElement">29 Filter primitive <span class="element-name">‘feCustom’</span></a></li>
137 <li><a href="#FilterCSSImageValue">30 The filter CSS <image> value</a></li>
138 <li><a href="#RelaxNG">31 RelaxNG Schema for Filter Effects 1.0</a></li>
139 <li><a href="#ShorthandEquivalents">32 Shorthands defined in terms of the <span class="element-name">‘filter’</span> element</a><ul class="toc">
140 <li><a href="#grayscaleEquivalent">32.1 grayscale</a></li>
141 <li><a href="#sepiaEquivalent">32.2 sepia</a></li>
142 <li><a href="#saturateEquivalent">32.3 saturate</a></li>
143 <li><a href="#huerotateEquivalent">32.4 hue-rotate</a></li>
144 <li><a href="#invertEquivalent">32.5 invert</a></li>
145 <li><a href="#opacityEquivalent">32.6 opacity</a></li>
146 <li><a href="#gammaEquivalent">32.7 gamma</a></li>
147 <li><a href="#blurEquivalent">32.8 blur</a></li>
148 <li><a href="#sharpenEquivalent">32.9 sharpen</a></li>
149 <li><a href="#dropshadowEquivalent">32.10 drop-shadow</a></li></ul></li>
150 <li><a href="#DOMInterfaces">33 DOM interfaces</a><ul class="toc">
151 <li><a href="#InterfaceImageData">33.1 Interface ImageData</a></li>
152 <li><a href="#InterfaceSVGFilterElement">33.2 Interface SVGFilterElement</a></li>
153 <li><a href="#InterfaceSVGFilterPrimitiveStandardAttributes">33.3 Interface SVGFilterPrimitiveStandardAttributes</a></li>
154 <li><a href="#InterfaceSVGFEBlendElement">33.4 Interface SVGFEBlendElement</a></li>
155 <li><a href="#InterfaceSVGFEColorMatrixElement">33.5 Interface SVGFEColorMatrixElement</a></li>
156 <li><a href="#InterfaceSVGFEComponentTransferElement">33.6 Interface SVGFEComponentTransferElement</a></li>
157 <li><a href="#InterfaceSVGComponentTransferFunctionElement">33.7 Interface SVGComponentTransferFunctionElement</a></li>
158 <li><a href="#InterfaceSVGFEFuncRElement">33.8 Interface SVGFEFuncRElement</a></li>
159 <li><a href="#InterfaceSVGFEFuncGElement">33.9 Interface SVGFEFuncGElement</a></li>
160 <li><a href="#InterfaceSVGFEFuncBElement">33.10 Interface SVGFEFuncBElement</a></li>
161 <li><a href="#InterfaceSVGFEFuncAElement">33.11 Interface SVGFEFuncAElement</a></li>
162 <li><a href="#InterfaceSVGFECompositeElement">33.12 Interface SVGFECompositeElement</a></li>
163 <li><a href="#InterfaceSVGFEConvolveMatrixElement">33.13 Interface SVGFEConvolveMatrixElement</a></li>
164 <li><a href="#InterfaceSVGFEDiffuseLightingElement">33.14 Interface SVGFEDiffuseLightingElement</a></li>
165 <li><a href="#InterfaceSVGFEDistantLightElement">33.15 Interface SVGFEDistantLightElement</a></li>
166 <li><a href="#InterfaceSVGFEPointLightElement">33.16 Interface SVGFEPointLightElement</a></li>
167 <li><a href="#InterfaceSVGFESpotLightElement">33.17 Interface SVGFESpotLightElement</a></li>
168 <li><a href="#InterfaceSVGFEDisplacementMapElement">33.18 Interface SVGFEDisplacementMapElement</a></li>
169 <li><a href="#InterfaceSVGFEFloodElement">33.19 Interface SVGFEFloodElement</a></li>
170 <li><a href="#InterfaceSVGFEGaussianBlurElement">33.20 Interface SVGFEGaussianBlurElement</a></li>
171 <li><a href="#InterfaceSVGFEImageElement">33.21 Interface SVGFEImageElement</a></li>
172 <li><a href="#InterfaceSVGFEMergeElement">33.22 Interface SVGFEMergeElement</a></li>
173 <li><a href="#InterfaceSVGFEMergeNodeElement">33.23 Interface SVGFEMergeNodeElement</a></li>
174 <li><a href="#InterfaceSVGFEMorphologyElement">33.24 Interface SVGFEMorphologyElement</a></li>
175 <li><a href="#InterfaceSVGFEOffsetElement">33.25 Interface SVGFEOffsetElement</a></li>
176 <li><a href="#InterfaceSVGFESpecularLightingElement">33.26 Interface SVGFESpecularLightingElement</a></li>
177 <li><a href="#InterfaceSVGFETileElement">33.27 Interface SVGFETileElement</a></li>
178 <li><a href="#InterfaceSVGFETurbulenceElement">33.28 Interface SVGFETurbulenceElement</a></li>
179 <li><a href="#InterfaceSVGFEDropShadowElement">33.29 Interface SVGFEDropShadowElement</a></li></ul></li>
180 <li><a href="#references1">34 References</a><ul class="toc">
181 <li><a href="#normref">34.1 Normative References</a></li>
182 <li><a href="#informref">34.2 Informative References</a></li></ul></li>
183 <li><a href="#changes">35 Changes</a></li></ul>
185 <h2 id="introduction">1 Introduction</h2>
187 <p>
188 This chapter describes a declarative filter effects feature set, which when
189 combined with the other web technologies, such as SVG or HTML, can describe
190 much of the common artwork on the Web in such a way that client-side
191 generation and alteration can be performed easily. In addition, the ability
192 to apply filter effects to elements helps to maintain the semantic
193 structure of the document, instead of resorting to images which aside from
194 generally being a fixed resolution tend to obscure the original semantics of
195 the elements they replace. This is especially true for effects applied to
196 text.
197 </p>
199 <p>
201 </p>
203 <p>
204 Note that even though this specification references parts of <a href="#ref-svg11">SVG 1.1</a> it does not require an SVG 1.1
205 implementation. <span class="note">Add link to conformance classes
206 here.</span>
207 </p>
209 <p>This document is normative.</p>
211 <p>This document contains explicit conformance criteria that overlap with
212 some RelaxNG definitions in requirements. If there is any conflict between the
213 two, the explicit conformance criteria are the definitive reference. </p>
215 <p>A filter effect consists of a series of graphics operations that are
216 applied to a given <span id="TermSourceGraphic" class="SVG-Term">source graphic</span> to produce a modified graphical
217 result. The result of the filter effect is rendered to the target device
218 instead of the original source graphic. The following illustrates the
219 process:</p>
221 <p><object data="examples/filters00.svg" type="image/svg+xml" height="78" width="400">
222 <img alt="Image showing source graphic transformed by filter effect" src="examples/filters00.png" width="401" height="78"/>
223 </object></p>
224 <p class="view-as-svg"><a href="examples/filters00.svg">View this example as
225 SVG (SVG-enabled browsers only)</a><br/>
226 </p>
228 <h2 id="FilterDefinitions">2 Definitions</h2>
229 <p>When used in this specification, terms have the meanings assigned in this section.</p>
230 <dl><dt id="TermNullFilter"><span class="SVG-TermDefine">null filter</span></dt><dd>
231 <p>
232 The null filter output is all transparent black pixels. If applied to an element it means
233 that the element (and children if any) becomes invisible. Note that it does not affect event processing.
234 </p>
235 </dd><dt id="TermTransferFunctionElements"><span class="SVG-TermDefine">transfer function elements</span></dt><dd>
236 <p>
237 The set of elements,
238 <a href=""><span class="element-name">‘feFuncR’</span></a>, <a href=""><span class="element-name">‘feFuncG’</span></a>, <a href=""><span class="element-name">‘feFuncB’</span></a>, <a href=""><span class="element-name">‘feFuncA’</span></a>, that define the transfer function for the <a href="#feComponentTransferElement"><span class="element-name">‘feComponentTransfer’</span></a> filter primitive.
239 </p>
240 </dd><dt id="TermClientBoundingRect"><span class="SVG-TermDefine">bounding client rect</span></dt><dd>
241 <p>
242 The union of all CSS border-boxes for the element if formatted by CSS, as defined by the CSS OM method
243 <a href="http://www.w3.org/TR/cssom-view/#dom-element-getboundingclientrect">getBoundingClientRect</a> [<a href="#ref-CSSOM">CSSOM</a>].
244 </p>
245 </dd><dt id="TermCSSBoundingBox"><span class="SVG-TermDefine">CSS bounding box</span></dt><dd>
246 <p>
247 The union of all CSS border-boxes for the element and all it's descendant elements, provided the element is formatted by CSS. [<a href="#ref-CSS21">CSS</a>].
248 </p>
249 </dd><dt id="TermCurrentUserCoordinateSystem"><span class="SVG-TermDefine">current user coordinate system</span></dt><dd>
250 <p>
251 For elements formatted by CSS: the current user coordinate system has its origin at the top-left corner of the
252 <a href="#TermClientBoundingRect">bounding client rect</a> and one unit equals on CSS px. The viewport for resolving percentage values is defined by the width and height of the
253 <a href="#TermClientBoundingRect">bounding client rect</a>.
254 </p>
255 <p>
256 For SVG elements see <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermUserCoordinateSystem"><span class="svg-term">user coordinate system</span></a>.
257 </p>
258 </dd><dt id="TermObjectBoundingBoxUnits"><span class="SVG-TermDefine">object bounding box units</span></dt><dd>
259 For elements formatted by CSS: the bounding box is defined by <a href="#TermCSSBoundingBox">the CSS bounding box.</a>
260 <p>
261 For SVG elements the bounding box is defined by <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermBoundingBox">the SVG bounding box</a>.
262 </p>
263 <p>
264 For both cases the bounding box defines the coordinate system in which to resolve values, as defined in <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/coords.html#ObjectBoundingBoxUnits"><span class="svg-term">object bounding box units</span></a>.
265 </p>
266 </dd><dt id="TermFilterPrimitiveReference"><span class="SVG-TermDefine"><filter-primitive-reference></span></dt><dd>
267 <p>
268 A string that identifies a particular filter primitive's output.
269 </p>
270 </dd><dt id="TermFilterPrimitiveElements"><span class="SVG-TermDefine">filter primitives, filter primitive elements</span></dt><dd>
271 <p>
272 The set of elements that control the output of a <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element, particularly:
273 <a href="#feDistantLightElement"><span class="element-name">‘feDistantLight’</span></a>,
274 <a href="#fePointLightElement"><span class="element-name">‘fePointLight’</span></a>,
275 <a href="#feSpotLightElement"><span class="element-name">‘feSpotLight’</span></a>,
276 <a href="#feBlendElement"><span class="element-name">‘feBlend’</span></a>,
277 <a href="#feColorMatrixElement"><span class="element-name">‘feColorMatrix’</span></a>,
278 <a href="#feComponentTransferElement"><span class="element-name">‘feComponentTransfer’</span></a>,
279 <a href="#feCompositeElement"><span class="element-name">‘feComposite’</span></a>,
280 <a href="#feConvolveMatrixElement"><span class="element-name">‘feConvolveMatrix’</span></a>,
281 <a href="#feDiffuseLightingElement"><span class="element-name">‘feDiffuseLighting’</span></a>,
282 <a href="#feDisplacementMapElement"><span class="element-name">‘feDisplacementMap’</span></a>,
283 <a href="#feFloodElement"><span class="element-name">‘feFlood’</span></a>,
284 <a href="#feGaussianBlurElement"><span class="element-name">‘feGaussianBlur’</span></a>,
285 <a href="#feImageElement"><span class="element-name">‘feImage’</span></a>,
286 <a href="#feMergeElement"><span class="element-name">‘feMerge’</span></a>,
287 <a href="#feMorphologyElement"><span class="element-name">‘feMorphology’</span></a>,
288 <a href="#feOffsetElement"><span class="element-name">‘feOffset’</span></a>,
289 <a href="#feSpecularLightingElement"><span class="element-name">‘feSpecularLighting’</span></a>,
290 <a href="#feTileElement"><span class="element-name">‘feTile’</span></a>,
291 <a href="#feTurbulenceElement"><span class="element-name">‘feTurbulence’</span></a>,
292 <a href="#feDropShadowElement"><span class="element-name">‘feDropShadow’</span></a>,
293 <a href="#feDiffuseSpecular"><span class="element-name">‘feDiffuseSpecular’</span></a>,
294 <a href="#feUnsharpMaskElement"><span class="element-name">‘feUnsharpMask’</span></a>,
295 <a href="#feCustom"><span class="element-name">‘feCustom’</span></a>.
296 </p>
297 </dd></dl>
298 <br/>
300 <h2 id="FilterProperty">3 The <span class="prop-name">‘filter’</span>
301 property</h2>
303 <p>The description of the <span class="prop-name">‘filter’</span> property is
304 as follows:</p>
306 <div class="propdef">
307 <dl><dt id="propdef-filter"><span class="propdef-title prop-name">‘filter’</span></dt><dd>
308 <table summary="filter property" class="propinfo" cellspacing="0" cellpadding="0"><tbody><tr valign="baseline"><td><em>Value:</em> </td><td>none | <a href="#FilterFunction"><filter-function></a> [ <a href="#FilterFunction"><filter-function></a> ]* </td></tr><tr valign="baseline"><td><em>Initial:</em> </td><td>none</td></tr><tr valign="baseline"><td><em>Applies to:</em> </td><td>All elements</td></tr><tr valign="baseline"><td><em>Inherited:</em> </td><td>no</td></tr><tr valign="baseline"><td><em>Percentages:</em> </td><td>N/A</td></tr><tr valign="baseline"><td><em>Media:</em> </td><td>visual</td></tr><tr valign="baseline"><td><em>Animatable:</em> </td><td>yes</td></tr></tbody></table>
309 </dd></dl>
310 </div>
312 <p>
313 If the value of the <a href="#FilterProperty"><span class="prop-name">‘filter’</span></a> property is <span class="prop-value">none</span> then there
314 is no filter effect applied. Otherwise, the list of functions (described <a href="#FilterFunction">below</a>)
315 are applied in order.
316 </p>
318 <h3 id="filters-in-css">3.1 How the <a href="#FilterProperty"><span class="prop-name">‘filter’</span></a> property applies to content formatted by CSS (e.g HTML)</h3>
319 <p>
320 The application of the <a href="#FilterProperty"><span class="prop-name">‘filter’</span></a> property to an element
321 formatted by CSS establishes a pseudo-stacking-context the same way that CSS
322 <a href="http://www.w3.org/TR/css3-color/#transparency">'opacity'</a> does,
323 and all the element's boxes are rendered together as a group with the filter
324 effect applied to the group as a whole.
325 </p>
326 <p>
327 The <a href="#FilterProperty"><span class="prop-name">‘filter’</span></a> property has no effect on the geometry of the
328 target element's CSS boxes, even though <a href="#FilterProperty"><span class="prop-name">‘filter’</span></a> can cause
329 painting outside of an element's border-box.
330 </p>
331 <p>
332 The compositing model follows the <a href="http://www.w3.org/TR/SVG11/render.html#Introduction">SVG compositing
333 model</a>: first any filter effect is applied, then any clipping, masking
334 and opacity. These effects all apply after any other CSS effects such as
335 'border'. As per SVG, the application of <a href="#FilterProperty"><span class="prop-name">‘filter’</span></a> has no
336 effect on hit-testing.
337 </p>
339 <br/>
341 <h2 id="FilterFunction">4 Filter Functions</h2>
343 <p>
344 The value of the <a href="#FilterProperty"><span class="prop-name">‘filter’</span></a> property is a list of <filter-functions>
345 applied in the order provided. The individual filter functions are
346 separated by whitespace. The set of allowed filter functions is given
347 below.
348 </p>
350 <dl><dt>
351 <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeFuncIRI"><FuncIRI></a>
352 </dt><dd>
353 An <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermIRIReference"><span class="svg-term">IRI reference</span></a>
354 to a <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element that defines the
355 filter effect. For example "url(commonfilters.xml#large-blur)". If the IRI references a non-existent object or the referenced
356 object is not a <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element, then the <a href="#TermNullFilter"><span class="svg-term">null filter</span></a> will be applied instead.
357 </dd><dt>
358 grayscale(amount)
359 </dt><dd>
360 Converts the input image to grayscale. The value of 'amount' defines the proportion
361 of the conversion. A value of 1 is completely grayscale. A value of 0 leaves the
362 input unchanged. Values between 0 and 1 are linear multipliers on the effect.
363 If the 'amount' parameter is missing, a value of 1 is used.
364 The markup equivalent of this function is <a href="#grayscaleEquivalent">given below</a>.
365 </dd><dt>
366 sepia(amount)
367 </dt><dd>
368 Converts the input image to sepia. The value of 'amount' defines the proportion
369 of the conversion. A value of 1 is completely sepia. A value of 0 leaves the
370 input unchanged. Values between 0 and 1 are linear multipliers on the effect.
371 If the 'amount' parameter is missing, a value of 1 is used.
372 The markup equivalent of this function is <a href="#sepiaEquivalent">given below</a>.
373 </dd><dt>
374 saturate(amount)
375 </dt><dd>
376 Saturates the input image. The value of 'amount' defines the proportion
377 of the conversion. A value of 1 is completely saturated. A value of 0 leaves the
378 input unchanged. Values between 0 and 1 are linear multipliers on the effect.
379 If the 'amount' parameter is missing, a value of 1 is used.
380 The markup equivalent of this function is <a href="#saturateEquivalent">given below</a>.
381 </dd><dt>
382 hue-rotate(angle)
383 </dt><dd>
384 Applies a hue rotation on the input image. The value of 'angle' defines the
385 number of degrees around the color circle the input samples will be adjusted.
386 A value of 0 leaves the input unchanged. If the 'angle' parameter is missing,
387 a value of 0 is used.
388 The markup equivalent of this function is <a href="#huerotateEquivalent">given below</a>.
389 </dd><dt>
390 invert(amount)
391 </dt><dd>
392 Inverts the samples in the input image. The value of 'amount' defines the proportion
393 of the conversion. A value of 1 is completely inverted. A value of 0 leaves the
394 input unchanged. Values between 0 and 1 are linear multipliers on the effect.
395 If the 'amount' parameter is missing, a value of 1 is used.
396 The markup equivalent of this function is <a href="#invertEquivalent">given below</a>.
397 </dd><dt>
398 opacity(amount)
399 </dt><dd>
400 Applies transparency to the samples in the input image. The value of 'amount' defines the proportion
401 of the conversion. A value of 1 is completely transparent. A value of 0 leaves the
402 input unchanged. Values between 0 and 1 are linear multipliers on the effect.
403 This is equivalent to multiplying the input image samples by (1 - amount).
404 If the 'amount' parameter is missing, a value of 1 is used.
405 The markup equivalent of this function is <a href="#opacityEquivalent">given below</a>.
406 </dd><dt>
407 gamma(amplitude exponent offset)
408 </dt><dd>
409 Applies a gamma function to the input image.
410 The value of 'amplitude' defines the multiplier to the gamma function.
411 The value of 'exponent' defines the exponent of the gamma function.
412 The value of 'offset' defines the offset of the gamma function.
413 If any of the parameters are missing, the default value for 'amplitude'
414 is 1, for 'exponent' is 1, and for 'offset' is 0.
415 The markup equivalent of this function is <a href="#gammaEquivalent">given below</a>.
416 </dd><dt>
417 blur(radiusX radiusY)
418 </dt><dd>
419 Applies a Gaussian blur to the input image.
420 The value of 'radiusX' defines the X value of the standard deviation to the Gaussian function.
421 The value of 'radiusY' defines the Y value of the standard deviation to the Gaussian function.
422 If one parameter is provided, then that value is used for both 'radiusX' and 'radiusY'.
423 If no parameters are provided, then the value for both attributes is 0.
424 The markup equivalent of this function is <a href="#blurEquivalent">given below</a>.
425 </dd><dt>
426 sharpen(amount radius threshold)
427 </dt><dd>
428 Applies an sharpening effect to the input image. This is equivalent to subtracting the
429 input samples from a blurred version of the image.
430 The value of 'amount' defines the proportion of the effect (as a multiplier on the
431 subtraction). A value of 1 applies the effect completely. A value of 0 leaves the
432 input unchanged.
433 The value of 'radius' defines the value of the standard deviation to the Gaussian function.
434 The value of 'threshold' defines a point at which the function will not be applied.
435 If the 'threshold' parameter is not provided, then its value is 1. If the 'radius' parameter
436 is not provided, then its value is 0. If no parameters are provided, then the value for 'amount' is 0.
437 The markup equivalent of this function is <a href="#sharpenEquivalent">given below</a>.
438 </dd><dt>
439 drop-shadow(<shadow>)
440 </dt><dd>
441 Applies a drop shadow effect to the input image. A drop shadow is
442 effectively a blurred, offset version of the input image's alpha mask
443 drawn in a particular color, composited below the image. The function
444 accepts a parameter of type <shadow> (defined in CSS3 Backgrounds),
445 with the exception that the 'inset' keyword is not allowed. The markup
446 equivalent of this function is <a href="#dropshadowEquivalent">given
447 below</a>.
448 </dd></dl>
450 <div class="note">
451 <p>
452 The above list is a collection of effects that can be easily defined in
453 terms of SVG filters. However, there are many more interesting effects
454 that can be considered for inclusion. If accepted, there will have to
455 be equivalent XML elements for the effect. Effects considered include:
456 </p>
457 <ul><li>brightness, contrast, exposure</li><li>halftone</li><li>motion-blur(radius, angle)</li><li>posterize(levels)</li><li>bump(x, y, radius, intensity)</li><li>generators</li><li>circle-crop(x, y, radius)</li><li>affine-transform(some matrix)</li><li>crop(x, y, w, h)</li><li>bloom(radius, intensity)</li><li>gloom(radius, intensity)</li><li>mosaic(w,h)</li><li>displace(url, intensity)</li><li>edge-detect(intensity)</li><li>pinch(x, y, radius, scale)</li><li>twirl(x, y, radius, angle)</li></ul>
458 </div>
460 <p>
461 The first function in the list takes the element (<a href="#SourceGraphic">SourceGraphic</a>) as
462 the input image. Subsequent operations take the output from the
463 previous function as the input image. The exception is the function
464 that references a 'filter element' element, which can specify an
465 alternate input, but still uses the previous output as its
466 <a href="#SourceGraphic">SourceGraphic</a>.
467 </p>
469 <h2 id="FilterElement">5 The <span class="element-name">‘filter’</span>
470 element</h2>
472 <div class="element-summary"><div class="element-summary-name"><span class="element-name">‘filter’</span></div><dl><dt>Categories:</dt><dd>None</dd><dt>Content model:</dt><dd>Any number of the following elements, in any order:
473 <ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermDescriptiveElement">descriptive elements</a><span class="expanding"> — <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/struct.html#DescElement"><span class="element-name">‘desc’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/metadata.html#MetadataElement"><span class="element-name">‘metadata’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/struct.html#TitleElement"><span class="element-name">‘title’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermFilterPrimitiveElement">filter primitive elements</a><span class="expanding"> — <a href="#feBlendElement"><span class="element-name">‘feBlend’</span></a>, <a href="#feColorMatrixElement"><span class="element-name">‘feColorMatrix’</span></a>, <a href="#feComponentTransferElement"><span class="element-name">‘feComponentTransfer’</span></a>, <a href="#feCompositeElement"><span class="element-name">‘feComposite’</span></a>, <a href="#feConvolveMatrixElement"><span class="element-name">‘feConvolveMatrix’</span></a>, <a href="#feDiffuseLightingElement"><span class="element-name">‘feDiffuseLighting’</span></a>, <a href="#feDisplacementMapElement"><span class="element-name">‘feDisplacementMap’</span></a>, <a href="#feFloodElement"><span class="element-name">‘feFlood’</span></a>, <a href="#feGaussianBlurElement"><span class="element-name">‘feGaussianBlur’</span></a>, <a href="#feImageElement"><span class="element-name">‘feImage’</span></a>, <a href="#feMergeElement"><span class="element-name">‘feMerge’</span></a>, <a href="#feMorphologyElement"><span class="element-name">‘feMorphology’</span></a>, <a href="#feOffsetElement"><span class="element-name">‘feOffset’</span></a>, <a href="#feSpecularLightingElement"><span class="element-name">‘feSpecularLighting’</span></a>, <a href="#feTileElement"><span class="element-name">‘feTile’</span></a>, <a href="#feTurbulenceElement"><span class="element-name">‘feTurbulence’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#AnimateElement"><span class="element-name">‘animate’</span></a></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#SetElement"><span class="element-name">‘set’</span></a></li></ul></dd><dt>Attributes:</dt><dd><ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermCoreAttributes">core attributes</a><span class="expanding"> — <a href="struct.html#IDAttribute"><span class="attr-name">‘id’</span></a>, <a href="struct.html#XMLBaseAttribute"><span class="attr-name">‘xml:base’</span></a>, <a href="struct.html#XMLLangAttribute"><span class="attr-name">‘xml:lang’</span></a>, <a href="struct.html#XMLSpaceAttribute"><span class="attr-name">‘xml:space’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermPresentationAttribute">presentation attributes</a><span class="expanding"> — <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#AlignmentBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘alignment-baseline’">‘alignment-baseline’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#BaselineShiftProperty"><span class="attr-name" title="Presentation attribute for property ‘baseline-shift’">‘baseline-shift’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipProperty"><span class="attr-name" title="Presentation attribute for property ‘clip’">‘clip’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipPathProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-path’">‘clip-path’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-rule’">‘clip-rule’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProperty"><span class="attr-name" title="Presentation attribute for property ‘color’">‘color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation’">‘color-interpolation’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationFiltersProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation-filters’">‘color-interpolation-filters’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProfileProperty"><span class="attr-name" title="Presentation attribute for property ‘color-profile’">‘color-profile’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘color-rendering’">‘color-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#CursorProperty"><span class="attr-name" title="Presentation attribute for property ‘cursor’">‘cursor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DirectionProperty"><span class="attr-name" title="Presentation attribute for property ‘direction’">‘direction’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#DisplayProperty"><span class="attr-name" title="Presentation attribute for property ‘display’">‘display’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DominantBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘dominant-baseline’">‘dominant-baseline’</span></a>, <a href="#EnableBackgroundProperty"><span class="attr-name" title="Presentation attribute for property ‘enable-background’">‘enable-background’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillProperty"><span class="attr-name" title="Presentation attribute for property ‘fill’">‘fill’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-opacity’">‘fill-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-rule’">‘fill-rule’</span></a>, <a href="#FilterProperty"><span class="attr-name" title="Presentation attribute for property ‘filter’">‘filter’</span></a>, <a href="#FloodColorProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-color’">‘flood-color’</span></a>, <a href="#FloodOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-opacity’">‘flood-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontFamilyProperty"><span class="attr-name" title="Presentation attribute for property ‘font-family’">‘font-family’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size’">‘font-size’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeAdjustProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size-adjust’">‘font-size-adjust’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStretchProperty"><span class="attr-name" title="Presentation attribute for property ‘font-stretch’">‘font-stretch’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStyleProperty"><span class="attr-name" title="Presentation attribute for property ‘font-style’">‘font-style’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontVariantProperty"><span class="attr-name" title="Presentation attribute for property ‘font-variant’">‘font-variant’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontWeightProperty"><span class="attr-name" title="Presentation attribute for property ‘font-weight’">‘font-weight’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationHorizontalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-horizontal’">‘glyph-orientation-horizontal’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationVerticalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-vertical’">‘glyph-orientation-vertical’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ImageRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘image-rendering’">‘image-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#KerningProperty"><span class="attr-name" title="Presentation attribute for property ‘kerning’">‘kerning’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#LetterSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘letter-spacing’">‘letter-spacing’</span></a>, <a href="#LightingColorProperty"><span class="attr-name" title="Presentation attribute for property ‘lighting-color’">‘lighting-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerEndProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-end’">‘marker-end’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerMidProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-mid’">‘marker-mid’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerStartProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-start’">‘marker-start’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#MaskProperty"><span class="attr-name" title="Presentation attribute for property ‘mask’">‘mask’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘opacity’">‘opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OverflowProperty"><span class="attr-name" title="Presentation attribute for property ‘overflow’">‘overflow’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#PointerEventsProperty"><span class="attr-name" title="Presentation attribute for property ‘pointer-events’">‘pointer-events’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ShapeRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘shape-rendering’">‘shape-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopColorProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-color’">‘stop-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-opacity’">‘stop-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke’">‘stroke’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDasharrayProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dasharray’">‘stroke-dasharray’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDashoffsetProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dashoffset’">‘stroke-dashoffset’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinecapProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linecap’">‘stroke-linecap’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinejoinProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linejoin’">‘stroke-linejoin’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeMiterlimitProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-miterlimit’">‘stroke-miterlimit’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-opacity’">‘stroke-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeWidthProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-width’">‘stroke-width’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextAnchorProperty"><span class="attr-name" title="Presentation attribute for property ‘text-anchor’">‘text-anchor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextDecorationProperty"><span class="attr-name" title="Presentation attribute for property ‘text-decoration’">‘text-decoration’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#TextRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘text-rendering’">‘text-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#UnicodeBidiProperty"><span class="attr-name" title="Presentation attribute for property ‘unicode-bidi’">‘unicode-bidi’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#VisibilityProperty"><span class="attr-name" title="Presentation attribute for property ‘visibility’">‘visibility’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WordSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘word-spacing’">‘word-spacing’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WritingModeProperty"><span class="attr-name" title="Presentation attribute for property ‘writing-mode’">‘writing-mode’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermXLinkAttributes">xlink attributes</a><span class="expanding"> — <a href="#FilterElementHrefAttribute"><span class="attr-name">‘xlink:href’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/linking.html#XLinkShowAttribute"><span class="attr-name">‘xlink:show’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/linking.html#XLinkActuateAttribute"><span class="attr-name">‘xlink:actuate’</span></a>, <a href="linking.html#XLinkTypeAttribute"><span class="attr-name">‘xlink:type’</span></a>, <a href="linking.html#XLinkRoleAttribute"><span class="attr-name">‘xlink:role’</span></a>, <a href="linking.html#XLinkArcRoleAttribute"><span class="attr-name">‘xlink:arcrole’</span></a>, <a href="linking.html#XLinkTitleAttribute"><span class="attr-name">‘xlink:title’</span></a></span></li><li><a href="styling.html#ClassAttribute"><span class="attr-name">‘class’</span></a></li><li><a href="styling.html#StyleAttribute"><span class="attr-name">‘style’</span></a></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/struct.html#ExternalResourcesRequiredAttribute"><span class="attr-name">‘externalResourcesRequired’</span></a></li><li><a href="#FilterElementXAttribute"><span class="attr-name">‘x’</span></a></li><li><a href="#FilterElementYAttribute"><span class="attr-name">‘y’</span></a></li><li><a href="#FilterElementWidthAttribute"><span class="attr-name">‘width’</span></a></li><li><a href="#FilterElementHeightAttribute"><span class="attr-name">‘height’</span></a></li><li><a href="#FilterElementFilterResAttribute"><span class="attr-name">‘filterRes’</span></a></li><li><a href="#FilterElementFilterUnitsAttribute"><span class="attr-name">‘filterUnits’</span></a></li><li><a href="#FilterElementPrimitiveUnitsAttribute"><span class="attr-name">‘primitiveUnits’</span></a></li><li><a href="#FilterElementHrefAttribute"><span class="attr-name">‘xlink:href’</span></a></li></ul></dd><dt>DOM Interfaces:</dt><dd><ul class="no-bullets"><li><a class="idlinterface" href="#InterfaceSVGFilterElement">SVGFilterElement</a></li></ul></dd></dl></div>
477 <p>The description of the <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element
478 follows:</p>
480 <div class="adef-list">
481 <p><em>Attribute definitions:</em></p>
482 <dl><dt id="FilterElementFilterUnitsAttribute"><span class="adef">filterUnits</span> = "<em>userSpaceOnUse</em> |
483 <em>objectBoundingBox</em>"</dt><dd>See <a href="#FilterEffectsRegion"><span class="svg-term">filter effects region</span></a>.</dd><dt id="FilterElementPrimitiveUnitsAttribute"><span class="adef">primitiveUnits</span> = "<em>userSpaceOnUse</em> |
484 <em>objectBoundingBox</em>"</dt><dd>Specifies the coordinate system for the various length values within
485 the <a href="#TermFilterPrimitiveElements"><span class="svg-term">filter primitives</span></a> and for the attributes that define the <a href="#FilterPrimitiveSubRegion"><span class="svg-term">filter primitive subregion</span></a>.<br/>
486 If <span class="attr-value">primitiveUnits="userSpaceOnUse"</span>, any length values
487 within the filter definitions represent values in the <a href="#TermCurrentUserCoordinateSystem">current user
488 coordinate system</a> in place at the time when the <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
489 element is referenced (i.e., the user coordinate system for the element
490 referencing the <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element via a <a href="#FilterProperty"><span class="prop-name">‘filter’</span></a>
491 property).<br/>
492 If <span class="attr-value">primitiveUnits="objectBoundingBox"</span>, then any length
493 values within the filter definitions represent fractions or percentages
494 of the bounding box on the referencing element (see <a href="#TermObjectBoundingBoxUnits">object bounding box
495 units</a>). Note that if only one number was specified in a <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumberOptionalNumber"><number-optional-number></a> value
496 this number is expanded out before the <a href="#FilterElementPrimitiveUnitsAttribute"><span class="attr-name">‘primitiveUnits’</span></a> computation takes place.
497 <br/>
498 The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#FilterElementPrimitiveUnitsAttribute"><span class="attr-name">‘primitiveUnits’</span></a> is <span class="attr-value">userSpaceOnUse</span>.<br/>
499 <span class="anim-target">Animatable: yes.</span></dd><dt id="FilterElementXAttribute">
500 <span class="adef">x</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeCoordinate"><coordinate></a></em>"</dt><dd>See <a href="#FilterEffectsRegion"><span class="svg-term">filter effects region</span></a>.</dd><dt id="FilterElementYAttribute">
501 <span class="adef">y</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeCoordinate"><coordinate></a></em>"</dt><dd>See <a href="#FilterEffectsRegion"><span class="svg-term">filter effects region</span></a>.</dd><dt id="FilterElementWidthAttribute"><span class="adef">width</span> =
502 "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeLength"><length></a></em>"</dt><dd>See <a href="#FilterEffectsRegion"><span class="svg-term">filter effects region</span></a>.</dd><dt id="FilterElementHeightAttribute"><span class="adef">height</span> =
503 "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeLength"><length></a></em>"</dt><dd>See <a href="#FilterEffectsRegion"><span class="svg-term">filter effects region</span></a>.</dd><dt id="FilterElementFilterResAttribute"><span class="adef">filterRes</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumberOptionalNumber"><number-optional-number></a></em>"
504 </dt><dd>See <a href="#FilterEffectsRegion"><span class="svg-term">filter effects region</span></a>.</dd><dt id="FilterElementHrefAttribute"><span class="adef">xlink:href</span>
505 = "<span class="attr-value"><IRI></span>"</dt><dd>An <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermIRIReference"><span class="svg-term">IRI reference</span></a>
506 to another <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element within
507 the current <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermSVGDocumentFragment"><span class="svg-term">SVG document fragment</span></a>. Any attributes which are defined on
508 the referenced <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element which
509 are not defined on this element are inherited by this element. If this
510 element has no defined filter nodes, and the referenced element has
511 defined filter nodes (possibly due to its own <span class="attr-name">href</span> attribute), then this element inherits
512 the filter nodes defined from the referenced <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element. Inheritance can be
513 indirect to an arbitrary level; thus, if the referenced <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element inherits attributes or its
514 filter node specification due to its own <span class="attr-name">href</span> attribute, then the current element can
515 inherit those attributes or filter node specifications.
517 <div class="note">
518 This attribute is deprecated and should not be used, it's included for
519 backwards compatibility reasons only.</div>
520 <br/>
521 <span class="anim-target">Animatable: yes.</span></dd></dl>
522 </div>
524 <p>Properties inherit into the <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
525 element from its ancestors; properties do <em>not</em> inherit from the
526 element referencing the <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
527 element.</p>
529 <p><a href="#FilterElement"><span class="element-name">‘filter’</span></a> elements are never rendered
530 directly; their only usage is as something that can be referenced using the
531 <a href="#FilterProperty"><span class="prop-name">‘filter’</span></a>
532 property. The <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#DisplayProperty"><span class="prop-name">‘display’</span></a> property does not
533 apply to the <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element; thus, <a href="#FilterElement"><span class="element-name">‘filter’</span></a> elements are not directly rendered even
534 if the <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#DisplayProperty"><span class="prop-name">‘display’</span></a> property is set to a value
535 other than <span class="prop-value">none</span>, and <a href="#FilterElement"><span class="element-name">‘filter’</span></a> elements are available for referencing
536 even when the <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#DisplayProperty"><span class="prop-name">‘display’</span></a> property on the <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element or any of its ancestors is set
537 to <span class="prop-value">none</span>.</p>
538 <br/>
540 <h2 id="FilterEffectsRegion">6 Filter effects region</h2>
542 <p>A <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
543 element can define a region on the canvas to which a given filter effect
544 applies and can provide a resolution for any intermediate continuous tone
545 images used to process any raster-based <a href="#TermFilterPrimitiveElements"><span class="svg-term">filter primitives</span></a>.
547 The <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
548 element has the following attributes which work together to define the filter
549 effects region:</p>
551 <dl class="definitions unemphasized-names"><dt id="FilterUnitsAttribute"><a href="#FilterElementFilterUnitsAttribute"><span class="attr-name">‘filterUnits’</span></a></dt><dd>
552 <p>Defines the coordinate system for attributes <a href="#FilterElementXAttribute"><span class="attr-name">‘x’</span></a>, <a href="#FilterElementYAttribute"><span class="attr-name">‘y’</span></a>,
553 <a href="#FilterElementWidthAttribute"><span class="attr-name">‘width’</span></a>, <a href="#FilterElementHeightAttribute"><span class="attr-name">‘height’</span></a>.</p>
555 <p>If <span class="attr-value">filterUnits="userSpaceOnUse"</span>, <a href="#FilterElementXAttribute"><span class="attr-name">‘x’</span></a>, <a href="#FilterElementYAttribute"><span class="attr-name">‘y’</span></a>,
556 <a href="#FilterElementWidthAttribute"><span class="attr-name">‘width’</span></a>, <a href="#FilterElementHeightAttribute"><span class="attr-name">‘height’</span></a> represent values in the current user coordinate
557 system in place at the time when the <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element is referenced (i.e., the
558 user coordinate system for the element referencing the <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
559 element via a <a href="#FilterProperty"><span class="prop-name">‘filter’</span></a> property).</p>
561 <p>If <span class="attr-value">filterUnits="objectBoundingBox"</span>, then <a href="#FilterElementXAttribute"><span class="attr-name">‘x’</span></a>, <a href="#FilterElementYAttribute"><span class="attr-name">‘y’</span></a>,
562 <a href="#FilterElementWidthAttribute"><span class="attr-name">‘width’</span></a>, <a href="#FilterElementHeightAttribute"><span class="attr-name">‘height’</span></a> represent fractions or percentages of the
563 bounding box on the referencing element (see <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/coords.html#ObjectBoundingBoxUnits"><span class="svg-term">object bounding box units</span></a>).</p>
565 <p>The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#FilterElementFilterUnitsAttribute"><span class="attr-name">‘filterUnits’</span></a> is <span class="attr-value">objectBoundingBox</span>.</p>
567 <p><span class="anim-target">Animatable: yes.</span></p>
568 </dd><dt id="FilterRegionXYWidthHeightAttributes"><a href="#FilterElementXAttribute"><span class="attr-name">‘x’</span></a>, <a href="#FilterElementYAttribute"><span class="attr-name">‘y’</span></a>, <a href="#FilterElementWidthAttribute"><span class="attr-name">‘width’</span></a>, <a href="#FilterElementHeightAttribute"><span class="attr-name">‘height’</span></a></dt><dd>
569 <p>These attributes define a rectangular region on the canvas to which this filter applies.</p>
570 <p>The amount of memory and processing time required to apply the filter are
571 related to the size of this rectangle and the <a href="#FilterElementFilterResAttribute"><span class="attr-name">‘filterRes’</span></a> attribute of the filter.</p>
572 <p>The coordinate system for these attributes depends on the value for attribute <a href="#FilterElementFilterUnitsAttribute"><span class="attr-name">‘filterUnits’</span></a>.</p>
573 <p>The bounds of this rectangle act as a hard clipping region for each <a href="#TermFilterPrimitiveElement"><span class="svg-term">filter primitive</span></a>
574 included with a given <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element; thus, if the effect of
575 a given filter primitive would extend beyond the bounds of the rectangle
576 (this sometimes happens when using a <a href="#feGaussianBlurElement"><span class="element-name">‘feGaussianBlur’</span></a> filter primitive with a
577 very large <a href="#feGaussianBlurStdDeviationAttribute"><span class="attr-name">‘stdDeviation’</span></a>), parts of the effect will get clipped.</p>
579 <p>The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#FilterElementXAttribute"><span class="attr-name">‘x’</span></a> and <a href="#FilterElementYAttribute"><span class="attr-name">‘y’</span></a> is <span class="attr-value">-10%</span>.</p>
580 <p>The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#FilterElementWidthAttribute"><span class="attr-name">‘width’</span></a> and <a href="#FilterElementHeightAttribute"><span class="attr-name">‘height’</span></a> is <span class="attr-value">120%</span>.</p>
581 <p>Negative or zero values for <a href="#FilterElementWidthAttribute"><span class="attr-name">‘width’</span></a> or <a href="#FilterElementHeightAttribute"><span class="attr-name">‘height’</span></a> disable rendering of the element which
582 referenced the filter. </p>
584 <p><span class="anim-target">Animatable: yes.</span></p>
585 </dd><dt id="FilterRegionFilterRes"><a href="#FilterElementFilterResAttribute"><span class="attr-name">‘filterRes’</span></a></dt><dd>
586 <p>Defines the width and height of the intermediate
587 images in pixels. If not provided, then the user agent will use reasonable
588 values to produce a high-quality result on the output device.</p>
590 <p>Care should be taken when assigning a non-default value to this
591 attribute. Too small of a value may result in unwanted pixelation in the
592 result. Too large of a value may result in slow processing and large
593 memory usage.</p>
595 <p>Non-integer values are truncated, i.e rounded to the closest integer value towards zero.</p>
597 <p><span class="requirement" id="assert_OORFilterRegion">Negative or zero values disable rendering of the element which referenced the filter.</span></p>
598 <p><span class="anim-target">Animatable: yes.</span></p>
599 </dd></dl>
601 <p>Note that both of the two possible value for <a href="#FilterElementFilterUnitsAttribute"><span class="attr-name">‘filterUnits’</span></a> (i.e., <span class="attr-value">objectBoundingBox</span> and <span class="attr-value">userSpaceOnUse</span>) result in a <a href="#FilterEffectsRegion"><span class="svg-term">filter region</span></a> whose
602 coordinate system has its X-axis and Y-axis each parallel to the X-axis and
603 Y-axis, respectively, of the <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermUserCoordinateSystem"><span class="svg-term">user coordinate system</span></a> for the element to which
604 the filter will be applied.</p>
606 <p class="note implementation">Sometimes implementers can achieve faster performance when the filter
607 region can be mapped directly to device pixels; thus, for best performance on
608 display devices, it is suggested that authors define their region such that
609 the user agent can align the <a href="#FilterEffectsRegion"><span class="svg-term">filter region</span></a> pixel-for-pixel with the
610 background. In particular, for best filter effects performance, avoid
611 rotating or skewing the user coordinate system. Explicit values for attribute
612 <a href="#FilterElementFilterResAttribute"><span class="attr-name">‘filterRes’</span></a> can either help or harm performance.
613 If <a href="#FilterElementFilterResAttribute"><span class="attr-name">‘filterRes’</span></a> is smaller than the automatic
614 (i.e., default) filter resolution, then filter effect might have faster
615 performance (usually at the expense of quality). If <a href="#FilterElementFilterResAttribute"><span class="attr-name">‘filterRes’</span></a> is larger than the automatic (i.e.,
616 default) filter resolution, then filter effects performance will usually be
617 slower.</p>
619 <p class="note authoring">It is often necessary to provide padding space because the filter effect
620 might impact bits slightly outside the tight-fitting on a given
621 object. For these purposes, it is possible to provide negative percentage
622 values for <a href="#FilterElementXAttribute"><span class="attr-name">‘x’</span></a>, <a href="#FilterElementYAttribute"><span class="attr-name">‘y’</span></a> and percentages values greater than <span class="attr-value">100%</span> for
623 <a href="#FilterElementWidthAttribute"><span class="attr-name">‘width’</span></a>, <a href="#FilterElementHeightAttribute"><span class="attr-name">‘height’</span></a>. This, for example, is why the defaults for
624 the filter effects region are <span class="attr-value">x="-10%" y="-10%" width="120%"
625 height="120%"</span>.</p>
627 <h2 id="AccessBackgroundImage">7 Accessing the background image</h2>
629 <p id="AccessingBackgroundImage">Two possible pseudo input images for filter effects are <a href="#BackgroundImage"><span class="attr-value">BackgroundImage</span></a> and <a href="#BackgroundAlpha"><span class="attr-value">BackgroundAlpha</span></a>, which each represent an image
630 snapshot of the canvas under the <a href="#FilterEffectsRegion"><span class="svg-term">filter region</span></a> at the time that the <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element
631 is invoked. <a href="#BackgroundImage"><span class="attr-value">BackgroundImage</span></a> represents both
632 the color values and alpha channel of the canvas (i.e., RGBA pixel values),
633 whereas <a href="#BackgroundAlpha"><span class="attr-value">BackgroundAlpha</span></a> represents only the
634 alpha channel.</p>
636 <p>Implementations
637 will often need to maintain supplemental background image buffers in order to
638 support the <a href="#BackgroundImage"><span class="attr-value">BackgroundImage</span></a> and <a href="#BackgroundAlpha"><span class="attr-value">BackgroundAlpha</span></a> pseudo input images. Sometimes,
639 the background image buffers will contain an in-memory copy of the
640 accumulated painting operations on the current canvas.</p>
642 <p>Because in-memory image buffers can take up significant system resources,
643 content must explicitly indicate to the
644 user agent that the document needs access to the background image before <a href="#BackgroundImage"><span class="attr-value">BackgroundImage</span></a> and <a href="#BackgroundAlpha"><span class="attr-value">BackgroundAlpha</span></a> pseudo input images can be used.
645 </p>
647 A background image is what's been <i>rendered before</i> the current element.
648 For SVG, that uses the painter's algorithm, <i>rendered before</i> means
649 all of the prior elements in pre order traversal previous to the element to
650 which the filter is applied.
652 <p>The property which enables access to the background image is
653 <a href="#EnableBackgroundProperty"><span class="prop-name">‘enable-background’</span></a>:</p>
656 <div class="propdef">
657 <dl><dt id="EnableBackgroundProperty"><span class="propdef-title prop-name">‘enable-background’</span></dt><dd>
658 <table summary="enable-background property" class="propinfo" cellspacing="0" cellpadding="0"><tbody><tr valign="baseline"><td><em>Value:</em> </td><td>accumulate | new | <a class="noxref" href="http://www.w3.org/TR/2009/CR-CSS2-20090423/cascade.html#value-def-inherit"><span class="value-inst-inherit noxref">inherit</span></a></td></tr><tr valign="baseline"><td><em>Initial:</em> </td><td>accumulate</td></tr><tr valign="baseline"><td><em>Applies to:</em> </td><td>Typically elements that can contain renderable elements.
659 language is responsible for defining the applicable set of
660 elements.
661 For SVG: <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermContainerElement"><span class="svg-term">container elements</span></a></td></tr><tr valign="baseline"><td><em>Inherited:</em> </td><td>no</td></tr><tr valign="baseline"><td><em>Percentages:</em> </td><td>N/A</td></tr><tr valign="baseline"><td><em>Media:</em> </td><td>visual</td></tr><tr valign="baseline"><td><em>Animatable:</em> </td><td>no</td></tr></tbody></table>
662 </dd></dl>
663 </div>
664 <p><a href="#EnableBackgroundProperty"><span class="prop-name">‘enable-background’</span></a> is only
665 applicable to <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermContainerElement"><span class="svg-term">container elements</span></a>
666 and specifies how the <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermUserAgent"><span class="svg-term">SVG user agent</span></a> manages the accumulation
667 of the background image.</p>
669 <p>A value of <strong>new</strong> indicates two things:</p>
670 <ul><li>It enables the ability of children of the current <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermGraphicsElement"><span class="svg-term">container element</span></a>
671 element to access the background image.</li><li>It indicates that a new (i.e., initially transparent black) background
672 image canvas is established and that (in effect) all children of the
673 current <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermGraphicsElement"><span class="svg-term">container element</span></a>
674 element shall be rendered into the new background image canvas in
675 addition to being rendered onto the target device.</li></ul>
677 <p>A meaning of <span class="attr-value">enable-background: accumulate</span> (the
678 initial/default value) depends on context:</p>
679 <ul><li>If an ancestor <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermGraphicsElement"><span class="svg-term">container element</span></a>
680 element has a property value of <span class="attr-value">'enable-background:new'</span>, then all
681 renderable child elements of the current <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermGraphicsElement"><span class="svg-term">container element</span></a>
682 element are rendered both onto the parent <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermGraphicsElement"><span class="svg-term">container element</span></a>
683 element's background image canvas and onto the target device.</li><li>Otherwise, there is no current background image canvas, so it is only
684 necessary to render <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermGraphicsElement"><span class="svg-term">graphics elements</span></a>
685 the renderable elements onto the target device. (No need to render to the
686 background image canvas.)</li></ul>
688 <p>If a filter effect specifies either the <a href="#BackgroundImage"><span class="attr-value">BackgroundImage</span></a> or the
689 <a href="#BackgroundAlpha"><span class="attr-value">BackgroundAlpha</span></a> pseudo input images and no
690 ancestor <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermGraphicsElement"><span class="svg-term">container element</span></a>
691 element has a property value of <span class="attr-value">'enable-background:new'</span>, then the background
692 image request is technically in error. Processing will proceed without
693 interruption (i.e., no error message) and a transparent black image shall be
694 provided in response to the request.</p>
696 <h3 id="AccessBackgroundImageSVG">7.1 Accessing the background image in SVG</h3>
697 <p>This section only applies to the SVG definition of enable-background.</p>
699 <p>Assume you have an element E in the document and that E has a series of
700 ancestors A<sub>1</sub> (its immediate parent), A<sub>2</sub>, etc. (Note:
701 A<sub>0</sub> is E.) Each ancestor A<sub>i</sub> will have a corresponding
702 temporary background image offscreen buffer BUF<sub>i</sub>. The contents of
703 the <em>background image</em> available to a <a href="#FilterElement"><span class="element-name">‘filter’</span></a> referenced by E is defined as
704 follows:</p>
705 <ul><li>Find the element A<sub>i</sub> with the smallest subscript i (including
706 A<sub>0</sub>=E) for which the <a href="#EnableBackgroundProperty"><span class="prop-name">‘enable-background’</span></a> property has the value
707 <span class="prop-value">new</span>. (Note: if there is no such ancestor
708 element, then there is no background image available to E, in which case
709 a transparent black image will be used as E's background image.)</li><li>For each A<sub>i</sub> (from i=n to 1), initialize BUF<sub>i</sub> to
710 transparent black. Render all children of A<sub>i</sub> up to but not
711 including A<sub>i-1</sub> into BUF<sub>i</sub>. The children are painted,
712 then filtered, clipped, masked and composited using the various painting,
713 filtering, clipping, masking and object opacity settings on the given
714 child. Any filter effects, masking and group opacity that might be set on
715 A<sub>i</sub> do <em>not</em> apply when rendering the children of
716 A<sub>i</sub> into BUF<sub>i</sub>.<br/>
717 (Note that for the case of A<sub>0</sub>=E, the graphical contents of E
718 are not rendered into BUF<sub>1</sub> and thus are not part of the
719 background image available to E. Instead, the graphical contents of E are
720 available via the <a href="#SourceGraphic">SourceGraphic</a> and <a href="#SourceAlpha">SourceAlpha</a> pseudo input images.)</li><li>Then, for each A<sub>i</sub> (from i=1 to n-1), composite
721 BUF<sub>i</sub> into BUF<sub>i+1</sub>.</li><li>The accumulated result (i.e., BUF<sub>n</sub>) represents the
722 background image available to E.</li></ul>
724 <pre class="xml"><?xml version="1.0" standalone="no"?>
725 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
726 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
727 <svg width="13.5cm" height="2.7cm" viewBox="0 0 1350 270"
728 xmlns="http://www.w3.org/2000/svg" version="1.1">
729 <title>Example enable-background01</title>
730 <desc>This test case shows five pictures which illustrate the rules
731 for background image processing.</desc>
733 <defs>
734 <filter id="ShiftBGAndBlur"
735 filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="400">
736 <desc>
737 This filter discards the SourceGraphic, if any, and just produces
738 a result consisting of the BackgroundImage shifted down 125 units
739 and then blurred.
740 </desc>
741 <feOffset in="BackgroundImage" dx="0" dy="125" />
742 <feGaussianBlur stdDeviation="8" />
743 </filter>
744 <filter id="ShiftBGAndBlur_WithSourceGraphic"
745 filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="400">
746 <desc>
747 This filter takes the BackgroundImage, shifts it down 125 units, blurs it,
748 and then renders the SourceGraphic on top of the shifted/blurred background.
749 </desc>
750 <feOffset in="BackgroundImage" dx="0" dy="125" />
751 <feGaussianBlur stdDeviation="8" result="blur" />
752 <feMerge>
753 <feMergeNode in="blur"/>
754 <feMergeNode in="SourceGraphic"/>
755 </feMerge>
756 </filter>
757 </defs>
759 <g transform="translate(0,0)">
760 <desc>The first picture is our reference graphic without filters.</desc>
761 <rect x="25" y="25" width="100" height="100" fill="red"/>
762 <g opacity=".5">
763 <circle cx="125" cy="75" r="45" fill="green"/>
764 <polygon points="160,25 160,125 240,75" fill="blue"/>
765 </g>
766 <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
767 </g>
769 <g enable-background="new" transform="translate(270,0)">
770 <desc>The second adds an empty 'g' element which invokes ShiftBGAndBlur.</desc>
771 <rect x="25" y="25" width="100" height="100" fill="red"/>
772 <g opacity=".5">
773 <circle cx="125" cy="75" r="45" fill="green"/>
774 <polygon points="160,25 160,125 240,75" fill="blue"/>
775 </g>
776 <g filter="url(#ShiftBGAndBlur)"/>
777 <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
778 </g>
780 <g enable-background="new" transform="translate(540,0)">
781 <desc>The third invokes ShiftBGAndBlur on the inner group.</desc>
782 <rect x="25" y="25" width="100" height="100" fill="red"/>
783 <g filter="url(#ShiftBGAndBlur)" opacity=".5">
784 <circle cx="125" cy="75" r="45" fill="green"/>
785 <polygon points="160,25 160,125 240,75" fill="blue"/>
786 </g>
787 <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
788 </g>
790 <g enable-background="new" transform="translate(810,0)">
791 <desc>The fourth invokes ShiftBGAndBlur on the triangle.</desc>
792 <rect x="25" y="25" width="100" height="100" fill="red"/>
793 <g opacity=".5">
794 <circle cx="125" cy="75" r="45" fill="green"/>
795 <polygon points="160,25 160,125 240,75" fill="blue"
796 filter="url(#ShiftBGAndBlur)"/>
797 </g>
798 <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
799 </g>
801 <g enable-background="new" transform="translate(1080,0)">
802 <desc>The fifth invokes ShiftBGAndBlur_WithSourceGraphic on the triangle.</desc>
803 <rect x="25" y="25" width="100" height="100" fill="red"/>
804 <g opacity=".5">
805 <circle cx="125" cy="75" r="45" fill="green"/>
806 <polygon points="160,25 160,125 240,75" fill="blue"
807 filter="url(#ShiftBGAndBlur_WithSourceGraphic)"/>
808 </g>
809 <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
810 </g>
811 </svg></pre><table summary="Example "><caption align="bottom">Example </caption><tr><td><img alt="Example " src="examples/enable-background-01.png"/></td></tr></table><p class="view-as-svg"><a href="examples/enable-background-01.svg">View this example as SVG (SVG-enabled browsers only)</a></p>
813 <p>The example above contains five parts, described as follows:</p>
814 <ol><li>The first set is the reference graphic. The reference graphic consists
815 of a red rectangle followed by a 50% transparent <span class="element-name">‘g’</span>
816 element. Inside the <span class="element-name">‘g’</span>
817 is a green circle that partially overlaps the rectangle and a a blue
818 triangle that partially overlaps the circle. The three objects are then
819 outlined by a rectangle stroked with a thin blue line. No filters are
820 applied to the reference graphic.</li><li>The second set enables background image processing and adds an empty
821 <span class="element-name">‘g’</span>
822 element which invokes the ShiftBGAndBlur filter. This filter takes the
823 current accumulated background image (i.e., the entire reference graphic)
824 as input, shifts its offscreen down, blurs it, and then writes the result
825 to the canvas. Note that the offscreen for the filter is initialized to
826 transparent black, which allows the already rendered rectangle, circle
827 and triangle to show through after the filter renders its own result to
828 the canvas.</li><li>The third set enables background image processing and instead invokes
829 the ShiftBGAndBlur filter on the inner <span class="element-name">‘g’</span>
830 element. The accumulated background at the time the filter is applied
831 contains only the red rectangle. Because the children of the inner <span class="element-name">‘g’</span>
832 (i.e., the circle and triangle) are not part of the inner <span class="element-name">‘g’</span>
833 element's background and because ShiftBGAndBlur ignores SourceGraphic,
834 the children of the inner <span class="element-name">‘g’</span>
835 do not appear in the result.</li><li>The fourth set enables background image processing and invokes the
836 ShiftBGAndBlur on the <span class="element-name">‘polygon’</span>
837 element that draws the triangle. The accumulated background at the time
838 the filter is applied contains the red rectangle plus the green circle
839 ignoring the effect of the <span class="prop-name">‘opacity’</span>
840 property on the inner <span class="element-name">‘g’</span>
841 element. (Note that the blurred green circle at the bottom does not let
842 the red rectangle show through on its left side. This is due to ignoring
843 the effect of the <span class="prop-name">‘opacity’</span>
844 property.) Because the triangle itself is not part of the accumulated
845 background and because ShiftBGAndBlur ignores SourceGraphic, the triangle
846 does not appear in the result.</li><li>The fifth set is the same as the fourth except that filter
847 ShiftBGAndBlur_WithSourceGraphic is invoked instead of ShiftBGAndBlur.
848 ShiftBGAndBlur_WithSourceGraphic performs the same effect as
849 ShiftBGAndBlur, but then renders the SourceGraphic on top of the shifted,
850 blurred background image. In this case, SourceGraphic is the blue
851 triangle; thus, the result is the same as in the fourth case except that
852 the blue triangle now appears.</li></ol>
855 <h2 id="FilterPrimitivesOverview">8 Filter primitives overview</h2>
857 <h3 id="FilterPrimitivesOverviewIntro">8.1 Overview</h3>
859 <p>This section describes the various filter primtives that can be assembled
860 to achieve a particular filter effect.</p>
862 <p>Unless otherwise stated, all image filters operate on premultiplied RGBA
863 samples. Filters which work more naturally on non-premultiplied data
864 (<a href="#feColorMatrixElement"><span class="element-name">‘feColorMatrix’</span></a> and <a href="#feComponentTransferElement"><span class="element-name">‘feComponentTransfer’</span></a>) will temporarily undo and redo
865 premultiplication as specified. All raster effect filtering operations take 1
866 to N input RGBA images, additional attributes as parameters, and produce a
867 single output RGBA image.</p>
869 <p>The RGBA result from each filter primitive will be clamped into the
870 allowable ranges for colors and opacity values. Thus, for example, the result
871 from a given <a href="#TermFilterPrimitiveElement"><span class="svg-term">filter primitive</span></a> will have any negative color values or opacity
872 values adjusted up to color/opacity of zero.</p>
874 <p id="filtersColorSpace">The color space in which a particular <a href="#TermFilterPrimitiveElement"><span class="svg-term">filter primitive</span></a> performs its
875 operations is determined by the value of property <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationFiltersProperty"><span class="prop-name">‘color-interpolation-filters’</span></a> on the given <a href="#TermFilterPrimitiveElement"><span class="svg-term">filter
876 primitive</span></a>. A different property, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationProperty"><span class="prop-name">‘color-interpolation’</span></a> determines the color space for
877 other color operations. Because these two properties have different initial
878 values (<a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationFiltersProperty"><span class="prop-name">‘color-interpolation-filters’</span></a> has an
879 initial value of <span class="prop-value">linearRGB</span> whereas <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationProperty"><span class="prop-name">‘color-interpolation’</span></a> has an initial value of <span class="prop-value">sRGB</span>), in some cases to achieve certain results
880 (e.g., when coordinating gradient interpolation with a filtering operation)
881 it will be necessary to explicitly set <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationProperty"><span class="prop-name">‘color-interpolation’</span></a> to <span class="prop-value">linearRGB</span> or <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationFiltersProperty"><span class="prop-name">‘color-interpolation-filters’</span></a> to <span class="prop-value">sRGB</span> on particular elements. Note that the examples
882 below do not explicitly set either <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationProperty"><span class="prop-name">‘color-interpolation’</span></a> or <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationFiltersProperty"><span class="prop-name">‘color-interpolation-filters’</span></a>, so the initial values for these properties apply to the examples.</p>
884 <p><span class="requirement" id="assert_undefinedPixels">Sometimes <a href="#TermFilterPrimitiveElements"><span class="svg-term">filter primitives</span></a> result in undefined pixels. For example,
885 filter primitive <a href="#feOffsetElement"><span class="element-name">‘feOffset’</span></a> can shift an image down and to the
886 right, leaving undefined pixels at the top and left. In these cases, the
887 undefined pixels are set to transparent black.</span></p>
889 <h3 id="CommonAttributes">8.2 Common attributes</h3>
891 <p>The following attributes are available for most of the filter
892 primitives:</p>
894 <div class="adef-list">
895 <p><em>Attribute definitions:</em></p>
896 <dl><dt id="FilterPrimitiveXAttribute">
897 <span class="adef">x</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeCoordinate"><coordinate></a></em>"</dt><dd><p>The minimum x coordinate for the subregion which restricts
898 calculation and rendering of the given <a href="#TermFilterPrimitiveElement"><span class="svg-term">filter primitive</span></a>. See <a href="#FilterPrimitiveSubRegion"><span class="svg-term">filter primitive subregion</span></a>.</p>
899 <p>The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <span class="attr-name">x</span> is <span class="attr-value">0%</span>.</p>
900 <p><span class="anim-target">Animatable: yes.</span></p>
901 </dd><dt id="FilterPrimitiveYAttribute">
902 <span class="adef">y</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeCoordinate"><coordinate></a></em>"</dt><dd><p>The minimum y coordinate for the subregion which restricts
903 calculation and rendering of the given <a href="#TermFilterPrimitiveElement"><span class="svg-term">filter primitive</span></a>. See <a href="#FilterPrimitiveSubRegion"><span class="svg-term">filter primitive subregion</span></a>. </p>
904 <p>The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <span class="attr-name">y</span> is <span class="attr-value">0%</span>.</p>
905 <p><span class="anim-target">Animatable: yes.</span></p>
906 </dd><dt id="FilterPrimitiveWidthAttribute">
907 <span class="adef">width</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeLength"><length></a></em>"</dt><dd><p>The width of the subregion which restricts calculation and rendering
908 of the given <a href="#TermFilterPrimitiveElement"><span class="svg-term">filter primitive</span></a>. See <a href="#FilterPrimitiveSubRegion"><span class="svg-term">filter primitive subregion</span></a>.</p>
909 <p>A negative or zero value disables the effect of the given filter
910 primitive (i.e., the result is a transparent black image).</p>
911 <p>The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <span class="attr-name">width</span> is <span class="attr-value">100%</span>.</p>
912 <p><span class="anim-target">Animatable: yes.</span></p>
913 </dd><dt id="FilterPrimitiveHeightAttribute">
914 <span class="adef">height</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeLength"><length></a></em>"</dt><dd><p>The height of the subregion which restricts calculation and rendering
915 of the given <a href="#TermFilterPrimitiveElement"><span class="svg-term">filter primitive</span></a>. See <a href="#FilterPrimitiveSubRegion"><span class="svg-term">filter primitive subregion</span></a>.</p>
916 <p>A negative or zero value disables the effect of the given filter
917 primitive (i.e., the result is a transparent black image).</p>
918 <p>The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <span class="attr-name">height</span> is <span class="attr-value">100%</span>.</p>
919 <p><span class="anim-target">Animatable: yes.</span></p>
920 </dd><dt id="FilterPrimitiveResultAttribute">
921 <span class="adef">result</span> =
922 "<em><a href="#TermFilterPrimitiveReference"><filter-primitive-reference></a></em>"</dt><dd><p>Assigned name for this <a href="#TermFilterPrimitiveElement"><span class="svg-term">filter primitive</span></a>. If supplied, then graphics
923 that result from processing this <a href="#TermFilterPrimitiveElement"><span class="svg-term">filter primitive</span></a> can be referenced by
924 an <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a> attribute on a subsequent filter
925 primitive within the same <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element. If no value is
926 provided, the output will only be available for re-use as the implicit
927 input into the next <a href="#TermFilterPrimitiveElement"><span class="svg-term">filter primitive</span></a> if that <a href="#TermFilterPrimitiveElement"><span class="svg-term">filter primitive</span></a> provides
928 no value for its <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a> attribute.</p>
929 <p>Note that a <a href="#TermFilterPrimitiveReference"><filter-primitive-reference></a> is not an XML
930 ID; instead, a <a href="#TermFilterPrimitiveReference"><filter-primitive-reference></a> is only
931 meaningful within a given <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element and thus have only
932 local scope. It is legal for the same
933 <a href="#TermFilterPrimitiveReference"><filter-primitive-reference></a> to appear multiple times
934 within the same <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element. When referenced, the
935 <a href="#TermFilterPrimitiveReference"><filter-primitive-reference></a> will use the closest
936 preceding <a href="#TermFilterPrimitiveElement"><span class="svg-term">filter primitive</span></a> with the given result.</p>
937 <p><span class="anim-target">Animatable: yes.</span></p>
938 </dd><dt id="FilterPrimitiveInAttribute">
939 <span class="adef">in</span> = "<em><a href="#SourceGraphic"><span class="attr-value">SourceGraphic</span></a> | <a href="#SourceAlpha"><span class="attr-value">SourceAlpha</span></a> | <a href="#BackgroundImage"><span class="attr-value">BackgroundImage</span></a> | <a href="#BackgroundAlpha"><span class="attr-value">BackgroundAlpha</span></a> | <a href="#FillPaint"><span class="attr-value">FillPaint</span></a> | <a href="#StrokePaint"><span class="attr-value">StrokePaint</span></a> |
940 <a href="#TermFilterPrimitiveReference"><filter-primitive-reference></a></em>"</dt><dd><p>Identifies input for the given filter primitive. The value can be
941 either one of six keywords or can be a string which matches a previous
942 <a href="filters.html#FilterPrimitiveResultAttribute"><span class="attr-name">‘result’</span></a> attribute value within the same <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
943 element. If no value is provided and this is the first <a href="#TermFilterPrimitiveElement"><span class="svg-term">filter primitive</span></a>,
944 then this <a href="#TermFilterPrimitiveElement"><span class="svg-term">filter primitive</span></a> will use <a href="#SourceGraphic"><span class="attr-value">SourceGraphic</span></a>
945 as its input. If no value is provided and this is a subsequent <a href="#TermFilterPrimitiveElement"><span class="svg-term">filter primitive</span></a>,
946 then this <a href="#TermFilterPrimitiveElement"><span class="svg-term">filter primitive</span></a> will use the result from the
947 previous <a href="#TermFilterPrimitiveElement"><span class="svg-term">filter primitive</span></a> as its input.</p>
948 <p>If the value for <span class="attr-name">result</span> appears
949 multiple times within a given <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element, then a reference to
950 that result will use the closest preceding <a href="#TermFilterPrimitiveElement"><span class="svg-term">filter primitive</span></a> with the
951 given value for attribute <a href="filters.html#FilterPrimitiveResultAttribute"><span class="attr-name">‘result’</span></a>.
952 Forward references to results are not allowed, and will be treated as
953 if no result was specified. </p>
954 <p>Definitions for the six keywords: </p>
955 <dl><dt id="SourceGraphic"><span class="attr-value">SourceGraphic</span></dt><dd><p>This keyword represents the graphics elements
956 that were the original input into the <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element. For raster
957 effects <a href="#TermFilterPrimitiveElements"><span class="svg-term">filter primitives</span></a>, the graphics elements
958 will be rasterized into an initially clear RGBA raster in image
959 space. Pixels left untouched by the original graphic will be left
960 clear. The image is specified to be rendered in linear RGBA
961 pixels. The alpha channel of this image captures any
962 anti-aliasing specified by SVG. (Since the raster is linear, the
963 alpha channel of this image will represent the exact percent
964 coverage of each pixel.)</p></dd><dt id="SourceAlpha"><span class="attr-value">SourceAlpha</span></dt><dd><p>This keyword represents the graphics elements
965 that were the original input into the <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element.
966 <a href="#SourceAlpha"><span class="attr-value">SourceAlpha</span></a> has all of the same rules
967 as <a href="#SourceGraphic"><span class="attr-value">SourceGraphic</span></a> except that only the
968 alpha channel is used. The input image is an RGBA image
969 consisting of implicitly black color values for the RGB channels,
970 but whose alpha channel is the same as <a href="#SourceGraphic"><span class="attr-value">SourceGraphic</span></a>.</p>
971 <p class="note implementation">If this option is
972 used, then some implementations might need to rasterize the
973 graphics elements
974 in order to extract the alpha channel.</p>
975 </dd><dt id="BackgroundImage"><span class="attr-value">BackgroundImage</span></dt><dd><p>This keyword represents an image snapshot of the canvas under
976 the <a href="#FilterEffectsRegion"><span class="svg-term">filter region</span></a> at the time that the <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element was invoked. See
977 <a href="#AccessingBackgroundImage">accessing the background
978 image</a>.</p>
979 </dd><dt id="BackgroundAlpha"><span class="attr-value">BackgroundAlpha</span></dt><dd><p>Same as <a href="#BackgroundImage"><span class="attr-value">BackgroundImage</span></a> except
980 only the alpha channel is used. See <a href="#SourceAlpha"><span class="attr-value">SourceAlpha</span></a> and <a href="#AccessingBackgroundImage">accessing the background
981 image</a>.</p>
982 </dd><dt id="FillPaint"><span class="attr-value">FillPaint</span></dt><dd>
983 <p>This keyword represents the target element <i>rendered filled</i>.</p>
984 <p>For svg this keyword represents the value of the <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillProperty"><span class="prop-name">‘fill’</span></a>
985 property on the target element for the filter effect.</p>
986 <p>For non-SVG cases <a href="#FillPaint"><span class="attr-value">FillPaint</span></a> generates a transparent black image.
987 <span class="specissue">ISSUE: Consider whether this should be e.g the CSS bounding box filled with the current color, or if it makes sense to use the 'fill' property for this case too.</span>
988 </p>
989 <p class="note authoring">Note that text is generally painted filled, not stroked.</p>
990 <p>The <a href="#FillPaint"><span class="attr-value">FillPaint</span></a> image has conceptually infinite extent.
991 Frequently this image is opaque everywhere, but it might not be if the "paint"
992 itself has alpha, as in the case of a gradient or pattern which
993 itself includes transparent or semi-transparent parts.</p>
994 </dd><dt id="StrokePaint"><span class="attr-value">StrokePaint</span></dt><dd>
995 <p>This keyword represents the target element <i>rendered stroked</i>.</p>
996 <p>For svg this keyword represents the value of the <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeProperty"><span class="prop-name">‘stroke’</span></a>
997 on the target element for the filter effect.</p>
998 <p>For non-SVG cases <a href="#StrokePaint"><span class="attr-value">StrokePaint</span></a> generates a transparent black image.
999 <span class="specissue">ISSUE: Consider whether this should be e.g the CSS bounding box filled with the one of the border colors, or if it makes sense to use the 'stroke' property for this case too.</span>
1000 </p>
1001 <p class="note authoring">Note that text is generally painted filled, not stroked.</p>
1002 <p>The <a href="#StrokePaint"><span class="attr-value">StrokePaint</span></a> image has conceptually infinite extent.
1003 Frequently this image is opaque everywhere, but it
1004 might not be if the "paint"
1005 itself has alpha, as in the case of a gradient or pattern which
1006 itself includes transparent or semi-transparent parts.
1007 </p>
1008 </dd></dl>
1009 <p><span class="anim-target">Animatable: yes.</span></p>
1010 </dd></dl>
1011 </div>
1013 <h3 id="FilterPrimitiveSubRegion">8.3 Filter primitive subregion</h3>
1016 <p>
1017 All <a href="#TermFilterPrimitiveElements"><span class="svg-term">filter primitives</span></a> have attributes <a href="filters.html#FilterPrimitiveXAttribute"><span class="attr-name">‘x’</span></a>, <a href="filters.html#FilterPrimitiveYAttribute"><span class="attr-name">‘y’</span></a>,
1018 <a href="filters.html#FilterPrimitiveWidthAttribute"><span class="attr-name">‘width’</span></a> and <a href="filters.html#FilterPrimitiveHeightAttribute"><span class="attr-name">‘height’</span></a> which
1019 together identify a subregion which restricts calculation and rendering of
1020 the given <a href="#TermFilterPrimitiveElement"><span class="svg-term">filter primitive</span></a>. The <a href="filters.html#FilterPrimitiveXAttribute"><span class="attr-name">‘x’</span></a>, <a href="filters.html#FilterPrimitiveYAttribute"><span class="attr-name">‘y’</span></a>,
1021 <a href="filters.html#FilterPrimitiveWidthAttribute"><span class="attr-name">‘width’</span></a> and <a href="filters.html#FilterPrimitiveHeightAttribute"><span class="attr-name">‘height’</span></a> attributes are defined
1022 according to the same rules as other <a href="#TermFilterPrimitiveElements"><span class="svg-term">filter primitives</span></a>' coordinate and length
1023 attributes and thus represent values in the coordinate system established by
1024 attribute <a href="#FilterElementPrimitiveUnitsAttribute"><span class="attr-name">‘primitiveUnits’</span></a> on the <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element.
1025 </p>
1027 <p><a href="filters.html#FilterPrimitiveXAttribute"><span class="attr-name">‘x’</span></a>, <a href="filters.html#FilterPrimitiveYAttribute"><span class="attr-name">‘y’</span></a>,
1028 <a href="filters.html#FilterPrimitiveWidthAttribute"><span class="attr-name">‘width’</span></a> and <a href="filters.html#FilterPrimitiveHeightAttribute"><span class="attr-name">‘height’</span></a> default to the union (i.e., tightest fitting bounding
1029 box) of the subregions defined for all referenced nodes. If there are no
1030 referenced nodes (e.g., for <a href="#feImageElement"><span class="element-name">‘feImage’</span></a> or <a href="#feTurbulenceElement"><span class="element-name">‘feTurbulence’</span></a>), or one or more of the
1031 referenced nodes is a standard input (one of <a href="#SourceGraphic"><span class="attr-value">SourceGraphic</span></a>, <a href="#SourceAlpha"><span class="attr-value">SourceAlpha</span></a>, <a href="#BackgroundImage"><span class="attr-value">BackgroundImage</span></a>, <a href="#BackgroundAlpha"><span class="attr-value">BackgroundAlpha</span></a>,
1032 <a href="#FillPaint"><span class="attr-value">FillPaint</span></a> or <a href="#StrokePaint"><span class="attr-value">StrokePaint</span></a>), or for
1033 <a href="#feTileElement"><span class="element-name">‘feTile’</span></a>
1034 (which is special because its principal function is to replicate the
1035 referenced node in X and Y and thereby produce a usually larger result), the
1036 default subregion is <span class="attr-value">0%, 0%, 100%, 100%</span>,
1037 where as a special-case the percentages are relative to the dimensions of the <a href="#FilterEffectsRegion"><span class="svg-term">filter region</span></a>,
1038 thus making the default <a href="#FilterPrimitiveSubRegion"><span class="svg-term">filter primitive subregion</span></a> equal to the <a href="#FilterEffectsRegion"><span class="svg-term">filter region</span></a>.
1039 </p>
1041 <p>If the <a href="#FilterPrimitiveSubRegion"><span class="svg-term">filter primitive
1042 subregion</span></a> has a negative or zero width or height, the effect of the filter
1043 primitive is disabled. </p>
1045 <p>The <a href="#FilterPrimitiveSubRegion"><span class="svg-term">filter primitive subregion</span></a> act as a hard clip clipping rectangle on both the
1046 filter primitive's input image(s) and the filter primitive result.</p>
1047 <p class="specissue">ISSUE: Consider making it possible to do select between clip-input, clip-output, clip-both or none.</p>
1049 <p>All intermediate offscreens are defined to not exceed the intersection of
1050 the <a href="#FilterPrimitiveSubRegion"><span class="svg-term">filter primitive subregion</span></a> with the <a href="#FilterEffectsRegion"><span class="svg-term">filter region</span></a>.
1051 The <a href="#FilterEffectsRegion"><span class="svg-term">filter region</span></a> and any of the filter primitive subregions are
1052 to be set up such that all offscreens are made big enough to accommodate any
1053 pixels which even partly intersect with either the <a href="#FilterEffectsRegion"><span class="svg-term">filter region</span></a> or the
1054 filter primitive subregions.</p>
1056 <p><a href="#feTileElement"><span class="element-name">‘feTile’</span></a> references a previous filter primitive and then stitches the tiles together
1057 based on the <a href="#FilterPrimitiveSubRegion"><span class="svg-term">filter primitive subregion</span></a> of the referenced filter primitive in
1058 order to fill its own <a href="#FilterPrimitiveSubRegion"><span class="svg-term">filter primitive subregion</span></a>.</p>
1060 <pre class="xml"><svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
1061 <defs>
1062 <filter id="flood" x="0" y="0" width="100%" height="100%" primitiveUnits="objectBoundingBox">
1063 <feFlood x="25%" y="25%" width="50%" height="50%"
1064 flood-color="green" flood-opacity="0.75"/>
1065 </filter>
1066 <filter id="blend" primitiveUnits="objectBoundingBox">
1067 <feBlend x="25%" y="25%" width="50%" height="50%"
1068 in2="SourceGraphic" mode="multiply"/>
1069 </filter>
1070 <filter id="merge" primitiveUnits="objectBoundingBox">
1071 <feMerge x="25%" y="25%" width="50%" height="50%">
1072 <feMergeNode in="SourceGraphic"/>
1073 <feMergeNode in="FillPaint"/>
1074 </feMerge>
1075 </filter>
1076 </defs>
1078 <g fill="none" stroke="blue" stroke-width="4">
1079 <rect width="200" height="200"/>
1080 <line x2="200" y2="200"/>
1081 <line x1="200" y2="200"/>
1082 </g>
1083 <circle fill="green" filter="url(#flood)" cx="100" cy="100" r="90"/>
1085 <g transform="translate(200 0)">
1086 <g fill="none" stroke="blue" stroke-width="4">
1087 <rect width="200" height="200"/>
1088 <line x2="200" y2="200"/>
1089 <line x1="200" y2="200"/>
1090 </g>
1091 <circle fill="green" filter="url(#blend)" cx="100" cy="100" r="90"/>
1092 </g>
1094 <g transform="translate(0 200)">
1095 <g fill="none" stroke="blue" stroke-width="4">
1096 <rect width="200" height="200"/>
1097 <line x2="200" y2="200"/>
1098 <line x1="200" y2="200"/>
1099 </g>
1100 <circle fill="green" fill-opacity="0.5" filter="url(#merge)" cx="100" cy="100" r="90"/>
1101 </g>
1102 </svg></pre><table summary="Example "><caption align="bottom">Example </caption><tr><td><img alt="Example " src="examples/filtersubregion00.png"/></td></tr></table><p class="view-as-svg"><a href="examples/filtersubregion00.svg">View this example as SVG (SVG-enabled browsers only)</a></p>
1104 <p>
1105 In the example above there are three rects that each have a cross and a circle in them.
1107 The circle element in each one has a different filter applied, but with the same <a href="#FilterPrimitiveSubRegion"><span class="svg-term">filter primitive subregion</span></a>.
1108 The filter output should be limited to the <a href="#FilterPrimitiveSubRegion"><span class="svg-term">filter primitive subregion</span></a>, so you should never see the circles
1109 themselves, just the rects that make up the <a href="#FilterPrimitiveSubRegion"><span class="svg-term">filter primitive subregion</span></a>.
1110 </p>
1111 <ul><li>
1112 The upper left rect shows an <a href="#feFloodElement"><span class="element-name">‘feFlood’</span></a> with <span class="attr-name">flood-opacity</span>="<span class="attr-value">75%</span>" so the cross should be visible through the green rect in the middle.
1113 </li><li>
1114 The lower left rect shows an <a href="#feMergeElement"><span class="element-name">‘feMerge’</span></a> that merges <a href="#SourceGraphic"><span class="attr-value">SourceGraphic</span></a> with <a href="#FillPaint"><span class="attr-value">FillPaint</span></a>. Since the circle has <span class="attr-name">fill-opacity</span>="<span class="attr-value">0.5</span>" it will also be transparent so that the cross is visible through the green rect in the middle.
1115 </li><li>The upper right rect shows an <a href="#feBlendElement"><span class="element-name">‘feBlend’</span></a> that has <span class="attr-name">mode</span>="<span class="attr-value">multiply</span>". Since the circle in this case isn't transparent the result is totally opaque. The rect should be dark green and the cross should not be visible through it.
1116 </li></ul>
1120 <h2 id="LightSourceDefinitions">9 Light source elements and properties</h2>
1122 <h3 id="LightSourceIntro">9.1 Introduction</h3>
1124 <p>The following sections define the elements that define a light source, <a href="#feDistantLightElement"><span class="element-name">‘feDistantLight’</span></a>,
1125 <a href="#fePointLightElement"><span class="element-name">‘fePointLight’</span></a> and <a href="#feSpotLightElement"><span class="element-name">‘feSpotLight’</span></a>,
1126 and property <a href="#LightingColorProperty"><span class="prop-name">‘lighting-color’</span></a>, which defines the color of the
1127 light.</p>
1129 <h3 id="feDistantLightElement">9.2 Light source <span class="element-name">‘feDistantLight’</span></h3>
1131 <div class="element-summary"><div class="element-summary-name"><span class="element-name">‘feDistantLight’</span></div><dl><dt>Categories:</dt><dd><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermLightSourceElement">Light source element</a></dd><dt>Content model:</dt><dd>Any number of the following elements, in any order:
1132 <ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#AnimateElement"><span class="element-name">‘animate’</span></a></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#SetElement"><span class="element-name">‘set’</span></a></li></ul></dd><dt>Attributes:</dt><dd><ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermCoreAttributes">core attributes</a><span class="expanding"> — <a href="struct.html#IDAttribute"><span class="attr-name">‘id’</span></a>, <a href="struct.html#XMLBaseAttribute"><span class="attr-name">‘xml:base’</span></a>, <a href="struct.html#XMLLangAttribute"><span class="attr-name">‘xml:lang’</span></a>, <a href="struct.html#XMLSpaceAttribute"><span class="attr-name">‘xml:space’</span></a></span></li><li><a href="#feDistantLightAzimuthAttribute"><span class="attr-name">‘azimuth’</span></a></li><li><a href="#feDistantLightElevationAttribute"><span class="attr-name">‘elevation’</span></a></li></ul></dd><dt>DOM Interfaces:</dt><dd><ul class="no-bullets"><li><a class="idlinterface" href="#InterfaceSVGFEDistantLightElement">SVGFEDistantLightElement</a></li></ul></dd></dl></div>
1135 <div class="adef-list">
1136 <p><em>Attribute definitions:</em></p>
1137 <dl><dt id="feDistantLightAzimuthAttribute"><span class="adef">azimuth</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></em>"</dt><dd>Direction angle for the light source on the XY plane (clockwise), in
1138 degrees from the x axis.<br/>
1139 The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feDistantLightAzimuthAttribute"><span class="attr-name">‘azimuth’</span></a> is <span class="attr-value">0</span>.<br/>
1140 <span class="anim-target">Animatable: yes.</span></dd><dt id="feDistantLightElevationAttribute"><span class="adef">elevation</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></em>"</dt><dd>Direction angle for the light source from the XY plane towards the Z-axis, in degrees.
1141 Note that the positive Z-axis points towards the viewer.<br/>
1142 The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feDistantLightElevationAttribute"><span class="attr-name">‘elevation’</span></a> is <span class="attr-value">0</span>.<br/>
1143 <span class="anim-target">Animatable: yes.</span></dd></dl>
1144 </div>
1146 <p>
1147 The following diagram illustrates the angles which <a href="#feDistantLightAzimuthAttribute"><span class="attr-name">‘azimuth’</span></a>
1148 and <a href="#feDistantLightElevationAttribute"><span class="attr-name">‘elevation’</span></a> represent in an XYZ coordinate system.
1149 </p>
1150 <img src="examples/azimuth-elevation.png" alt="Angles which azimuth and elevation represent" width="480" height="360"/>
1153 <h3 id="fePointLightElement">9.3 Light source <span class="element-name">‘fePointLight’</span></h3>
1155 <div class="element-summary"><div class="element-summary-name"><span class="element-name">‘fePointLight’</span></div><dl><dt>Categories:</dt><dd><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermLightSourceElement">Light source element</a></dd><dt>Content model:</dt><dd>Any number of the following elements, in any order:
1156 <ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#AnimateElement"><span class="element-name">‘animate’</span></a></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#SetElement"><span class="element-name">‘set’</span></a></li></ul></dd><dt>Attributes:</dt><dd><ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermCoreAttributes">core attributes</a><span class="expanding"> — <a href="struct.html#IDAttribute"><span class="attr-name">‘id’</span></a>, <a href="struct.html#XMLBaseAttribute"><span class="attr-name">‘xml:base’</span></a>, <a href="struct.html#XMLLangAttribute"><span class="attr-name">‘xml:lang’</span></a>, <a href="struct.html#XMLSpaceAttribute"><span class="attr-name">‘xml:space’</span></a></span></li><li><a href="#fePointLightXAttribute"><span class="attr-name">‘x’</span></a></li><li><a href="#fePointLightYAttribute"><span class="attr-name">‘y’</span></a></li><li><a href="#fePointLightZAttribute"><span class="attr-name">‘z’</span></a></li></ul></dd><dt>DOM Interfaces:</dt><dd><ul class="no-bullets"><li><a class="idlinterface" href="#InterfaceSVGFEPointLightElement">SVGFEPointLightElement</a></li></ul></dd></dl></div>
1158 <div class="adef-list">
1159 <p><em>Attribute definitions:</em></p>
1160 <dl><dt id="fePointLightXAttribute"><span class="adef">x</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></em>"</dt><dd>X location for the light source in the coordinate system established
1161 by attribute <a href="#FilterElementPrimitiveUnitsAttribute"><span class="attr-name">‘primitiveUnits’</span></a> on the <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
1162 element.<br/>
1163 The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#fePointLightXAttribute"><span class="attr-name">‘x’</span></a> is <span class="attr-value">0</span>.<br/>
1164 <span class="anim-target">Animatable: yes.</span></dd><dt id="fePointLightYAttribute"><span class="adef">y</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></em>"</dt><dd>Y location for the light source in the coordinate system established
1165 by attribute <a href="#FilterElementPrimitiveUnitsAttribute"><span class="attr-name">‘primitiveUnits’</span></a> on the <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
1166 element.<br/>
1167 The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#fePointLightYAttribute"><span class="attr-name">‘y’</span></a> is <span class="attr-value">0</span>.<br/>
1168 <span class="anim-target">Animatable: yes.</span></dd><dt id="fePointLightZAttribute"><span class="adef">z</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></em>"</dt><dd>Z location for the light source in the coordinate system established
1169 by attribute <a href="#FilterElementPrimitiveUnitsAttribute"><span class="attr-name">‘primitiveUnits’</span></a> on the <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
1170 element, assuming that, in the <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/coords.html#InitialCoordinateSystem"><span class="svg-term">initial coordinate system</span></a>
1171 , the positive Z-axis comes out towards the person viewing the content
1172 and assuming that one unit along the Z-axis equals <a href="http://www.w3.org/TR/SVG11/coords.html#Units_viewport_percentage">one unit in X and Y</a>.<br/>
1173 The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#fePointLightZAttribute"><span class="attr-name">‘z’</span></a> is <span class="attr-value">0</span>.<br/>
1174 <span class="anim-target">Animatable: yes.</span></dd></dl>
1175 </div>
1177 <h3 id="feSpotLightElement">9.4 Light source <span class="element-name">‘feSpotLight’</span></h3>
1179 <div class="element-summary"><div class="element-summary-name"><span class="element-name">‘feSpotLight’</span></div><dl><dt>Categories:</dt><dd><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermLightSourceElement">Light source element</a></dd><dt>Content model:</dt><dd>Any number of the following elements, in any order:
1180 <ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#AnimateElement"><span class="element-name">‘animate’</span></a></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#SetElement"><span class="element-name">‘set’</span></a></li></ul></dd><dt>Attributes:</dt><dd><ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermCoreAttributes">core attributes</a><span class="expanding"> — <a href="struct.html#IDAttribute"><span class="attr-name">‘id’</span></a>, <a href="struct.html#XMLBaseAttribute"><span class="attr-name">‘xml:base’</span></a>, <a href="struct.html#XMLLangAttribute"><span class="attr-name">‘xml:lang’</span></a>, <a href="struct.html#XMLSpaceAttribute"><span class="attr-name">‘xml:space’</span></a></span></li><li><a href="#feSpotLightXAttribute"><span class="attr-name">‘x’</span></a></li><li><a href="#feSpotLightYAttribute"><span class="attr-name">‘y’</span></a></li><li><a href="#feSpotLightZAttribute"><span class="attr-name">‘z’</span></a></li><li><a href="#feSpotLightPointsAtXAttribute"><span class="attr-name">‘pointsAtX’</span></a></li><li><a href="#feSpotLightPointsAtYAttribute"><span class="attr-name">‘pointsAtY’</span></a></li><li><a href="#feSpotLightPointsAtZAttribute"><span class="attr-name">‘pointsAtZ’</span></a></li><li><a href="#feSpotLightSpecularExponentAttribute"><span class="attr-name">‘specularExponent’</span></a></li><li><a href="#feSpotLightLimitingConeAngleAttribute"><span class="attr-name">‘limitingConeAngle’</span></a></li></ul></dd><dt>DOM Interfaces:</dt><dd><ul class="no-bullets"><li><a class="idlinterface" href="#InterfaceSVGFESpotLightElement">SVGFESpotLightElement</a></li></ul></dd></dl></div>
1183 <div class="adef-list">
1184 <p><em>Attribute definitions:</em></p>
1185 <dl><dt id="feSpotLightXAttribute"><span class="adef">x</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></em>"</dt><dd>X location for the light source in the coordinate system established
1186 by attribute <a href="#FilterElementPrimitiveUnitsAttribute"><span class="attr-name">‘primitiveUnits’</span></a> on the <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
1187 element.<br/>
1188 The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feSpotLightXAttribute"><span class="attr-name">‘x’</span></a> is <span class="attr-value">0</span>.<br/>
1189 <span class="anim-target">Animatable: yes.</span></dd><dt id="feSpotLightYAttribute"><span class="adef">y</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></em>"</dt><dd>Y location for the light source in the coordinate system established
1190 by attribute <a href="#FilterElementPrimitiveUnitsAttribute"><span class="attr-name">‘primitiveUnits’</span></a> on the <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
1191 element.<br/>
1192 The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feSpotLightYAttribute"><span class="attr-name">‘y’</span></a> is <span class="attr-value">0</span>.<br/>
1193 <span class="anim-target">Animatable: yes.</span></dd><dt id="feSpotLightZAttribute"><span class="adef">z</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></em>"</dt><dd>Z location for the light source in the coordinate system established
1194 by attribute <a href="#FilterElementPrimitiveUnitsAttribute"><span class="attr-name">‘primitiveUnits’</span></a> on the <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
1195 element, assuming that, in the <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/coords.html#InitialCoordinateSystem"><span class="svg-term">initial coordinate system</span></a>
1196 , the positive Z-axis comes out towards the person viewing the content
1197 and assuming that one unit along the Z-axis equals <a href="http://www.w3.org/TR/SVG11/coords.html#Units_viewport_percentage">one unit in X and Y</a>.<br/>
1198 The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feSpotLightZAttribute"><span class="attr-name">‘z’</span></a> is <span class="attr-value">0</span>.<br/>
1199 <span class="anim-target">Animatable: yes.</span></dd><dt id="feSpotLightPointsAtXAttribute"><span class="adef">pointsAtX</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></em>"</dt><dd>X location in the coordinate system established by attribute <a href="#FilterElementPrimitiveUnitsAttribute"><span class="attr-name">‘primitiveUnits’</span></a>
1200 on the <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
1201 element of the point at which the light source is pointing.<br/>
1202 The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feSpotLightPointsAtXAttribute"><span class="attr-name">‘pointsAtX’</span></a> is <span class="attr-value">0</span>.<br/>
1203 <span class="anim-target">Animatable: yes.</span></dd><dt id="feSpotLightPointsAtYAttribute"><span class="adef">pointsAtY</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></em>"</dt><dd>Y location in the coordinate system established by attribute <a href="#FilterElementPrimitiveUnitsAttribute"><span class="attr-name">‘primitiveUnits’</span></a>
1204 on the <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element of the point at which the light source is pointing.<br/>
1205 The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feSpotLightPointsAtYAttribute"><span class="attr-name">‘pointsAtY’</span></a> is <span class="attr-value">0</span>.<br/>
1206 <span class="anim-target">Animatable: yes.</span></dd><dt id="feSpotLightPointsAtZAttribute"><span class="adef">pointsAtZ</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></em>"</dt><dd>Z location in the coordinate system established by the
1207 attribute <a href="#FilterElementPrimitiveUnitsAttribute"><span class="attr-name">‘primitiveUnits’</span></a> on the <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element of
1208 the point at which the light source is pointing, assuming that, in the
1209 <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/coords.html#InitialCoordinateSystem"><span class="svg-term">initial coordinate system</span></a>, the positive Z-axis comes out
1210 towards the person viewing the content and assuming that
1211 one unit along the Z-axis equals
1212 <a href="http://www.w3.org/TR/SVG11/coords.html#Units_viewport_percentage">
1213 one unit in X and Y</a>.<br/>
1214 The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feSpotLightPointsAtZAttribute"><span class="attr-name">‘pointsAtZ’</span></a> is <span class="attr-value">0</span>.<br/>
1215 <span class="anim-target">Animatable: yes.</span></dd><dt id="feSpotLightSpecularExponentAttribute"><span class="adef">specularExponent</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></em>"</dt><dd>Exponent value controlling the focus for the light source.<br/>
1216 The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feSpotLightSpecularExponentAttribute"><span class="attr-name">‘specularExponent’</span></a> is <span class="attr-value">1</span>.<br/>
1217 <span class="anim-target">Animatable: yes.</span></dd><dt id="feSpotLightLimitingConeAngleAttribute"><span class="adef">limitingConeAngle</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></em>"</dt><dd>A limiting cone which restricts the region where the light is
1218 projected. No light is projected outside the cone. <span class="attr-name">limitingConeAngle</span> represents the angle in degrees between
1219 the spot light axis (i.e. the axis between the light source and the
1220 point to which it is pointing at) and the spot light cone. <span class="requirement" id="assert_userAgentLightingConeSmoothing">User agents
1221 should apply a smoothing technique such as anti-aliasing at the
1222 boundary of the cone.</span><br/>
1223 If no value is specified, then no limiting cone will be applied.<br/>
1224 <span class="anim-target">Animatable: yes.</span></dd></dl>
1225 </div>
1228 <h3 id="LightingColorProperty">9.5 The <span class="prop-name">‘lighting-color’</span> property</h3>
1230 <p>The <a href="#LightingColorProperty"><span class="prop-name">‘lighting-color’</span></a> property defines the
1231 color of the light source for <a href="#TermFilterPrimitiveElements"><span class="svg-term">filter primitives</span></a> <a href="#feDiffuseLightingElement"><span class="element-name">‘feDiffuseLighting’</span></a> and <a href="#feSpecularLightingElement"><span class="element-name">‘feSpecularLighting’</span></a>.</p>
1233 <div class="propdef">
1234 <dl><dt><span class="index-def" title="'margin-top'"><a href="#LightingColorProperty"><span class="prop-name">‘lighting-color’</span></a></span></dt><dd>
1235 <table summary="lighting-color property" class="propinfo" cellspacing="0" cellpadding="0"><tbody><tr valign="baseline"><td><em>Value:</em> </td><td>currentColor |<br/>
1236 <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeColor"><color></a>
1237 [<a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeICCColor"><icccolor></a>] |<br/>
1238 <a class="noxref" href="http://www.w3.org/TR/2009/CR-CSS2-20090423/cascade.html#value-def-inherit"><span class="value-inst-inherit noxref">inherit</span></a></td></tr><tr valign="baseline"><td><em>Initial:</em> </td><td>white</td></tr><tr valign="baseline"><td><em>Applies to:</em> </td><td><a href="#feDiffuseLightingElement"><span class="element-name">‘feDiffuseLighting’</span></a> and <a href="#feSpecularLightingElement"><span class="element-name">‘feSpecularLighting’</span></a>
1239 elements</td></tr><tr valign="baseline"><td><em>Inherited:</em> </td><td>no</td></tr><tr valign="baseline"><td><em>Percentages:</em> </td><td>N/A</td></tr><tr valign="baseline"><td><em>Media:</em> </td><td>visual</td></tr><tr valign="baseline"><td><em>Animatable:</em> </td><td>yes</td></tr></tbody></table>
1240 </dd></dl>
1241 </div>
1243 <h2 id="feBlendElement">10 Filter primitive <span class="element-name">‘feBlend’</span></h2>
1245 <div class="element-summary"><div class="element-summary-name"><span class="element-name">‘feBlend’</span></div><dl><dt>Categories:</dt><dd><a href="#TermFilterPrimitiveElements">Filter primitives element</a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermFilterPrimitiveElement">filter primitive element</a></dd><dt>Content model:</dt><dd>Any number of the following elements, in any order:
1246 <ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#AnimateElement"><span class="element-name">‘animate’</span></a></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#SetElement"><span class="element-name">‘set’</span></a></li></ul></dd><dt>Attributes:</dt><dd><ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermCoreAttributes">core attributes</a><span class="expanding"> — <a href="struct.html#IDAttribute"><span class="attr-name">‘id’</span></a>, <a href="struct.html#XMLBaseAttribute"><span class="attr-name">‘xml:base’</span></a>, <a href="struct.html#XMLLangAttribute"><span class="attr-name">‘xml:lang’</span></a>, <a href="struct.html#XMLSpaceAttribute"><span class="attr-name">‘xml:space’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermPresentationAttribute">presentation attributes</a><span class="expanding"> — <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#AlignmentBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘alignment-baseline’">‘alignment-baseline’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#BaselineShiftProperty"><span class="attr-name" title="Presentation attribute for property ‘baseline-shift’">‘baseline-shift’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipProperty"><span class="attr-name" title="Presentation attribute for property ‘clip’">‘clip’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipPathProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-path’">‘clip-path’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-rule’">‘clip-rule’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProperty"><span class="attr-name" title="Presentation attribute for property ‘color’">‘color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation’">‘color-interpolation’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationFiltersProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation-filters’">‘color-interpolation-filters’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProfileProperty"><span class="attr-name" title="Presentation attribute for property ‘color-profile’">‘color-profile’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘color-rendering’">‘color-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#CursorProperty"><span class="attr-name" title="Presentation attribute for property ‘cursor’">‘cursor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DirectionProperty"><span class="attr-name" title="Presentation attribute for property ‘direction’">‘direction’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#DisplayProperty"><span class="attr-name" title="Presentation attribute for property ‘display’">‘display’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DominantBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘dominant-baseline’">‘dominant-baseline’</span></a>, <a href="#EnableBackgroundProperty"><span class="attr-name" title="Presentation attribute for property ‘enable-background’">‘enable-background’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillProperty"><span class="attr-name" title="Presentation attribute for property ‘fill’">‘fill’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-opacity’">‘fill-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-rule’">‘fill-rule’</span></a>, <a href="#FilterProperty"><span class="attr-name" title="Presentation attribute for property ‘filter’">‘filter’</span></a>, <a href="#FloodColorProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-color’">‘flood-color’</span></a>, <a href="#FloodOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-opacity’">‘flood-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontFamilyProperty"><span class="attr-name" title="Presentation attribute for property ‘font-family’">‘font-family’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size’">‘font-size’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeAdjustProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size-adjust’">‘font-size-adjust’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStretchProperty"><span class="attr-name" title="Presentation attribute for property ‘font-stretch’">‘font-stretch’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStyleProperty"><span class="attr-name" title="Presentation attribute for property ‘font-style’">‘font-style’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontVariantProperty"><span class="attr-name" title="Presentation attribute for property ‘font-variant’">‘font-variant’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontWeightProperty"><span class="attr-name" title="Presentation attribute for property ‘font-weight’">‘font-weight’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationHorizontalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-horizontal’">‘glyph-orientation-horizontal’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationVerticalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-vertical’">‘glyph-orientation-vertical’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ImageRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘image-rendering’">‘image-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#KerningProperty"><span class="attr-name" title="Presentation attribute for property ‘kerning’">‘kerning’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#LetterSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘letter-spacing’">‘letter-spacing’</span></a>, <a href="#LightingColorProperty"><span class="attr-name" title="Presentation attribute for property ‘lighting-color’">‘lighting-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerEndProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-end’">‘marker-end’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerMidProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-mid’">‘marker-mid’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerStartProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-start’">‘marker-start’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#MaskProperty"><span class="attr-name" title="Presentation attribute for property ‘mask’">‘mask’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘opacity’">‘opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OverflowProperty"><span class="attr-name" title="Presentation attribute for property ‘overflow’">‘overflow’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#PointerEventsProperty"><span class="attr-name" title="Presentation attribute for property ‘pointer-events’">‘pointer-events’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ShapeRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘shape-rendering’">‘shape-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopColorProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-color’">‘stop-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-opacity’">‘stop-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke’">‘stroke’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDasharrayProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dasharray’">‘stroke-dasharray’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDashoffsetProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dashoffset’">‘stroke-dashoffset’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinecapProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linecap’">‘stroke-linecap’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinejoinProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linejoin’">‘stroke-linejoin’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeMiterlimitProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-miterlimit’">‘stroke-miterlimit’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-opacity’">‘stroke-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeWidthProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-width’">‘stroke-width’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextAnchorProperty"><span class="attr-name" title="Presentation attribute for property ‘text-anchor’">‘text-anchor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextDecorationProperty"><span class="attr-name" title="Presentation attribute for property ‘text-decoration’">‘text-decoration’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#TextRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘text-rendering’">‘text-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#UnicodeBidiProperty"><span class="attr-name" title="Presentation attribute for property ‘unicode-bidi’">‘unicode-bidi’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#VisibilityProperty"><span class="attr-name" title="Presentation attribute for property ‘visibility’">‘visibility’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WordSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘word-spacing’">‘word-spacing’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WritingModeProperty"><span class="attr-name" title="Presentation attribute for property ‘writing-mode’">‘writing-mode’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermFilterPrimitiveAttributes">filter primitive attributes</a><span class="expanding"> — <a href="filters.html#FilterPrimitiveXAttribute"><span class="attr-name">‘x’</span></a>, <a href="filters.html#FilterPrimitiveYAttribute"><span class="attr-name">‘y’</span></a>, <a href="filters.html#FilterPrimitiveWidthAttribute"><span class="attr-name">‘width’</span></a>, <a href="filters.html#FilterPrimitiveHeightAttribute"><span class="attr-name">‘height’</span></a>, <a href="filters.html#FilterPrimitiveResultAttribute"><span class="attr-name">‘result’</span></a></span></li><li><a href="styling.html#ClassAttribute"><span class="attr-name">‘class’</span></a></li><li><a href="styling.html#StyleAttribute"><span class="attr-name">‘style’</span></a></li><li><a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a></li><li><a href="#feBlendIn2Attribute"><span class="attr-name">‘in2’</span></a></li><li><a href="#feBlendModeAttribute"><span class="attr-name">‘mode’</span></a></li></ul></dd><dt>DOM Interfaces:</dt><dd><ul class="no-bullets"><li><a class="idlinterface" href="#InterfaceSVGFEBlendElement">SVGFEBlendElement</a></li></ul></dd></dl></div>
1249 <p>This filter composites two objects together using commonly used imaging
1250 software blending modes. It performs a pixel-wise combination of two input
1251 images.</p>
1253 <div class="adef-list">
1254 <p><em>Attribute definitions:</em></p>
1255 <dl><dt id="feBlendModeAttribute"><span class="adef">mode</span> = "<em>normal | multiply | screen | darken |
1256 lighten</em>"</dt><dd>One of the image blending modes (see <a href="#BlendingTable">table</a> below). The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feBlendModeAttribute"><span class="attr-name">‘mode’</span></a> is <span class="attr-value">normal</span>.<br/>
1257 <span class="anim-target">Animatable: yes.</span></dd><dt id="feBlendIn2Attribute"><span class="adef">in2</span> = "<em>(see <a href="#FilterPrimitiveInAttribute"><span class="attr-name">in</span></a>
1258 attribute)</em>"</dt><dd>The second input image to the blending operation. This attribute can
1259 take on the same values as the <a href="#FilterPrimitiveInAttribute"><span class="attr-name">in</span></a> attribute.<br/>
1260 <span class="anim-target">Animatable: yes.</span></dd></dl>
1261 </div>
1263 <p>For all feBlend modes, the result opacity is computed as follows:</p>
1264 <pre>qr = 1 - (1-qa)*(1-qb)</pre>
1266 <p>For the compositing formulas below, the following definitions apply:</p>
1267 <pre>image A = in
1268 image B = in2
1269 cr = Result color (RGB) - premultiplied
1270 qa = Opacity value at a given pixel for image A
1271 qb = Opacity value at a given pixel for image B
1272 ca = Color (RGB) at a given pixel for image A - premultiplied
1273 cb = Color (RGB) at a given pixel for image B - premultiplied </pre>
1275 <p id="BlendingTable">The following table
1276 provides the list of available image blending modes:</p>
1278 <div class="note-editor">
1279 ED: make table look nicer</div>
1281 <table summary="blending modes" width="500" border="1"><tbody><tr><td>Image Blending Mode</td><td>Formula for computing result color</td></tr><tr><td>normal</td><td>cr = (1 - qa) * cb + ca</td></tr><tr><td>multiply</td><td>cr = (1-qa)*cb + (1-qb)*ca + ca*cb</td></tr><tr><td>screen</td><td>cr = cb + ca - ca * cb</td></tr><tr><td>darken</td><td>cr = Min ((1 - qa) * cb + ca, (1 - qb) * ca + cb)</td></tr><tr><td>lighten</td><td>cr = Max ((1 - qa) * cb + ca, (1 - qb) * ca + cb)</td></tr></tbody></table>
1283 <p>The <span class="attr-value">'normal'</span> blend mode is equivalent to <a href="#feCompositeOperatorAttribute"><span class="attr-value">operator="over"</span></a> on the <a href="#feCompositeElement"><span class="element-name">‘feComposite’</span></a>
1284 filter primitive, matches the blending method used by <a href="#feMergeElement"><span class="element-name">‘feMerge’</span></a> and matches
1285 the <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending"><span class="svg-term">simple alpha compositing</span></a> technique used in SVG for all compositing outside of filter effects.</p>
1288 <pre class="xml"><?xml version="1.0"?>
1289 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
1290 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
1291 <svg width="5cm" height="5cm" viewBox="0 0 500 500"
1292 xmlns="http://www.w3.org/2000/svg" version="1.1">
1293 <title>Example feBlend - Examples of feBlend modes</title>
1294 <desc>Five text strings blended into a gradient,
1295 with one text string for each of the five feBlend modes.</desc>
1296 <defs>
1297 <linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
1298 x1="100" y1="0" x2="300" y2="0">
1299 <stop offset="0" stop-color="#000000" />
1300 <stop offset=".33" stop-color="#ffffff" />
1301 <stop offset=".67" stop-color="#ff0000" />
1302 <stop offset="1" stop-color="#808080" />
1303 </linearGradient>
1304 <filter id="Normal">
1305 <feBlend mode="normal" in2="BackgroundImage" in="SourceGraphic"/>
1306 </filter>
1307 <filter id="Multiply">
1308 <feBlend mode="multiply" in2="BackgroundImage" in="SourceGraphic"/>
1309 </filter>
1310 <filter id="Screen">
1311 <feBlend mode="screen" in2="BackgroundImage" in="SourceGraphic"/>
1312 </filter>
1313 <filter id="Darken">
1314 <feBlend mode="darken" in2="BackgroundImage" in="SourceGraphic"/>
1315 </filter>
1316 <filter id="Lighten">
1317 <feBlend mode="lighten" in2="BackgroundImage" in="SourceGraphic"/>
1318 </filter>
1319 </defs>
1320 <rect fill="none" stroke="blue"
1321 x="1" y="1" width="498" height="498"/>
1322 <g enable-background="new" >
1323 <rect x="100" y="20" width="300" height="460" fill="url(#MyGradient)" />
1324 <g font-family="Verdana" font-size="75" fill="#888888" fill-opacity=".6" >
1325 <text x="50" y="90" filter="url(#Normal)" >Normal</text>
1326 <text x="50" y="180" filter="url(#Multiply)" >Multiply</text>
1327 <text x="50" y="270" filter="url(#Screen)" >Screen</text>
1328 <text x="50" y="360" filter="url(#Darken)" >Darken</text>
1329 <text x="50" y="450" filter="url(#Lighten)" >Lighten</text>
1330 </g>
1331 </g>
1332 </svg></pre><table summary="Example "><caption align="bottom">Example </caption><tr><td><img alt="Example " src="examples/feBlend.png"/></td></tr></table><p class="view-as-svg"><a href="examples/feBlend.svg">View this example as SVG (SVG-enabled browsers only)</a></p>
1334 <h2 id="feColorMatrixElement">11 Filter primitive <span class="element-name">‘feColorMatrix’</span></h2>
1336 <div class="element-summary"><div class="element-summary-name"><span class="element-name">‘feColorMatrix’</span></div><dl><dt>Categories:</dt><dd><a href="#TermFilterPrimitiveElements">Filter primitives element</a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermFilterPrimitiveElement">filter primitive element</a></dd><dt>Content model:</dt><dd>Any number of the following elements, in any order:
1337 <ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#AnimateElement"><span class="element-name">‘animate’</span></a></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#SetElement"><span class="element-name">‘set’</span></a></li></ul></dd><dt>Attributes:</dt><dd><ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermCoreAttributes">core attributes</a><span class="expanding"> — <a href="struct.html#IDAttribute"><span class="attr-name">‘id’</span></a>, <a href="struct.html#XMLBaseAttribute"><span class="attr-name">‘xml:base’</span></a>, <a href="struct.html#XMLLangAttribute"><span class="attr-name">‘xml:lang’</span></a>, <a href="struct.html#XMLSpaceAttribute"><span class="attr-name">‘xml:space’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermPresentationAttribute">presentation attributes</a><span class="expanding"> — <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#AlignmentBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘alignment-baseline’">‘alignment-baseline’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#BaselineShiftProperty"><span class="attr-name" title="Presentation attribute for property ‘baseline-shift’">‘baseline-shift’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipProperty"><span class="attr-name" title="Presentation attribute for property ‘clip’">‘clip’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipPathProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-path’">‘clip-path’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-rule’">‘clip-rule’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProperty"><span class="attr-name" title="Presentation attribute for property ‘color’">‘color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation’">‘color-interpolation’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationFiltersProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation-filters’">‘color-interpolation-filters’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProfileProperty"><span class="attr-name" title="Presentation attribute for property ‘color-profile’">‘color-profile’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘color-rendering’">‘color-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#CursorProperty"><span class="attr-name" title="Presentation attribute for property ‘cursor’">‘cursor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DirectionProperty"><span class="attr-name" title="Presentation attribute for property ‘direction’">‘direction’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#DisplayProperty"><span class="attr-name" title="Presentation attribute for property ‘display’">‘display’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DominantBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘dominant-baseline’">‘dominant-baseline’</span></a>, <a href="#EnableBackgroundProperty"><span class="attr-name" title="Presentation attribute for property ‘enable-background’">‘enable-background’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillProperty"><span class="attr-name" title="Presentation attribute for property ‘fill’">‘fill’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-opacity’">‘fill-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-rule’">‘fill-rule’</span></a>, <a href="#FilterProperty"><span class="attr-name" title="Presentation attribute for property ‘filter’">‘filter’</span></a>, <a href="#FloodColorProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-color’">‘flood-color’</span></a>, <a href="#FloodOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-opacity’">‘flood-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontFamilyProperty"><span class="attr-name" title="Presentation attribute for property ‘font-family’">‘font-family’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size’">‘font-size’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeAdjustProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size-adjust’">‘font-size-adjust’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStretchProperty"><span class="attr-name" title="Presentation attribute for property ‘font-stretch’">‘font-stretch’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStyleProperty"><span class="attr-name" title="Presentation attribute for property ‘font-style’">‘font-style’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontVariantProperty"><span class="attr-name" title="Presentation attribute for property ‘font-variant’">‘font-variant’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontWeightProperty"><span class="attr-name" title="Presentation attribute for property ‘font-weight’">‘font-weight’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationHorizontalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-horizontal’">‘glyph-orientation-horizontal’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationVerticalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-vertical’">‘glyph-orientation-vertical’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ImageRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘image-rendering’">‘image-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#KerningProperty"><span class="attr-name" title="Presentation attribute for property ‘kerning’">‘kerning’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#LetterSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘letter-spacing’">‘letter-spacing’</span></a>, <a href="#LightingColorProperty"><span class="attr-name" title="Presentation attribute for property ‘lighting-color’">‘lighting-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerEndProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-end’">‘marker-end’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerMidProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-mid’">‘marker-mid’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerStartProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-start’">‘marker-start’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#MaskProperty"><span class="attr-name" title="Presentation attribute for property ‘mask’">‘mask’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘opacity’">‘opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OverflowProperty"><span class="attr-name" title="Presentation attribute for property ‘overflow’">‘overflow’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#PointerEventsProperty"><span class="attr-name" title="Presentation attribute for property ‘pointer-events’">‘pointer-events’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ShapeRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘shape-rendering’">‘shape-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopColorProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-color’">‘stop-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-opacity’">‘stop-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke’">‘stroke’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDasharrayProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dasharray’">‘stroke-dasharray’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDashoffsetProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dashoffset’">‘stroke-dashoffset’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinecapProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linecap’">‘stroke-linecap’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinejoinProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linejoin’">‘stroke-linejoin’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeMiterlimitProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-miterlimit’">‘stroke-miterlimit’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-opacity’">‘stroke-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeWidthProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-width’">‘stroke-width’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextAnchorProperty"><span class="attr-name" title="Presentation attribute for property ‘text-anchor’">‘text-anchor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextDecorationProperty"><span class="attr-name" title="Presentation attribute for property ‘text-decoration’">‘text-decoration’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#TextRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘text-rendering’">‘text-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#UnicodeBidiProperty"><span class="attr-name" title="Presentation attribute for property ‘unicode-bidi’">‘unicode-bidi’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#VisibilityProperty"><span class="attr-name" title="Presentation attribute for property ‘visibility’">‘visibility’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WordSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘word-spacing’">‘word-spacing’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WritingModeProperty"><span class="attr-name" title="Presentation attribute for property ‘writing-mode’">‘writing-mode’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermFilterPrimitiveAttributes">filter primitive attributes</a><span class="expanding"> — <a href="filters.html#FilterPrimitiveXAttribute"><span class="attr-name">‘x’</span></a>, <a href="filters.html#FilterPrimitiveYAttribute"><span class="attr-name">‘y’</span></a>, <a href="filters.html#FilterPrimitiveWidthAttribute"><span class="attr-name">‘width’</span></a>, <a href="filters.html#FilterPrimitiveHeightAttribute"><span class="attr-name">‘height’</span></a>, <a href="filters.html#FilterPrimitiveResultAttribute"><span class="attr-name">‘result’</span></a></span></li><li><a href="styling.html#ClassAttribute"><span class="attr-name">‘class’</span></a></li><li><a href="styling.html#StyleAttribute"><span class="attr-name">‘style’</span></a></li><li><a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a></li><li><a href="#feColorMatrixTypeAttribute"><span class="attr-name">‘type’</span></a></li><li><a href="#feColorMatrixValuesAttribute"><span class="attr-name">‘values’</span></a></li></ul></dd><dt>DOM Interfaces:</dt><dd><ul class="no-bullets"><li><a class="idlinterface" href="#InterfaceSVGFEColorMatrixElement">SVGFEColorMatrixElement</a></li></ul></dd></dl></div>
1339 <p>This filter applies a matrix transformation:</p>
1340 <object data="mathml/feColorMatrix00.mml" type="application/mathml+xml" width="100%" height="140">
1341 <pre>| R' | | a00 a01 a02 a03 a04 | | R |
1342 | G' | | a10 a11 a12 a13 a14 | | G |
1343 | B' | = | a20 a21 a22 a23 a24 | * | B |
1344 | A' | | a30 a31 a32 a33 a34 | | A |
1345 | 1 | | 0 0 0 0 1 | | 1 |</pre>
1346 </object>
1348 <p>on the RGBA color and alpha values of every pixel on the input graphics to
1349 produce a result with a new set of RGBA color and alpha values.</p>
1351 <p>The calculations are performed on non-premultiplied color values. If the
1352 input graphics consists of premultiplied color values, those values are
1353 automatically converted into non-premultiplied color values for this
1354 operation.</p>
1356 <p>These matrices often perform an identity mapping in the alpha channel. If
1357 that is the case, an implementation can avoid the costly undoing and redoing
1358 of the premultiplication for all pixels with A = 1.</p>
1360 <div class="adef-list">
1361 <p><em>Attribute definitions:</em></p>
1362 <dl><dt id="feColorMatrixTypeAttribute"><span class="adef">type</span> =
1363 "<em>matrix | saturate | hueRotate | luminanceToAlpha</em>"</dt><dd>Indicates the type of matrix operation. The keyword <span class="attr-name">matrix</span> indicates that a full 5x4 matrix of
1364 values will be provided. The other keywords represent convenience
1365 shortcuts to allow commonly used color operations to be performed
1366 without specifying a complete matrix.
1367 The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feComponentTransferTypeAttribute"><span class="attr-name">‘type’</span></a> is <span class="attr-value">matrix</span>.
1368 <br/>
1369 <span class="anim-target">Animatable: yes.</span></dd><dt id="feColorMatrixValuesAttribute"><span class="adef">values</span> =
1370 "<em>list of <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a>s</em>"</dt><dd>The contents of <span class="attr-name">values</span> depends on the
1371 value of attribute <a href="#feColorMatrixTypeAttribute"><span class="attr-name">type</span></a>:
1372 <ul><li>For <span class="attr-value">type="matrix"</span>, <span class="attr-name">values</span> is a list of 20 matrix values (a00
1373 a01 a02 a03 a04 a10 a11 ... a34), separated by whitespace and/or a
1374 comma. For example, the identity matrix could be expressed as:
1375 <pre>type="matrix"
1376 values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"</pre>
1377 </li><li>For <span class="attr-value">type="saturate"</span>, <span class="attr-name">values</span> is a single real number value (0 to
1378 1). A <span class="attr-value">saturate</span> operation is
1379 equivalent to the following matrix operation:
1380 <p>
1381 <object data="mathml/feColorMatrix01.mml" type="application/mathml+xml" width="100%" height="130">
1382 <pre>| R' | | (0.2127 + 0.7873s) (0.7152 - 0.7152s) (0.0722 - 0.0722s) 0 0 | | R |
1383 | G' | | (0.2127 - 0.2127s) (0.7152 + 0.2848s) (0.0722 - 0.0722s) 0 0 | | G |
1384 | B' | = | (0.2127 - 0.2127s) (0.7152 - 0.7152s) (0.0722 + 0.9278s) 0 0 | * | B |
1385 | A' | | 0 0 0 1 0 | | A |
1386 | 1 | | 0 0 0 0 1 | | 1 |</pre>
1387 </object>
1388 </p>
1389 </li><li>For <span class="attr-value">type="hueRotate"</span>, <span class="attr-name">values</span> is a single one real number value
1390 (degrees). A <span class="attr-value">hueRotate</span> operation is
1391 equivalent to the following matrix operation:
1392 <p>
1393 <object data="mathml/feColorMatrix02.mml" type="application/mathml+xml" width="100%" height="130">
1394 <pre>| R' | | a00 a01 a02 0 0 | | R |
1395 | G' | | a10 a11 a12 0 0 | | G |
1396 | B' | = | a20 a21 a22 0 0 | * | B |
1397 | A' | | 0 0 0 1 0 | | A |
1398 | 1 | | 0 0 0 0 1 | | 1 |</pre>
1399 </object>
1400 </p>
1402 where the terms a00, a01, etc. are calculated as follows:
1403 <p>
1404 <object data="mathml/feColorMatrix03.mml" type="application/mathml+xml" width="100%" height="230">
1405 <pre>| a00 a01 a02 | [0.2127 0.7152 0.0722]
1406 | a10 a11 a12 | = [0.2127 0.7152 0.0722] +
1407 | a20 a21 a22 | [0.2127 0.7152 0.0722]
1409 [ 0.7873 -0.7152 -0.0722]
1410 cos(hueRotate value) * [-0.2127 0.2848 -0.0722] +
1411 [-0.2127 -0.7152 0.9278]
1413 [-0.2127 -0.7152 0.9278]
1414 sin(hueRotate value) * [ 0.143 0.140 -0.283 ]
1415 [-0.7873 0.7152 0.0722]</pre>
1416 </object>
1417 </p>
1418 Thus, the upper left term of the hue matrix turns out to be:
1419 <p>
1420 <object data="mathml/feColorMatrix04.mml" type="application/mathml+xml" width="100%" height="30">
1421 <pre>.2127 + cos(hueRotate value) * 0.7873 - sin(hueRotate value) * 0.2127</pre>
1422 </object>
1423 </p>
1425 </li><li>For <span class="attr-value">type="luminanceToAlpha"</span>,
1426 <span class="attr-name">values</span> is not applicable. A <span class="attr-value">luminanceToAlpha</span> operation is equivalent
1427 to the following matrix operation:
1428 <p>
1429 <object data="mathml/feColorMatrix05.mml" type="application/mathml+xml" width="100%" height="130">
1430 <pre> | R' | | 0 0 0 0 0 | | R |
1431 | G' | | 0 0 0 0 0 | | G |
1432 | B' | = | 0 0 0 0 0 | * | B |
1433 | A' | | 0.2127 0.7152 0.0722 0 0 | | A |
1434 | 1 | | 0 0 0 0 1 | | 1 |</pre>
1435 </object>
1436 </p>
1437 </li></ul>
1438 If the attribute is not specified, then the default behavior depends on
1439 the value of attribute <a href="#feColorMatrixTypeAttribute"><span class="attr-name">‘type’</span></a>. If <span class="attr-value">type="matrix"</span>, then this attribute defaults
1440 to the identity matrix. If <span class="attr-value">type="saturate"</span>, then this attribute defaults
1441 to the value <span class="attr-value">1</span>, which results in the
1442 identity matrix. If <span class="attr-value">type="hueRotate"</span>,
1443 then this attribute defaults to the value <span class="attr-value">0</span>, which results in the identity matrix.<br/>
1444 <span class="anim-target">Animatable: yes.</span> </dd></dl>
1445 </div>
1447 <pre class="xml"><?xml version="1.0"?>
1448 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
1449 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
1450 <svg width="8cm" height="5cm" viewBox="0 0 800 500"
1451 xmlns="http://www.w3.org/2000/svg" version="1.1">
1452 <title>Example feColorMatrix - Examples of feColorMatrix operations</title>
1453 <desc>Five text strings showing the effects of feColorMatrix:
1454 an unfiltered text string acting as a reference,
1455 use of the feColorMatrix matrix option to convert to grayscale,
1456 use of the feColorMatrix saturate option,
1457 use of the feColorMatrix hueRotate option,
1458 and use of the feColorMatrix luminanceToAlpha option.</desc>
1459 <defs>
1460 <linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
1461 x1="100" y1="0" x2="500" y2="0">
1462 <stop offset="0" stop-color="#ff00ff" />
1463 <stop offset=".33" stop-color="#88ff88" />
1464 <stop offset=".67" stop-color="#2020ff" />
1465 <stop offset="1" stop-color="#d00000" />
1466 </linearGradient>
1467 <filter id="Matrix" filterUnits="objectBoundingBox"
1468 x="0%" y="0%" width="100%" height="100%">
1469 <feColorMatrix type="matrix" in="SourceGraphic"
1470 values=".33 .33 .33 0 0
1471 .33 .33 .33 0 0
1472 .33 .33 .33 0 0
1473 .33 .33 .33 0 0"/>
1474 </filter>
1475 <filter id="Saturate40" filterUnits="objectBoundingBox"
1476 x="0%" y="0%" width="100%" height="100%">
1477 <feColorMatrix type="saturate" in="SourceGraphic" values="0.4"/>
1478 </filter>
1479 <filter id="HueRotate90" filterUnits="objectBoundingBox"
1480 x="0%" y="0%" width="100%" height="100%">
1481 <feColorMatrix type="hueRotate" in="SourceGraphic" values="90"/>
1482 </filter>
1483 <filter id="LuminanceToAlpha" filterUnits="objectBoundingBox"
1484 x="0%" y="0%" width="100%" height="100%">
1485 <feColorMatrix type="luminanceToAlpha" in="SourceGraphic" result="a"/>
1486 <feComposite in="SourceGraphic" in2="a" operator="in" />
1487 </filter>
1488 </defs>
1489 <rect fill="none" stroke="blue"
1490 x="1" y="1" width="798" height="498"/>
1491 <g font-family="Verdana" font-size="75"
1492 font-weight="bold" fill="url(#MyGradient)" >
1493 <rect x="100" y="0" width="500" height="20" />
1494 <text x="100" y="90">Unfiltered</text>
1495 <text x="100" y="190" filter="url(#Matrix)" >Matrix</text>
1496 <text x="100" y="290" filter="url(#Saturate40)" >Saturate</text>
1497 <text x="100" y="390" filter="url(#HueRotate90)" >HueRotate</text>
1498 <text x="100" y="490" filter="url(#LuminanceToAlpha)" >Luminance</text>
1499 </g>
1500 </svg></pre><table summary="Example "><caption align="bottom">Example </caption><tr><td><img alt="Example " src="examples/feColorMatrix.png"/></td></tr></table><p class="view-as-svg"><a href="examples/feColorMatrix.svg">View this example as SVG (SVG-enabled browsers only)</a></p>
1502 <h2 id="feComponentTransferElement">12 Filter primitive <span class="element-name">‘feComponentTransfer’</span></h2>
1504 <div class="element-summary"><div class="element-summary-name"><span class="element-name">‘feComponentTransfer’</span></div><dl><dt>Categories:</dt><dd><a href="#TermFilterPrimitiveElements">Filter primitives element</a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermFilterPrimitiveElement">filter primitive element</a></dd><dt>Content model:</dt><dd>Any number of the following elements, in any order:
1505 <ul class="no-bullets"><li><a href=""><span class="element-name">‘feFuncA’</span></a></li><li><a href=""><span class="element-name">‘feFuncB’</span></a></li><li><a href=""><span class="element-name">‘feFuncG’</span></a></li><li><a href=""><span class="element-name">‘feFuncR’</span></a></li></ul></dd><dt>Attributes:</dt><dd><ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermCoreAttributes">core attributes</a><span class="expanding"> — <a href="struct.html#IDAttribute"><span class="attr-name">‘id’</span></a>, <a href="struct.html#XMLBaseAttribute"><span class="attr-name">‘xml:base’</span></a>, <a href="struct.html#XMLLangAttribute"><span class="attr-name">‘xml:lang’</span></a>, <a href="struct.html#XMLSpaceAttribute"><span class="attr-name">‘xml:space’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermPresentationAttribute">presentation attributes</a><span class="expanding"> — <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#AlignmentBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘alignment-baseline’">‘alignment-baseline’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#BaselineShiftProperty"><span class="attr-name" title="Presentation attribute for property ‘baseline-shift’">‘baseline-shift’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipProperty"><span class="attr-name" title="Presentation attribute for property ‘clip’">‘clip’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipPathProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-path’">‘clip-path’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-rule’">‘clip-rule’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProperty"><span class="attr-name" title="Presentation attribute for property ‘color’">‘color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation’">‘color-interpolation’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationFiltersProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation-filters’">‘color-interpolation-filters’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProfileProperty"><span class="attr-name" title="Presentation attribute for property ‘color-profile’">‘color-profile’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘color-rendering’">‘color-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#CursorProperty"><span class="attr-name" title="Presentation attribute for property ‘cursor’">‘cursor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DirectionProperty"><span class="attr-name" title="Presentation attribute for property ‘direction’">‘direction’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#DisplayProperty"><span class="attr-name" title="Presentation attribute for property ‘display’">‘display’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DominantBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘dominant-baseline’">‘dominant-baseline’</span></a>, <a href="#EnableBackgroundProperty"><span class="attr-name" title="Presentation attribute for property ‘enable-background’">‘enable-background’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillProperty"><span class="attr-name" title="Presentation attribute for property ‘fill’">‘fill’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-opacity’">‘fill-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-rule’">‘fill-rule’</span></a>, <a href="#FilterProperty"><span class="attr-name" title="Presentation attribute for property ‘filter’">‘filter’</span></a>, <a href="#FloodColorProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-color’">‘flood-color’</span></a>, <a href="#FloodOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-opacity’">‘flood-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontFamilyProperty"><span class="attr-name" title="Presentation attribute for property ‘font-family’">‘font-family’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size’">‘font-size’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeAdjustProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size-adjust’">‘font-size-adjust’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStretchProperty"><span class="attr-name" title="Presentation attribute for property ‘font-stretch’">‘font-stretch’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStyleProperty"><span class="attr-name" title="Presentation attribute for property ‘font-style’">‘font-style’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontVariantProperty"><span class="attr-name" title="Presentation attribute for property ‘font-variant’">‘font-variant’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontWeightProperty"><span class="attr-name" title="Presentation attribute for property ‘font-weight’">‘font-weight’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationHorizontalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-horizontal’">‘glyph-orientation-horizontal’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationVerticalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-vertical’">‘glyph-orientation-vertical’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ImageRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘image-rendering’">‘image-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#KerningProperty"><span class="attr-name" title="Presentation attribute for property ‘kerning’">‘kerning’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#LetterSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘letter-spacing’">‘letter-spacing’</span></a>, <a href="#LightingColorProperty"><span class="attr-name" title="Presentation attribute for property ‘lighting-color’">‘lighting-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerEndProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-end’">‘marker-end’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerMidProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-mid’">‘marker-mid’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerStartProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-start’">‘marker-start’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#MaskProperty"><span class="attr-name" title="Presentation attribute for property ‘mask’">‘mask’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘opacity’">‘opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OverflowProperty"><span class="attr-name" title="Presentation attribute for property ‘overflow’">‘overflow’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#PointerEventsProperty"><span class="attr-name" title="Presentation attribute for property ‘pointer-events’">‘pointer-events’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ShapeRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘shape-rendering’">‘shape-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopColorProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-color’">‘stop-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-opacity’">‘stop-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke’">‘stroke’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDasharrayProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dasharray’">‘stroke-dasharray’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDashoffsetProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dashoffset’">‘stroke-dashoffset’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinecapProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linecap’">‘stroke-linecap’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinejoinProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linejoin’">‘stroke-linejoin’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeMiterlimitProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-miterlimit’">‘stroke-miterlimit’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-opacity’">‘stroke-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeWidthProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-width’">‘stroke-width’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextAnchorProperty"><span class="attr-name" title="Presentation attribute for property ‘text-anchor’">‘text-anchor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextDecorationProperty"><span class="attr-name" title="Presentation attribute for property ‘text-decoration’">‘text-decoration’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#TextRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘text-rendering’">‘text-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#UnicodeBidiProperty"><span class="attr-name" title="Presentation attribute for property ‘unicode-bidi’">‘unicode-bidi’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#VisibilityProperty"><span class="attr-name" title="Presentation attribute for property ‘visibility’">‘visibility’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WordSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘word-spacing’">‘word-spacing’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WritingModeProperty"><span class="attr-name" title="Presentation attribute for property ‘writing-mode’">‘writing-mode’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermFilterPrimitiveAttributes">filter primitive attributes</a><span class="expanding"> — <a href="filters.html#FilterPrimitiveXAttribute"><span class="attr-name">‘x’</span></a>, <a href="filters.html#FilterPrimitiveYAttribute"><span class="attr-name">‘y’</span></a>, <a href="filters.html#FilterPrimitiveWidthAttribute"><span class="attr-name">‘width’</span></a>, <a href="filters.html#FilterPrimitiveHeightAttribute"><span class="attr-name">‘height’</span></a>, <a href="filters.html#FilterPrimitiveResultAttribute"><span class="attr-name">‘result’</span></a></span></li><li><a href="styling.html#ClassAttribute"><span class="attr-name">‘class’</span></a></li><li><a href="styling.html#StyleAttribute"><span class="attr-name">‘style’</span></a></li><li><a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a></li></ul></dd><dt>DOM Interfaces:</dt><dd><ul class="no-bullets"><li><a class="idlinterface" href="#InterfaceSVGFEComponentTransferElement">SVGFEComponentTransferElement</a></li></ul></dd></dl></div>
1507 <p>This filter primitive performs component-wise remapping of data as
1508 follows:</p>
1509 <pre>R' = <a href="#feFuncRElement">feFuncR</a>( R )
1510 G' = <a href="#feFuncGElement">feFuncG</a>( G )
1511 B' = <a href="#feFuncBElement">feFuncB</a>( B )
1512 A' = <a href="#feFuncAElement">feFuncA</a>( A )</pre>
1514 <p>for every pixel. It allows operations like brightness adjustment, contrast
1515 adjustment, color balance or thresholding.</p>
1517 <p>The calculations are performed on non-premultiplied color values. If the
1518 input graphics consists of premultiplied color values, those values are
1519 automatically converted into non-premultiplied color values for this
1520 operation. (Note that the undoing and redoing of the premultiplication can be
1521 avoided if <a href=""><span class="element-name">‘feFuncA’</span></a> is the identity transform
1522 and all alpha values on the source graphic are set to 1.)</p>
1524 <p>The child elements of a <a href="#feComponentTransferElement"><span class="element-name">‘feComponentTransfer’</span></a> element specify the
1525 transfer functions for the four channels:</p>
1527 <ul id="transferFuncElements"><li><a href=""><span class="element-name">‘feFuncR’</span></a> — transfer function for the red component of the input graphic</li><li><a href=""><span class="element-name">‘feFuncG’</span></a> — transfer function for the green component of the input graphic</li><li><a href=""><span class="element-name">‘feFuncB’</span></a> — transfer function for the blue component of the input graphic</li><li><a href=""><span class="element-name">‘feFuncA’</span></a> — transfer function for the alpha component of the input graphic</li></ul>
1529 <p>The following rules apply to the processing of the <a href="#feComponentTransferElement"><span class="element-name">‘feComponentTransfer’</span></a> element:</p>
1530 <ul><li>If more than one <a href="#TermTransferFunctionElements"><span class="svg-term">transfer function element</span></a> of the same kind is specified, the last occurrence is to be used.</li><li>If any of the <a href="#TermTransferFunctionElements"><span class="svg-term">transfer function elements</span></a> are unspecified, the <a href="#feComponentTransferElement"><span class="element-name">‘feComponentTransfer’</span></a> must be processed as if those <a href="#TermTransferFunctionElements"><span class="svg-term">transfer function elements</span></a> were specified with their <a href="#feComponentTransferTypeAttribute"><span class="attr-name">‘type’</span></a> attributes set to <span class="attr-value">'identity'</span>.</li></ul>
1534 <div id="feFuncRElement">
1535 <div class="element-summary"><div class="element-summary-name"><span class="element-name">‘feFuncR’</span></div><dl><dt>Categories:</dt><dd><a href="#TermComponentTransferFunctionElement">Transfer function element element</a></dd><dt>Content model:</dt><dd>Any number of the following elements, in any order:
1536 <ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#AnimateElement"><span class="element-name">‘animate’</span></a></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#SetElement"><span class="element-name">‘set’</span></a></li></ul></dd><dt>Attributes:</dt><dd><ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermCoreAttributes">core attributes</a><span class="expanding"> — <a href="struct.html#IDAttribute"><span class="attr-name">‘id’</span></a>, <a href="struct.html#XMLBaseAttribute"><span class="attr-name">‘xml:base’</span></a>, <a href="struct.html#XMLLangAttribute"><span class="attr-name">‘xml:lang’</span></a>, <a href="struct.html#XMLSpaceAttribute"><span class="attr-name">‘xml:space’</span></a></span></li><li><a href="#TransferFunctionElementAttributes">transfer function element attributes</a><span class="expanding"> — <a href="#feComponentTransferTypeAttribute"><span class="attr-name">‘type’</span></a>, <a href="#feComponentTransferTableValuesAttribute"><span class="attr-name">‘tableValues’</span></a>, <a href="#feComponentTransferSlopeAttribute"><span class="attr-name">‘slope’</span></a>, <a href="#feComponentTransferInterceptAttribute"><span class="attr-name">‘intercept’</span></a>, <a href="#feComponentTransferAmplitudeAttribute"><span class="attr-name">‘amplitude’</span></a>, <a href="#feComponentTransferExponentAttribute"><span class="attr-name">‘exponent’</span></a>, <a href="#feComponentTransferOffsetAttribute"><span class="attr-name">‘offset’</span></a></span></li></ul></dd><dt>DOM Interfaces:</dt><dd><ul class="no-bullets"><li><a class="idlinterface" href="#InterfaceSVGFEFuncRElement">SVGFEFuncRElement</a></li></ul></dd></dl></div>
1537 </div>
1539 <div id="feFuncGElement">
1540 <div class="element-summary"><div class="element-summary-name"><span class="element-name">‘feFuncG’</span></div><dl><dt>Categories:</dt><dd><a href="#TermComponentTransferFunctionElement">Transfer function element element</a></dd><dt>Content model:</dt><dd>Any number of the following elements, in any order:
1541 <ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#AnimateElement"><span class="element-name">‘animate’</span></a></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#SetElement"><span class="element-name">‘set’</span></a></li></ul></dd><dt>Attributes:</dt><dd><ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermCoreAttributes">core attributes</a><span class="expanding"> — <a href="struct.html#IDAttribute"><span class="attr-name">‘id’</span></a>, <a href="struct.html#XMLBaseAttribute"><span class="attr-name">‘xml:base’</span></a>, <a href="struct.html#XMLLangAttribute"><span class="attr-name">‘xml:lang’</span></a>, <a href="struct.html#XMLSpaceAttribute"><span class="attr-name">‘xml:space’</span></a></span></li><li><a href="#TransferFunctionElementAttributes">transfer function element attributes</a><span class="expanding"> — <a href="#feComponentTransferTypeAttribute"><span class="attr-name">‘type’</span></a>, <a href="#feComponentTransferTableValuesAttribute"><span class="attr-name">‘tableValues’</span></a>, <a href="#feComponentTransferSlopeAttribute"><span class="attr-name">‘slope’</span></a>, <a href="#feComponentTransferInterceptAttribute"><span class="attr-name">‘intercept’</span></a>, <a href="#feComponentTransferAmplitudeAttribute"><span class="attr-name">‘amplitude’</span></a>, <a href="#feComponentTransferExponentAttribute"><span class="attr-name">‘exponent’</span></a>, <a href="#feComponentTransferOffsetAttribute"><span class="attr-name">‘offset’</span></a></span></li></ul></dd><dt>DOM Interfaces:</dt><dd><ul class="no-bullets"><li><a class="idlinterface" href="#InterfaceSVGFEFuncGElement">SVGFEFuncGElement</a></li></ul></dd></dl></div>
1542 </div>
1544 <div id="feFuncBElement">
1545 <div class="element-summary"><div class="element-summary-name"><span class="element-name">‘feFuncB’</span></div><dl><dt>Categories:</dt><dd><a href="#TermComponentTransferFunctionElement">Transfer function element element</a></dd><dt>Content model:</dt><dd>Any number of the following elements, in any order:
1546 <ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#AnimateElement"><span class="element-name">‘animate’</span></a></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#SetElement"><span class="element-name">‘set’</span></a></li></ul></dd><dt>Attributes:</dt><dd><ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermCoreAttributes">core attributes</a><span class="expanding"> — <a href="struct.html#IDAttribute"><span class="attr-name">‘id’</span></a>, <a href="struct.html#XMLBaseAttribute"><span class="attr-name">‘xml:base’</span></a>, <a href="struct.html#XMLLangAttribute"><span class="attr-name">‘xml:lang’</span></a>, <a href="struct.html#XMLSpaceAttribute"><span class="attr-name">‘xml:space’</span></a></span></li><li><a href="#TransferFunctionElementAttributes">transfer function element attributes</a><span class="expanding"> — <a href="#feComponentTransferTypeAttribute"><span class="attr-name">‘type’</span></a>, <a href="#feComponentTransferTableValuesAttribute"><span class="attr-name">‘tableValues’</span></a>, <a href="#feComponentTransferSlopeAttribute"><span class="attr-name">‘slope’</span></a>, <a href="#feComponentTransferInterceptAttribute"><span class="attr-name">‘intercept’</span></a>, <a href="#feComponentTransferAmplitudeAttribute"><span class="attr-name">‘amplitude’</span></a>, <a href="#feComponentTransferExponentAttribute"><span class="attr-name">‘exponent’</span></a>, <a href="#feComponentTransferOffsetAttribute"><span class="attr-name">‘offset’</span></a></span></li></ul></dd><dt>DOM Interfaces:</dt><dd><ul class="no-bullets"><li><a class="idlinterface" href="#InterfaceSVGFEFuncBElement">SVGFEFuncBElement</a></li></ul></dd></dl></div>
1547 </div>
1549 <div id="feFuncAElement">
1550 <div class="element-summary"><div class="element-summary-name"><span class="element-name">‘feFuncA’</span></div><dl><dt>Categories:</dt><dd><a href="#TermComponentTransferFunctionElement">Transfer function element element</a></dd><dt>Content model:</dt><dd>Any number of the following elements, in any order:
1551 <ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#AnimateElement"><span class="element-name">‘animate’</span></a></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#SetElement"><span class="element-name">‘set’</span></a></li></ul></dd><dt>Attributes:</dt><dd><ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermCoreAttributes">core attributes</a><span class="expanding"> — <a href="struct.html#IDAttribute"><span class="attr-name">‘id’</span></a>, <a href="struct.html#XMLBaseAttribute"><span class="attr-name">‘xml:base’</span></a>, <a href="struct.html#XMLLangAttribute"><span class="attr-name">‘xml:lang’</span></a>, <a href="struct.html#XMLSpaceAttribute"><span class="attr-name">‘xml:space’</span></a></span></li><li><a href="#TransferFunctionElementAttributes">transfer function element attributes</a><span class="expanding"> — <a href="#feComponentTransferTypeAttribute"><span class="attr-name">‘type’</span></a>, <a href="#feComponentTransferTableValuesAttribute"><span class="attr-name">‘tableValues’</span></a>, <a href="#feComponentTransferSlopeAttribute"><span class="attr-name">‘slope’</span></a>, <a href="#feComponentTransferInterceptAttribute"><span class="attr-name">‘intercept’</span></a>, <a href="#feComponentTransferAmplitudeAttribute"><span class="attr-name">‘amplitude’</span></a>, <a href="#feComponentTransferExponentAttribute"><span class="attr-name">‘exponent’</span></a>, <a href="#feComponentTransferOffsetAttribute"><span class="attr-name">‘offset’</span></a></span></li></ul></dd><dt>DOM Interfaces:</dt><dd><ul class="no-bullets"><li><a class="idlinterface" href="#InterfaceSVGFEFuncAElement">SVGFEFuncAElement</a></li></ul></dd></dl></div>
1552 </div>
1554 <p id="TransferFunctionElementAttributes">The attributes below are the
1555 <span class="SVG-TermDefine">transfer function element attributes</span>,
1556 which apply to the <a href="#TermTransferFunctionElements"><span class="svg-term">transfer function elements</span></a>.</p>
1558 <div class="adef-list">
1559 <p><em>Attribute definitions:</em></p>
1560 <dl><dt id="feComponentTransferTypeAttribute"><span class="adef">type</span>
1561 = "<em>identity | table | discrete | linear | gamma</em>"</dt><dd><p>Indicates the type of component transfer function. The type of
1562 function determines the applicability of the other attributes.</p>
1563 <p>In the following, C is the initial component (e.g.,
1564 <a href=""><span class="element-name">‘feFuncR’</span></a>), C' is the remapped component; both
1565 in the closed interval [0,1].</p>
1566 <ul><li>For <span class="attr-value">identity</span>:
1567 <pre>C' = C</pre>
1568 </li><li>For <span class="attr-value">table</span>, the function is
1569 defined by linear interpolation
1570 between values given in the attribute
1571 <a href="#feComponentTransferTableValuesAttribute"><span class="attr-name">‘tableValues’</span></a>. The table has <em>n+1</em>
1572 values (i.e., v<sub>0</sub> to v<sub>n</sub>)
1573 specifying the start and end values for <em>n</em>
1574 evenly sized interpolation regions. Interpolations
1575 use the following formula:
1577 <p>For a value <code>C < 1</code> find <code>k</code> such that:</p>
1578 <p class="filterformula">k/n <= C < (k+1)/n</p>
1580 <p>The result <code>C'</code> is given by:</p>
1581 <p class="filterformula">C' = v<sub>k</sub> + (C - k/n)*n * (v<sub>k+1</sub> - v<sub>k</sub>)</p>
1583 <p>If <code>C = 1</code> then:</p>
1584 <p class="filterformula">C' = v<sub>n</sub>.</p>
1585 </li><li>For <span class="attr-value">discrete</span>, the function is defined by the step function
1586 given in the attribute <a href="#feComponentTransferTableValuesAttribute"><span class="attr-name">‘tableValues’</span></a>, which provides a list of
1587 <em>n</em> values (i.e., v<sub>0</sub> to v<sub>n-1</sub>) in order
1588 to identify a step function consisting of <em>n</em> steps. The
1589 step function is defined by the following formula:
1591 <p>For a value <code>C < 1</code> find <code>k</code> such that:</p>
1592 <p class="filterformula">k/n <= C < (k+1)/n</p>
1594 <p>For a value <code>C</code> pick a <code>k</code> such that:</p>
1595 <p class="filterformula">k/N <= C < (k+1)/N</p>
1597 <p>The result <code>C'</code> is given by:</p>
1598 <p class="filterformula">C' = v<sub>k</sub></p>
1599 <p>If <code>C = 1</code> then:</p>
1600 <p class="filterformula">C' = v<sub>n-1</sub>.</p>
1601 </li><li>For <span class="attr-value">linear</span>, the function is
1602 defined by the following linear equation:
1603 <p class="filterformula">C' = <a href="#feComponentTransferSlopeAttribute"><span class="attr-name">slope</span></a> * C + <a href="#feComponentTransferInterceptAttribute"><span class="attr-name">intercept</span></a></p>
1604 </li><li>For <span class="attr-value">gamma</span>, the function is
1605 defined by the following exponential function:
1606 <p class="filterformula">C' = <a href="#feComponentTransferAmplitudeAttribute"><span class="attr-name">amplitude</span></a> * pow(C, <a href="#feComponentTransferExponentAttribute"><span class="attr-name">exponent</span></a>) + <a href="#feComponentTransferOffsetAttribute"><span class="attr-name">offset</span></a></p>
1607 </li></ul>
1608 <span class="anim-target">Animatable: yes.</span> </dd><dt id="feComponentTransferTableValuesAttribute"><span class="adef">tableValues</span> = "<em>(list of <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a>s)</em>"</dt><dd>When <span class="attr-value">type="table"</span>, the list of
1609 <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a>
1610 s <em>v0,v1,...vn</em>, separated by white space and/or a comma, which
1611 define the lookup table. An empty list results in an identity transfer
1612 function. If the attribute is not specified, then the effect is as if
1613 an empty list were provided.<br/>
1614 <span class="anim-target">Animatable: yes.</span></dd><dt id="feComponentTransferSlopeAttribute"><span class="adef">slope</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></em>"</dt><dd>When <span class="attr-value">type="linear"</span>, the slope of the
1615 linear function.<br/>
1616 The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feComponentTransferSlopeAttribute"><span class="attr-name">‘slope’</span></a> is <span class="attr-value">1</span>.<br/>
1617 <span class="anim-target">Animatable: yes.</span></dd><dt id="feComponentTransferInterceptAttribute"><span class="adef">intercept</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></em>"</dt><dd>When <span class="attr-value">type="linear"</span>, the intercept of
1618 the linear function.<br/>
1619 The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feComponentTransferInterceptAttribute"><span class="attr-name">‘intercept’</span></a> is <span class="attr-value">0</span>.<br/>
1620 <span class="anim-target">Animatable: yes.</span></dd><dt id="feComponentTransferAmplitudeAttribute"><span class="adef">amplitude</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></em>"</dt><dd>When <span class="attr-value">type="gamma"</span>, the amplitude of
1621 the gamma function.<br/>
1622 The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feComponentTransferAmplitudeAttribute"><span class="attr-name">‘amplitude’</span></a> is <span class="attr-value">1</span>.<br/>
1623 <span class="anim-target">Animatable: yes.</span></dd><dt id="feComponentTransferExponentAttribute"><span class="adef">exponent</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></em>"</dt><dd>When <span class="attr-value">type="gamma"</span>, the exponent of
1624 the gamma function.<br/>
1625 The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feComponentTransferExponentAttribute"><span class="attr-name">‘exponent’</span></a> is <span class="attr-value">1</span>.<br/>
1626 <span class="anim-target">Animatable: yes.</span></dd><dt id="feComponentTransferOffsetAttribute"><span class="adef">offset</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></em>"</dt><dd>When <span class="attr-value">type="gamma"</span>, the offset of the
1627 gamma function.<br/>
1628 The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feComponentTransferOffsetAttribute"><span class="attr-name">‘offset’</span></a> is <span class="attr-value">0</span>.<br/>
1629 <span class="anim-target">Animatable: yes.</span></dd></dl>
1630 </div>
1633 <pre class="xml"><?xml version="1.0"?>
1634 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
1635 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
1636 <svg width="8cm" height="4cm" viewBox="0 0 800 400"
1637 xmlns="http://www.w3.org/2000/svg" version="1.1">
1638 <title>Example feComponentTransfer - Examples of feComponentTransfer operations</title>
1639 <desc>Four text strings showing the effects of feComponentTransfer:
1640 an identity function acting as a reference,
1641 use of the feComponentTransfer table option,
1642 use of the feComponentTransfer linear option,
1643 and use of the feComponentTransfer gamma option.</desc>
1644 <defs>
1645 <linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
1646 x1="100" y1="0" x2="600" y2="0">
1647 <stop offset="0" stop-color="#ff0000" />
1648 <stop offset=".33" stop-color="#00ff00" />
1649 <stop offset=".67" stop-color="#0000ff" />
1650 <stop offset="1" stop-color="#000000" />
1651 </linearGradient>
1652 <filter id="Identity" filterUnits="objectBoundingBox"
1653 x="0%" y="0%" width="100%" height="100%">
1654 <feComponentTransfer>
1655 <feFuncR type="identity"/>
1656 <feFuncG type="identity"/>
1657 <feFuncB type="identity"/>
1658 <feFuncA type="identity"/>
1659 </feComponentTransfer>
1660 </filter>
1661 <filter id="Table" filterUnits="objectBoundingBox"
1662 x="0%" y="0%" width="100%" height="100%">
1663 <feComponentTransfer>
1664 <feFuncR type="table" tableValues="0 0 1 1"/>
1665 <feFuncG type="table" tableValues="1 1 0 0"/>
1666 <feFuncB type="table" tableValues="0 1 1 0"/>
1667 </feComponentTransfer>
1668 </filter>
1669 <filter id="Linear" filterUnits="objectBoundingBox"
1670 x="0%" y="0%" width="100%" height="100%">
1671 <feComponentTransfer>
1672 <feFuncR type="linear" slope=".5" intercept=".25"/>
1673 <feFuncG type="linear" slope=".5" intercept="0"/>
1674 <feFuncB type="linear" slope=".5" intercept=".5"/>
1675 </feComponentTransfer>
1676 </filter>
1677 <filter id="Gamma" filterUnits="objectBoundingBox"
1678 x="0%" y="0%" width="100%" height="100%">
1679 <feComponentTransfer>
1680 <feFuncR type="gamma" amplitude="2" exponent="5" offset="0"/>
1681 <feFuncG type="gamma" amplitude="2" exponent="3" offset="0"/>
1682 <feFuncB type="gamma" amplitude="2" exponent="1" offset="0"/>
1683 </feComponentTransfer>
1684 </filter>
1685 </defs>
1686 <rect fill="none" stroke="blue"
1687 x="1" y="1" width="798" height="398"/>
1688 <g font-family="Verdana" font-size="75"
1689 font-weight="bold" fill="url(#MyGradient)" >
1690 <rect x="100" y="0" width="600" height="20" />
1691 <text x="100" y="90">Identity</text>
1692 <text x="100" y="190" filter="url(#Table)" >TableLookup</text>
1693 <text x="100" y="290" filter="url(#Linear)" >LinearFunc</text>
1694 <text x="100" y="390" filter="url(#Gamma)" >GammaFunc</text>
1695 </g>
1696 </svg></pre><table summary="Example "><caption align="bottom">Example </caption><tr><td><img alt="Example " src="examples/feComponentTransfer.png"/></td></tr></table><p class="view-as-svg"><a href="examples/feComponentTransfer.svg">View this example as SVG (SVG-enabled browsers only)</a></p>
1698 <h2 id="feCompositeElement">13 Filter primitive <span class="element-name">‘feComposite’</span></h2>
1700 <div class="element-summary"><div class="element-summary-name"><span class="element-name">‘feComposite’</span></div><dl><dt>Categories:</dt><dd><a href="#TermFilterPrimitiveElements">Filter primitives element</a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermFilterPrimitiveElement">filter primitive element</a></dd><dt>Content model:</dt><dd>Any number of the following elements, in any order:
1701 <ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#AnimateElement"><span class="element-name">‘animate’</span></a></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#SetElement"><span class="element-name">‘set’</span></a></li></ul></dd><dt>Attributes:</dt><dd><ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermCoreAttributes">core attributes</a><span class="expanding"> — <a href="struct.html#IDAttribute"><span class="attr-name">‘id’</span></a>, <a href="struct.html#XMLBaseAttribute"><span class="attr-name">‘xml:base’</span></a>, <a href="struct.html#XMLLangAttribute"><span class="attr-name">‘xml:lang’</span></a>, <a href="struct.html#XMLSpaceAttribute"><span class="attr-name">‘xml:space’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermPresentationAttribute">presentation attributes</a><span class="expanding"> — <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#AlignmentBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘alignment-baseline’">‘alignment-baseline’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#BaselineShiftProperty"><span class="attr-name" title="Presentation attribute for property ‘baseline-shift’">‘baseline-shift’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipProperty"><span class="attr-name" title="Presentation attribute for property ‘clip’">‘clip’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipPathProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-path’">‘clip-path’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-rule’">‘clip-rule’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProperty"><span class="attr-name" title="Presentation attribute for property ‘color’">‘color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation’">‘color-interpolation’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationFiltersProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation-filters’">‘color-interpolation-filters’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProfileProperty"><span class="attr-name" title="Presentation attribute for property ‘color-profile’">‘color-profile’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘color-rendering’">‘color-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#CursorProperty"><span class="attr-name" title="Presentation attribute for property ‘cursor’">‘cursor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DirectionProperty"><span class="attr-name" title="Presentation attribute for property ‘direction’">‘direction’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#DisplayProperty"><span class="attr-name" title="Presentation attribute for property ‘display’">‘display’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DominantBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘dominant-baseline’">‘dominant-baseline’</span></a>, <a href="#EnableBackgroundProperty"><span class="attr-name" title="Presentation attribute for property ‘enable-background’">‘enable-background’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillProperty"><span class="attr-name" title="Presentation attribute for property ‘fill’">‘fill’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-opacity’">‘fill-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-rule’">‘fill-rule’</span></a>, <a href="#FilterProperty"><span class="attr-name" title="Presentation attribute for property ‘filter’">‘filter’</span></a>, <a href="#FloodColorProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-color’">‘flood-color’</span></a>, <a href="#FloodOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-opacity’">‘flood-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontFamilyProperty"><span class="attr-name" title="Presentation attribute for property ‘font-family’">‘font-family’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size’">‘font-size’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeAdjustProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size-adjust’">‘font-size-adjust’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStretchProperty"><span class="attr-name" title="Presentation attribute for property ‘font-stretch’">‘font-stretch’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStyleProperty"><span class="attr-name" title="Presentation attribute for property ‘font-style’">‘font-style’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontVariantProperty"><span class="attr-name" title="Presentation attribute for property ‘font-variant’">‘font-variant’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontWeightProperty"><span class="attr-name" title="Presentation attribute for property ‘font-weight’">‘font-weight’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationHorizontalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-horizontal’">‘glyph-orientation-horizontal’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationVerticalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-vertical’">‘glyph-orientation-vertical’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ImageRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘image-rendering’">‘image-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#KerningProperty"><span class="attr-name" title="Presentation attribute for property ‘kerning’">‘kerning’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#LetterSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘letter-spacing’">‘letter-spacing’</span></a>, <a href="#LightingColorProperty"><span class="attr-name" title="Presentation attribute for property ‘lighting-color’">‘lighting-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerEndProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-end’">‘marker-end’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerMidProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-mid’">‘marker-mid’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerStartProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-start’">‘marker-start’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#MaskProperty"><span class="attr-name" title="Presentation attribute for property ‘mask’">‘mask’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘opacity’">‘opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OverflowProperty"><span class="attr-name" title="Presentation attribute for property ‘overflow’">‘overflow’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#PointerEventsProperty"><span class="attr-name" title="Presentation attribute for property ‘pointer-events’">‘pointer-events’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ShapeRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘shape-rendering’">‘shape-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopColorProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-color’">‘stop-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-opacity’">‘stop-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke’">‘stroke’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDasharrayProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dasharray’">‘stroke-dasharray’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDashoffsetProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dashoffset’">‘stroke-dashoffset’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinecapProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linecap’">‘stroke-linecap’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinejoinProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linejoin’">‘stroke-linejoin’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeMiterlimitProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-miterlimit’">‘stroke-miterlimit’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-opacity’">‘stroke-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeWidthProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-width’">‘stroke-width’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextAnchorProperty"><span class="attr-name" title="Presentation attribute for property ‘text-anchor’">‘text-anchor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextDecorationProperty"><span class="attr-name" title="Presentation attribute for property ‘text-decoration’">‘text-decoration’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#TextRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘text-rendering’">‘text-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#UnicodeBidiProperty"><span class="attr-name" title="Presentation attribute for property ‘unicode-bidi’">‘unicode-bidi’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#VisibilityProperty"><span class="attr-name" title="Presentation attribute for property ‘visibility’">‘visibility’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WordSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘word-spacing’">‘word-spacing’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WritingModeProperty"><span class="attr-name" title="Presentation attribute for property ‘writing-mode’">‘writing-mode’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermFilterPrimitiveAttributes">filter primitive attributes</a><span class="expanding"> — <a href="filters.html#FilterPrimitiveXAttribute"><span class="attr-name">‘x’</span></a>, <a href="filters.html#FilterPrimitiveYAttribute"><span class="attr-name">‘y’</span></a>, <a href="filters.html#FilterPrimitiveWidthAttribute"><span class="attr-name">‘width’</span></a>, <a href="filters.html#FilterPrimitiveHeightAttribute"><span class="attr-name">‘height’</span></a>, <a href="filters.html#FilterPrimitiveResultAttribute"><span class="attr-name">‘result’</span></a></span></li><li><a href="styling.html#ClassAttribute"><span class="attr-name">‘class’</span></a></li><li><a href="styling.html#StyleAttribute"><span class="attr-name">‘style’</span></a></li><li><a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a></li><li><a href="#feCompositeIn2Attribute"><span class="attr-name">‘in2’</span></a></li><li><a href="#feCompositeOperatorAttribute"><span class="attr-name">‘operator’</span></a></li><li><a href="#feCompositeK1Attribute"><span class="attr-name">‘k1’</span></a></li><li><a href="#feCompositeK2Attribute"><span class="attr-name">‘k2’</span></a></li><li><a href="#feCompositeK3Attribute"><span class="attr-name">‘k3’</span></a></li><li><a href="#feCompositeK4Attribute"><span class="attr-name">‘k4’</span></a></li></ul></dd><dt>DOM Interfaces:</dt><dd><ul class="no-bullets"><li><a class="idlinterface" href="#InterfaceSVGFECompositeElement">SVGFECompositeElement</a></li></ul></dd></dl></div>
1704 <p>This filter performs the combination of the two input images pixel-wise in
1705 image space using one of the Porter-Duff [<a href="#ref-PORTERDUFF">PORTERDUFF</a>] compositing operations: <em>over, in,
1706 atop, out, xor</em> [<a href="#ref-SVG-COMPOSITING">SVG-COMPOSITING</a>]. Additionally, a component-wise <em>arithmetic</em>
1707 operation (with the result clamped between [0..1]) can be applied.</p>
1709 <p>The <em>arithmetic</em> operation is useful for combining the output from
1710 the <a href="#feDiffuseLightingElement"><span class="element-name">‘feDiffuseLighting’</span></a> and <a href="#feSpecularLightingElement"><span class="element-name">‘feSpecularLighting’</span></a> filters with texture
1711 data. It is also useful for implementing <em>dissolve</em>. If the
1712 <em>arithmetic</em> operation is chosen, each result pixel is computed using
1713 the following formula:</p>
1714 <pre>result = k1*i1*i2 + k2*i1 + k3*i2 + k4</pre>
1715 where:
1716 <ul><li>
1717 <code>i1</code> and <code>i2</code> indicate the corresponding pixel channel values of the input image, which map to <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a> and <a href="#feCompositeIn2Attribute"><span class="attr-name">‘in2’</span></a> respectively
1718 </li><li>
1719 <code>k1, k2, k3</code> and <code>k4</code> indicate the values of the attributes with the same name
1720 </li></ul>
1722 <p>For this filter primitive, the extent of the resulting image might grow as
1723 described in the section that describes the <a href="#FilterPrimitiveSubRegion"><span class="svg-term">filter primitive subregion</span></a>.</p>
1725 <div class="adef-list">
1726 <p><em>Attribute definitions:</em></p>
1727 <dl><dt id="feCompositeOperatorAttribute"><span class="adef">operator</span>
1728 = "<em>over | in | out | atop | xor | arithmetic</em>"</dt><dd>The compositing operation that is to be performed. All of the <span class="attr-name">operator</span> types except <span class="attr-value">arithmetic</span> match the corresponding operation as
1729 described in [<a href="#ref-PORTERDUFF">PORTERDUFF</a>]. The <span class="attr-value">arithmetic</span> operator is described above.
1730 The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feCompositeOperatorAttribute"><span class="attr-name">‘operator’</span></a> is <span class="attr-value">over</span>.
1731 <br/>
1732 <span class="anim-target">Animatable: yes.</span></dd><dt id="feCompositeK1Attribute"><span class="adef">k1</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></em>"</dt><dd>Only applicable if <span class="attr-value">operator="arithmetic"</span>.<br/>
1733 The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feCompositeK1Attribute"><span class="attr-name">‘k1’</span></a> is <span class="attr-value">0</span>. <br/>
1734 <span class="anim-target">Animatable: yes.</span></dd><dt id="feCompositeK2Attribute"><span class="adef">k2</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></em>"</dt><dd>Only applicable if <span class="attr-value">operator="arithmetic"</span>.<br/>
1735 The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feCompositeK2Attribute"><span class="attr-name">‘k2’</span></a> is <span class="attr-value">0</span>. <br/>
1736 <span class="anim-target">Animatable: yes.</span></dd><dt id="feCompositeK3Attribute"><span class="adef">k3</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></em>"</dt><dd>Only applicable if <span class="attr-value">operator="arithmetic"</span>.<br/>
1737 The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feCompositeK3Attribute"><span class="attr-name">‘k3’</span></a> is <span class="attr-value">0</span>. <br/>
1738 <span class="anim-target">Animatable: yes.</span></dd><dt id="feCompositeK4Attribute"><span class="adef">k4</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></em>"</dt><dd>Only applicable if <span class="attr-value">operator="arithmetic"</span>.<br/>
1739 The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feCompositeK4Attribute"><span class="attr-name">‘k4’</span></a> is <span class="attr-value">0</span>. <br/>
1740 <span class="anim-target">Animatable: yes.</span></dd><dt id="feCompositeIn2Attribute">
1741 <span class="adef">in2</span> = "<em>(see <a href="#FilterPrimitiveInAttribute"><span class="attr-name">in</span></a>
1742 attribute)</em>"</dt><dd>The second input image to the compositing operation. This attribute
1743 can take on the same values as the <a href="#FilterPrimitiveInAttribute"><span class="attr-name">in</span></a> attribute.<br/>
1744 <span class="anim-target">Animatable: yes.</span></dd></dl>
1745 </div>
1748 <pre class="xml"><?xml version="1.0"?>
1749 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
1750 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
1751 <svg width="330" height="195" viewBox="0 0 1100 650" version="1.1"
1752 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
1753 <title>Example feComposite - Examples of feComposite operations</title>
1754 <desc>Four rows of six pairs of overlapping triangles depicting
1755 the six different feComposite operators under different
1756 opacity values and different clearing of the background.</desc>
1757 <defs>
1758 <desc>Define two sets of six filters for each of the six compositing operators.
1759 The first set wipes out the background image by flooding with opaque white.
1760 The second set does not wipe out the background, with the result
1761 that the background sometimes shines through and is other cases
1762 is blended into itself (i.e., "double-counting").</desc>
1763 <filter id="overFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
1764 <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
1765 <feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/>
1766 <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
1767 </filter>
1768 <filter id="inFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
1769 <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
1770 <feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/>
1771 <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
1772 </filter>
1773 <filter id="outFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
1774 <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
1775 <feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/>
1776 <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
1777 </filter>
1778 <filter id="atopFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
1779 <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
1780 <feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/>
1781 <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
1782 </filter>
1783 <filter id="xorFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
1784 <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
1785 <feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/>
1786 <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
1787 </filter>
1788 <filter id="arithmeticFlood" filterUnits="objectBoundingBox"
1789 x="-5%" y="-5%" width="110%" height="110%">
1790 <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
1791 <feComposite in="SourceGraphic" in2="BackgroundImage" result="comp"
1792 operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/>
1793 <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
1794 </filter>
1795 <filter id="overNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
1796 <feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/>
1797 </filter>
1798 <filter id="inNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
1799 <feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/>
1800 </filter>
1801 <filter id="outNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
1802 <feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/>
1803 </filter>
1804 <filter id="atopNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
1805 <feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/>
1806 </filter>
1807 <filter id="xorNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
1808 <feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/>
1809 </filter>
1810 <filter id="arithmeticNoFlood" filterUnits="objectBoundingBox"
1811 x="-5%" y="-5%" width="110%" height="110%">
1812 <feComposite in="SourceGraphic" in2="BackgroundImage" result="comp"
1813 operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/>
1814 </filter>
1815 <path id="Blue100" d="M 0 0 L 100 0 L 100 100 z" fill="#00ffff" />
1816 <path id="Red100" d="M 0 0 L 0 100 L 100 0 z" fill="#ff00ff" />
1817 <path id="Blue50" d="M 0 125 L 100 125 L 100 225 z" fill="#00ffff" fill-opacity=".5" />
1818 <path id="Red50" d="M 0 125 L 0 225 L 100 125 z" fill="#ff00ff" fill-opacity=".5" />
1819 <g id="TwoBlueTriangles">
1820 <use xlink:href="#Blue100"/>
1821 <use xlink:href="#Blue50"/>
1822 </g>
1823 <g id="BlueTriangles">
1824 <use transform="translate(275,25)" xlink:href="#TwoBlueTriangles"/>
1825 <use transform="translate(400,25)" xlink:href="#TwoBlueTriangles"/>
1826 <use transform="translate(525,25)" xlink:href="#TwoBlueTriangles"/>
1827 <use transform="translate(650,25)" xlink:href="#TwoBlueTriangles"/>
1828 <use transform="translate(775,25)" xlink:href="#TwoBlueTriangles"/>
1829 <use transform="translate(900,25)" xlink:href="#TwoBlueTriangles"/>
1830 </g>
1831 </defs>
1833 <rect fill="none" stroke="blue" x="1" y="1" width="1098" height="648"/>
1834 <g font-family="Verdana" font-size="40" shape-rendering="crispEdges">
1835 <desc>Render the examples using the filters that draw on top of
1836 an opaque white surface, thus obliterating the background.</desc>
1837 <g enable-background="new">
1838 <text x="15" y="75">opacity 1.0</text>
1839 <text x="15" y="115" font-size="27">(with feFlood)</text>
1840 <text x="15" y="200">opacity 0.5</text>
1841 <text x="15" y="240" font-size="27">(with feFlood)</text>
1842 <use xlink:href="#BlueTriangles"/>
1843 <g transform="translate(275,25)">
1844 <use xlink:href="#Red100" filter="url(#overFlood)" />
1845 <use xlink:href="#Red50" filter="url(#overFlood)" />
1846 <text x="5" y="275">over</text>
1847 </g>
1848 <g transform="translate(400,25)">
1849 <use xlink:href="#Red100" filter="url(#inFlood)" />
1850 <use xlink:href="#Red50" filter="url(#inFlood)" />
1851 <text x="35" y="275">in</text>
1852 </g>
1853 <g transform="translate(525,25)">
1854 <use xlink:href="#Red100" filter="url(#outFlood)" />
1855 <use xlink:href="#Red50" filter="url(#outFlood)" />
1856 <text x="15" y="275">out</text>
1857 </g>
1858 <g transform="translate(650,25)">
1859 <use xlink:href="#Red100" filter="url(#atopFlood)" />
1860 <use xlink:href="#Red50" filter="url(#atopFlood)" />
1861 <text x="10" y="275">atop</text>
1862 </g>
1863 <g transform="translate(775,25)">
1864 <use xlink:href="#Red100" filter="url(#xorFlood)" />
1865 <use xlink:href="#Red50" filter="url(#xorFlood)" />
1866 <text x="15" y="275">xor</text>
1867 </g>
1868 <g transform="translate(900,25)">
1869 <use xlink:href="#Red100" filter="url(#arithmeticFlood)" />
1870 <use xlink:href="#Red50" filter="url(#arithmeticFlood)" />
1871 <text x="-25" y="275">arithmetic</text>
1872 </g>
1873 </g>
1874 <g transform="translate(0,325)" enable-background="new">
1875 <desc>Render the examples using the filters that do not obliterate
1876 the background, thus sometimes causing the background to continue
1877 to appear in some cases, and in other cases the background
1878 image blends into itself ("double-counting").</desc>
1879 <text x="15" y="75">opacity 1.0</text>
1880 <text x="15" y="115" font-size="27">(without feFlood)</text>
1881 <text x="15" y="200">opacity 0.5</text>
1882 <text x="15" y="240" font-size="27">(without feFlood)</text>
1883 <use xlink:href="#BlueTriangles"/>
1884 <g transform="translate(275,25)">
1885 <use xlink:href="#Red100" filter="url(#overNoFlood)" />
1886 <use xlink:href="#Red50" filter="url(#overNoFlood)" />
1887 <text x="5" y="275">over</text>
1888 </g>
1889 <g transform="translate(400,25)">
1890 <use xlink:href="#Red100" filter="url(#inNoFlood)" />
1891 <use xlink:href="#Red50" filter="url(#inNoFlood)" />
1892 <text x="35" y="275">in</text>
1893 </g>
1894 <g transform="translate(525,25)">
1895 <use xlink:href="#Red100" filter="url(#outNoFlood)" />
1896 <use xlink:href="#Red50" filter="url(#outNoFlood)" />
1897 <text x="15" y="275">out</text>
1898 </g>
1899 <g transform="translate(650,25)">
1900 <use xlink:href="#Red100" filter="url(#atopNoFlood)" />
1901 <use xlink:href="#Red50" filter="url(#atopNoFlood)" />
1902 <text x="10" y="275">atop</text>
1903 </g>
1904 <g transform="translate(775,25)">
1905 <use xlink:href="#Red100" filter="url(#xorNoFlood)" />
1906 <use xlink:href="#Red50" filter="url(#xorNoFlood)" />
1907 <text x="15" y="275">xor</text>
1908 </g>
1909 <g transform="translate(900,25)">
1910 <use xlink:href="#Red100" filter="url(#arithmeticNoFlood)" />
1911 <use xlink:href="#Red50" filter="url(#arithmeticNoFlood)" />
1912 <text x="-25" y="275">arithmetic</text>
1913 </g>
1914 </g>
1915 </g>
1916 </svg></pre><table summary="Example "><caption align="bottom">Example </caption><tr><td><img alt="Example " src="examples/feComposite.png"/></td></tr></table><p class="view-as-svg"><a href="examples/feComposite.svg">View this example as SVG (SVG-enabled browsers only)</a></p>
1918 <h2 id="feConvolveMatrixElement">14 Filter primitive <span class="element-name">‘feConvolveMatrix’</span></h2>
1920 <div class="element-summary"><div class="element-summary-name"><span class="element-name">‘feConvolveMatrix’</span></div><dl><dt>Categories:</dt><dd><a href="#TermFilterPrimitiveElements">Filter primitives element</a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermFilterPrimitiveElement">filter primitive element</a></dd><dt>Content model:</dt><dd>Any number of the following elements, in any order:
1921 <ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#AnimateElement"><span class="element-name">‘animate’</span></a></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#SetElement"><span class="element-name">‘set’</span></a></li></ul></dd><dt>Attributes:</dt><dd><ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermCoreAttributes">core attributes</a><span class="expanding"> — <a href="struct.html#IDAttribute"><span class="attr-name">‘id’</span></a>, <a href="struct.html#XMLBaseAttribute"><span class="attr-name">‘xml:base’</span></a>, <a href="struct.html#XMLLangAttribute"><span class="attr-name">‘xml:lang’</span></a>, <a href="struct.html#XMLSpaceAttribute"><span class="attr-name">‘xml:space’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermPresentationAttribute">presentation attributes</a><span class="expanding"> — <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#AlignmentBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘alignment-baseline’">‘alignment-baseline’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#BaselineShiftProperty"><span class="attr-name" title="Presentation attribute for property ‘baseline-shift’">‘baseline-shift’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipProperty"><span class="attr-name" title="Presentation attribute for property ‘clip’">‘clip’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipPathProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-path’">‘clip-path’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-rule’">‘clip-rule’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProperty"><span class="attr-name" title="Presentation attribute for property ‘color’">‘color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation’">‘color-interpolation’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationFiltersProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation-filters’">‘color-interpolation-filters’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProfileProperty"><span class="attr-name" title="Presentation attribute for property ‘color-profile’">‘color-profile’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘color-rendering’">‘color-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#CursorProperty"><span class="attr-name" title="Presentation attribute for property ‘cursor’">‘cursor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DirectionProperty"><span class="attr-name" title="Presentation attribute for property ‘direction’">‘direction’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#DisplayProperty"><span class="attr-name" title="Presentation attribute for property ‘display’">‘display’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DominantBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘dominant-baseline’">‘dominant-baseline’</span></a>, <a href="#EnableBackgroundProperty"><span class="attr-name" title="Presentation attribute for property ‘enable-background’">‘enable-background’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillProperty"><span class="attr-name" title="Presentation attribute for property ‘fill’">‘fill’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-opacity’">‘fill-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-rule’">‘fill-rule’</span></a>, <a href="#FilterProperty"><span class="attr-name" title="Presentation attribute for property ‘filter’">‘filter’</span></a>, <a href="#FloodColorProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-color’">‘flood-color’</span></a>, <a href="#FloodOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-opacity’">‘flood-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontFamilyProperty"><span class="attr-name" title="Presentation attribute for property ‘font-family’">‘font-family’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size’">‘font-size’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeAdjustProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size-adjust’">‘font-size-adjust’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStretchProperty"><span class="attr-name" title="Presentation attribute for property ‘font-stretch’">‘font-stretch’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStyleProperty"><span class="attr-name" title="Presentation attribute for property ‘font-style’">‘font-style’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontVariantProperty"><span class="attr-name" title="Presentation attribute for property ‘font-variant’">‘font-variant’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontWeightProperty"><span class="attr-name" title="Presentation attribute for property ‘font-weight’">‘font-weight’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationHorizontalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-horizontal’">‘glyph-orientation-horizontal’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationVerticalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-vertical’">‘glyph-orientation-vertical’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ImageRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘image-rendering’">‘image-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#KerningProperty"><span class="attr-name" title="Presentation attribute for property ‘kerning’">‘kerning’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#LetterSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘letter-spacing’">‘letter-spacing’</span></a>, <a href="#LightingColorProperty"><span class="attr-name" title="Presentation attribute for property ‘lighting-color’">‘lighting-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerEndProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-end’">‘marker-end’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerMidProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-mid’">‘marker-mid’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerStartProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-start’">‘marker-start’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#MaskProperty"><span class="attr-name" title="Presentation attribute for property ‘mask’">‘mask’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘opacity’">‘opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OverflowProperty"><span class="attr-name" title="Presentation attribute for property ‘overflow’">‘overflow’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#PointerEventsProperty"><span class="attr-name" title="Presentation attribute for property ‘pointer-events’">‘pointer-events’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ShapeRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘shape-rendering’">‘shape-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopColorProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-color’">‘stop-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-opacity’">‘stop-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke’">‘stroke’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDasharrayProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dasharray’">‘stroke-dasharray’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDashoffsetProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dashoffset’">‘stroke-dashoffset’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinecapProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linecap’">‘stroke-linecap’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinejoinProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linejoin’">‘stroke-linejoin’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeMiterlimitProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-miterlimit’">‘stroke-miterlimit’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-opacity’">‘stroke-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeWidthProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-width’">‘stroke-width’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextAnchorProperty"><span class="attr-name" title="Presentation attribute for property ‘text-anchor’">‘text-anchor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextDecorationProperty"><span class="attr-name" title="Presentation attribute for property ‘text-decoration’">‘text-decoration’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#TextRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘text-rendering’">‘text-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#UnicodeBidiProperty"><span class="attr-name" title="Presentation attribute for property ‘unicode-bidi’">‘unicode-bidi’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#VisibilityProperty"><span class="attr-name" title="Presentation attribute for property ‘visibility’">‘visibility’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WordSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘word-spacing’">‘word-spacing’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WritingModeProperty"><span class="attr-name" title="Presentation attribute for property ‘writing-mode’">‘writing-mode’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermFilterPrimitiveAttributes">filter primitive attributes</a><span class="expanding"> — <a href="filters.html#FilterPrimitiveXAttribute"><span class="attr-name">‘x’</span></a>, <a href="filters.html#FilterPrimitiveYAttribute"><span class="attr-name">‘y’</span></a>, <a href="filters.html#FilterPrimitiveWidthAttribute"><span class="attr-name">‘width’</span></a>, <a href="filters.html#FilterPrimitiveHeightAttribute"><span class="attr-name">‘height’</span></a>, <a href="filters.html#FilterPrimitiveResultAttribute"><span class="attr-name">‘result’</span></a></span></li><li><a href="styling.html#ClassAttribute"><span class="attr-name">‘class’</span></a></li><li><a href="styling.html#StyleAttribute"><span class="attr-name">‘style’</span></a></li><li><a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a></li><li><a href="#feConvolveMatrixElementOrderAttribute"><span class="attr-name">‘order’</span></a></li><li><a href="#feConvolveMatrixElementKernelMatrixAttribute"><span class="attr-name">‘kernelMatrix’</span></a></li><li><a href="#feConvolveMatrixElementDivisorAttribute"><span class="attr-name">‘divisor’</span></a></li><li><a href="#feConvolveMatrixElementBiasAttribute"><span class="attr-name">‘bias’</span></a></li><li><a href="#feConvolveMatrixElementTargetXAttribute"><span class="attr-name">‘targetX’</span></a></li><li><a href="#feConvolveMatrixElementTargetYAttribute"><span class="attr-name">‘targetY’</span></a></li><li><a href="#feConvolveMatrixElementEdgeModeAttribute"><span class="attr-name">‘edgeMode’</span></a></li><li><a href="#feConvolveMatrixElementKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a></li><li><a href="#feConvolveMatrixElementPreserveAlphaAttribute"><span class="attr-name">‘preserveAlpha’</span></a></li></ul></dd><dt>DOM Interfaces:</dt><dd><ul class="no-bullets"><li><a class="idlinterface" href="#InterfaceSVGFEConvolveMatrixElement">SVGFEConvolveMatrixElement</a></li></ul></dd></dl></div>
1924 <p>feConvolveMatrix applies a matrix convolution filter effect. A convolution
1925 combines pixels in the input image with neighboring pixels to produce a
1926 resulting image. A wide variety of imaging operations can be achieved through
1927 convolutions, including blurring, edge detection, sharpening, embossing and
1928 beveling.</p>
1930 <p>A matrix convolution is based on an n-by-m matrix (the convolution kernel)
1931 which describes how a given pixel value in the input image is combined with
1932 its neighboring pixel values to produce a resulting pixel value. Each result
1933 pixel is determined by applying the kernel matrix to the corresponding source
1934 pixel and its neighboring pixels. The basic convolution formula which is
1935 applied to each color value for a given pixel is:</p>
1937 <p class="filterformula" id="feConvolveMatrixElementFormula">COLOR<sub>X,Y</sub> = ( <br/>
1938 SUM <sub>I=0 to [<a href="#feConvolveMatrixElementOrderAttribute">'orderY'</a>-1]</sub> { <br/>
1939 SUM <sub>J=0 to [<a href="#feConvolveMatrixElementOrderAttribute">'orderX'</a>-1]</sub> { <br/>
1940 SOURCE <sub>X-<a href="#feConvolveMatrixElementTargetXAttribute"><span class="attr-name">‘targetX’</span></a>+J, Y-<a href="#feConvolveMatrixElementTargetYAttribute"><span class="attr-name">‘targetY’</span></a>+I</sub> * <a href="#feConvolveMatrixElementKernelMatrixAttribute"><span class="attr-name">‘kernelMatrix’</span></a><sub><a href="#feConvolveMatrixElementOrderAttribute">'orderX'</a>-J-1, <a href="#feConvolveMatrixElementOrderAttribute">'orderY'</a>-I-1</sub> <br/>
1941 } <br/>
1942 } <br/>
1943 ) / <a href="#feConvolveMatrixElementDivisorAttribute"><span class="attr-name">‘divisor’</span></a> + <a href="#feConvolveMatrixElementBiasAttribute"><span class="attr-name">‘bias’</span></a> * ALPHA<sub>X,Y</sub><br/>
1944 </p>
1946 <div class="note-editor">
1947 ED: Consider making this into mathml</div>
1949 <p>where "orderX" and "orderY" represent the X and Y values for the <a href="#feConvolveMatrixElementOrderAttribute"><span class="attr-name">‘order’</span></a> attribute, "targetX" represents the value
1950 of the <a href="#feConvolveMatrixElementTargetXAttribute"><span class="attr-name">‘targetX’</span></a> attribute, "targetY" represents the
1951 value of the <a href="#feConvolveMatrixElementTargetYAttribute"><span class="attr-name">‘targetY’</span></a> attribute, "kernelMatrix" represents the
1952 value of the <a href="#feConvolveMatrixElementKernelMatrixAttribute"><span class="attr-name">‘kernelMatrix’</span></a> attribute, "divisor" represents the
1953 value of the <a href="#feConvolveMatrixElementDivisorAttribute"><span class="attr-name">‘divisor’</span></a> attribute, and "bias" represents the
1954 value of the <a href="#feConvolveMatrixElementBiasAttribute"><span class="attr-name">‘bias’</span></a> attribute.</p>
1956 <p>Note in the above formulas that the values in the kernel matrix are
1957 applied such that the kernel matrix is rotated 180 degrees relative to the
1958 source and destination images in order to match convolution theory as
1959 described in many computer graphics textbooks.</p>
1961 <p>To illustrate, suppose you have a input image which is 5 pixels by 5
1962 pixels, whose color values for one of the color channels are as follows:</p>
1963 <pre> 0 20 40 235 235
1964 100 120 140 235 235
1965 200 220 240 235 235
1966 225 225 255 255 255
1967 225 225 255 255 255</pre>
1969 <div class="note-editor">
1970 ED: Consider making this into mathml</div>
1972 <p>and you define a 3-by-3 convolution kernel as follows:</p>
1973 <pre> 1 2 3
1974 4 5 6
1975 7 8 9</pre>
1977 <div class="note-editor">
1978 ED: Consider making this into mathml</div>
1980 <p>Let's focus on the color value at the second row and second column of the
1981 image (source pixel value is 120). Assuming the simplest case (where the
1982 input image's pixel grid aligns perfectly with the kernel's pixel grid) and
1983 assuming default values for attributes <a href="#feConvolveMatrixElementDivisorAttribute"><span class="attr-name">‘divisor’</span></a>, <a href="#feConvolveMatrixElementTargetXAttribute"><span class="attr-name">‘targetX’</span></a> and
1984 <a href="#feConvolveMatrixElementTargetYAttribute"><span class="attr-name">‘targetY’</span></a>, then resulting color value will
1985 be:</p>
1986 <pre>(9* 0 + 8* 20 + 7* 40 +
1987 6*100 + 5*120 + 4*140 +
1988 3*200 + 2*220 + 1*240) / (9+8+7+6+5+4+3+2+1)</pre>
1990 <div class="note-editor">
1991 ED: Consider making this into mathml</div>
1993 <p>Because they operate on pixels, matrix convolutions are inherently
1994 resolution-dependent. To make <a href="#feConvolveMatrixElement"><span class="element-name">‘feConvolveMatrix’</span></a> produce resolution-independent
1995 results, an explicit value should be provided for either the <a href="#FilterElementFilterResAttribute"><span class="attr-name">‘filterRes’</span></a> attribute on the <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element
1996 and/or attribute <a href="#feConvolveMatrixElementKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a>.</p>
1998 <p><a href="#feConvolveMatrixElementKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a>, in combination with the other
1999 attributes, defines an implicit pixel grid in the filter effects coordinate
2000 system (i.e., the coordinate system established by the <a href="#FilterElementPrimitiveUnitsAttribute"><span class="attr-name">‘primitiveUnits’</span></a> attribute). If the pixel grid
2001 established by <a href="#feConvolveMatrixElementKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a> is not scaled to match the
2002 pixel grid established by attribute <a href="#FilterElementFilterResAttribute"><span class="attr-name">‘filterRes’</span></a> (implicitly or explicitly), then the
2003 input image will be temporarily rescaled to match its pixels with <a href="#feConvolveMatrixElementKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a>. The convolution happens on the
2004 resampled image. After applying the convolution, the image is resampled back
2005 to the original resolution.</p>
2007 <p>When the image must be resampled to match the coordinate system defined by
2008 <a href="#feConvolveMatrixElementKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a> prior to convolution, or
2009 resampled to match the device coordinate system after convolution, it is
2010 recommended that high quality viewers make use of appropriate interpolation
2011 techniques, for example bilinear or bicubic. Depending on the speed of the
2012 available interpolents, this choice may be affected by the <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ImageRenderingProperty"><span class="prop-name">‘image-rendering’</span></a> property setting. Note that
2013 implementations might choose approaches that minimize or eliminate resampling
2014 when not necessary to produce proper results, such as when the document is
2015 zoomed out such that <a href="#feConvolveMatrixElementKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a> is
2016 considerably smaller than a device pixel.</p>
2018 <div class="adef-list">
2019 <p><em>Attribute definitions:</em></p>
2020 <dl><dt id="feConvolveMatrixElementOrderAttribute"><span class="adef">order</span> = "<span class="attr-value"><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumberOptionalNumber"><number-optional-number></a></span>"</dt><dd>Indicates the number of cells in each dimension for <a href="#feConvolveMatrixElementKernelMatrixAttribute"><span class="attr-name">‘kernelMatrix’</span></a>. The values provided must be
2021 <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeInteger"><integer></a>
2022 s greater than zero. The first number, <orderX>, indicates the
2023 number of columns in the matrix. The second number, <orderY>,
2024 indicates the number of rows in the matrix. If <orderY> is not
2025 provided, it defaults to <orderX>.<br/>
2026 A typical value is order="3". It is recommended that only small values
2027 (e.g., 3) be used; higher values may result in very high CPU overhead
2028 and usually do not produce results that justify the impact on
2029 performance.<br/>
2030 If the attribute is not specified, the effect is as if a value of "3"
2031 were specified.<br/>
2032 <span class="anim-target">Animatable: yes.</span></dd><dt id="feConvolveMatrixElementKernelMatrixAttribute"><span class="adef">kernelMatrix</span> = "<span class="attr-value"><list of
2033 numbers></span>"</dt><dd>The list of <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a>
2034 s that make up the kernel matrix for the convolution. Values are
2035 separated by space characters and/or a comma. The number of entries in
2036 the list must equal <orderX> times <orderY>.<br/>
2037 <span class="anim-target">Animatable: yes.</span></dd><dt id="feConvolveMatrixElementDivisorAttribute"><span class="adef">divisor</span> = "<span class="attr-value"><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></span>"</dt><dd>After applying the <span class="attr-name">kernelMatrix</span> to the
2038 input image to yield a number, that number is divided by <a href="#feConvolveMatrixElementDivisorAttribute"><span class="attr-name">‘divisor’</span></a> to yield the final destination color
2039 value. A divisor that is the sum of all the matrix values tends to have
2040 an evening effect on the overall color intensity of the result. If the
2041 specified divisor is zero then the default value will be used instead.
2042 The default value is the sum of all values in kernelMatrix, with the
2043 exception that if the sum is zero, then the divisor is set to 1.<br/>
2044 <span class="anim-target">Animatable: yes.</span></dd><dt id="feConvolveMatrixElementBiasAttribute"><span class="adef">bias</span> = "<span class="attr-value"><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></span>"</dt><dd>After applying the <span class="attr-name">kernelMatrix</span> to the
2045 input image to yield a number and applying the <a href="#feConvolveMatrixElementDivisorAttribute"><span class="attr-name">‘divisor’</span></a>, the <a href="#feConvolveMatrixElementBiasAttribute"><span class="attr-name">‘bias’</span></a> attribute is added to each component. One
2046 application of <a href="#feConvolveMatrixElementBiasAttribute"><span class="attr-name">‘bias’</span></a> is when it is
2047 desirable to have <span class="attr-value">.5</span> gray value be the zero response of the filter.
2048 The bias property shifts the range of the filter. This allows representation of values that would
2049 otherwise be clamped to 0 or 1.<br/>
2050 The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feConvolveMatrixElementBiasAttribute"><span class="attr-name">‘bias’</span></a> is <span class="attr-value">0</span>.<br/>
2051 <span class="anim-target">Animatable: yes.</span></dd><dt id="feConvolveMatrixElementTargetXAttribute"><span class="adef">targetX</span> = "<span class="attr-value"><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeInteger"><integer></a></span>"</dt><dd>Determines the positioning in X of the convolution matrix relative to
2052 a given target pixel in the input image. The leftmost column of the
2053 matrix is column number zero. The value must be such that: 0 <=
2054 targetX < orderX. By default, the convolution matrix is centered in
2055 X over each pixel of the input image (i.e., targetX = floor ( orderX /
2056 2 )).<br/>
2057 <span class="anim-target">Animatable: yes.</span></dd><dt id="feConvolveMatrixElementTargetYAttribute"><span class="adef">targetY</span> = "<span class="attr-value"><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeInteger"><integer></a></span>"</dt><dd>Determines the positioning in Y of the convolution matrix relative to
2058 a given target pixel in the input image. The topmost row of the matrix
2059 is row number zero. The value must be such that: 0 <= targetY <
2060 orderY. By default, the convolution matrix is centered in Y over each
2061 pixel of the input image (i.e., targetY = floor ( orderY / 2 )).<br/>
2062 <span class="anim-target">Animatable: yes.</span></dd><dt id="feConvolveMatrixElementEdgeModeAttribute"><span class="adef">edgeMode</span> = "<span class="attr-value">duplicate | wrap |
2063 none</span>"</dt><dd><p>Determines how to extend the input image as necessary with color
2064 values so that the matrix operations can be applied when the kernel is
2065 positioned at or near the edge of the input image.</p>
2066 <p>"duplicate" indicates that the input image is extended along each of
2067 its borders as necessary by duplicating the color values at the given
2068 edge of the input image.</p>
2069 <pre>Original N-by-M image, where m=M-1 and n=N-1:
2070 11 12 ... 1m 1M
2071 21 22 ... 2m 2M
2072 .. .. ... .. ..
2073 n1 n2 ... nm nM
2074 N1 N2 ... Nm NM
2075 Extended by two pixels using "duplicate":
2076 11 11 11 12 ... 1m 1M 1M 1M
2077 11 11 11 12 ... 1m 1M 1M 1M
2078 11 11 11 12 ... 1m 1M 1M 1M
2079 21 21 21 22 ... 2m 2M 2M 2M
2080 .. .. .. .. ... .. .. .. ..
2081 n1 n1 n1 n2 ... nm nM nM nM
2082 N1 N1 N1 N2 ... Nm NM NM NM
2083 N1 N1 N1 N2 ... Nm NM NM NM
2084 N1 N1 N1 N2 ... Nm NM NM NM</pre>
2086 <div class="note-editor">
2087 ED: Consider making this into mathml</div>
2088 <p>"wrap" indicates that the input image is extended by taking the
2089 color values from the opposite edge of the image.</p>
2090 <pre>Extended by two pixels using "wrap":
2091 nm nM n1 n2 ... nm nM n1 n2
2092 Nm NM N1 N2 ... Nm NM N1 N2
2093 1m 1M 11 12 ... 1m 1M 11 12
2094 2m 2M 21 22 ... 2m 2M 21 22
2095 .. .. .. .. ... .. .. .. ..
2096 nm nM n1 n2 ... nm nM n1 n2
2097 Nm NM N1 N2 ... Nm NM N1 N2
2098 1m 1M 11 12 ... 1m 1M 11 12
2099 2m 2M 21 22 ... 2m 2M 21 22</pre>
2101 <div class="note-editor">
2102 ED: Consider making this into mathml</div>
2103 <p>The value <span class="attr-value">none</span> indicates that the input image is extended with pixel values
2104 of zero for R, G, B and A.</p>
2105 <p>The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feConvolveMatrixElementEdgeModeAttribute"><span class="attr-name">‘edgeMode’</span></a> is <span class="attr-value">duplicate</span>.</p>
2106 <p><span class="anim-target">Animatable: yes.</span></p>
2107 </dd><dt id="feConvolveMatrixElementKernelUnitLengthAttribute"><span class="adef">kernelUnitLength</span> = "<span class="attr-value"><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumberOptionalNumber"><number-optional-number></a></span>"</dt><dd>The first number is the <dx> value. The second number is the
2108 <dy> value. If the <dy> value is not specified, it defaults
2109 to the same value as <dx>. Indicates the intended distance in
2110 current filter units (i.e., units as determined by the value of
2111 attribute <a href="#FilterElementPrimitiveUnitsAttribute"><span class="attr-name">‘primitiveUnits’</span></a>) between successive columns
2112 and rows, respectively, in the <a href="#feConvolveMatrixElementKernelMatrixAttribute"><span class="attr-name">‘kernelMatrix’</span></a>. By specifying value(s) for
2113 <a href="#feConvolveMatrixElementKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a>, the kernel becomes defined
2114 in a scalable, abstract coordinate system. If <a href="#feConvolveMatrixElementKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a> is not specified, the default
2115 value is one pixel in the offscreen bitmap, which is a pixel-based
2116 coordinate system, and thus potentially not scalable. For some level of
2117 consistency across display media and user agents, it is necessary that
2118 a value be provided for at least one of <a href="#FilterElementFilterResAttribute"><span class="attr-name">‘filterRes’</span></a> and <a href="#feConvolveMatrixElementKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a>.
2119 In some implementations, the most consistent results and the fastest performance will be achieved if
2120 the pixel grid of the temporary offscreen images aligns with the pixel
2121 grid of the kernel.<br/>
2122 If a negative or zero value is specified the default value will be used
2123 instead. <br/>
2124 <span class="anim-target">Animatable: yes.</span></dd><dt id="feConvolveMatrixElementPreserveAlphaAttribute"><span class="adef">preserveAlpha</span> = "<span class="attr-value">false |
2125 true</span>"</dt><dd>A value of <span class="attr-value">false</span> indicates that the
2126 convolution will apply to all channels, including the alpha channel.
2127 In this case the <code>ALPHA<sub>X,Y</sub></code> of the
2128 <a href="#feConvolveMatrixElementFormula">convolution formula</a> for a given pixel is:
2129 <p class="filterformula">
2130 ALPHA<sub>X,Y</sub> = ( <br/>
2131 SUM
2132 <sub>I=0 to [<a href="#feConvolveMatrixElementOrderAttribute">'orderY'</a>-1]</sub> { <br/>
2133 SUM
2134 <sub>J=0 to [<a href="#feConvolveMatrixElementOrderAttribute">'orderX'</a>-1]</sub> { <br/>
2135 SOURCE
2136 <sub>X-<a href="#feConvolveMatrixElementTargetXAttribute"><span class="attr-name">‘targetX’</span></a>+J, Y-<a href="#feConvolveMatrixElementTargetYAttribute"><span class="attr-name">‘targetY’</span></a>+I</sub> *
2137 <a href="#feConvolveMatrixElementKernelMatrixAttribute"><span class="attr-name">‘kernelMatrix’</span></a><sub><a href="#feConvolveMatrixElementOrderAttribute">'orderX'</a>-J-1,
2138 <a href="#feConvolveMatrixElementOrderAttribute">'orderY'</a>-I-1</sub> <br/>
2139 } <br/>
2140 } <br/>
2141 ) /
2142 <a href="#feConvolveMatrixElementDivisorAttribute"><span class="attr-name">‘divisor’</span></a> +
2143 <a href="#feConvolveMatrixElementBiasAttribute"><span class="attr-name">‘bias’</span></a>
2144 <br/>
2145 </p>
2146 <br/>
2147 A value of <span class="attr-value">true</span> indicates that the
2148 convolution will only apply to the color channels. In this case, the
2149 filter will temporarily unpremultiply the color component values, apply
2150 the kernel, and then re-premultiply at the end.
2151 In this case the <code>ALPHA<sub>X,Y</sub></code>
2152 of the <a href="#feConvolveMatrixElementFormula">convolution formula</a> for a given pixel is:
2153 <p class="filterformula">
2154 ALPHA<sub>X,Y</sub> = SOURCE<sub>X,Y</sub>
2155 </p>
2156 The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feConvolveMatrixElementPreserveAlphaAttribute"><span class="attr-name">‘preserveAlpha’</span></a> is <span class="attr-value">false</span>.<br/>
2157 <span class="anim-target">Animatable: yes.</span></dd></dl>
2158 </div>
2162 <h2 id="feDiffuseLightingElement">15 Filter primitive <span class="element-name">‘feDiffuseLighting’</span></h2>
2164 <div class="element-summary"><div class="element-summary-name"><span class="element-name">‘feDiffuseLighting’</span></div><dl><dt>Categories:</dt><dd><a href="#TermFilterPrimitiveElements">Filter primitives element</a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermFilterPrimitiveElement">filter primitive element</a></dd><dt>Content model:</dt><dd>Any number of the following elements, in any order:
2165 <ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermLightSourceElement">light source elements</a><span class="expanding"> — <a href="#feDistantLightElement"><span class="element-name">‘feDistantLight’</span></a>, <a href="#fePointLightElement"><span class="element-name">‘fePointLight’</span></a>, <a href="#feSpotLightElement"><span class="element-name">‘feSpotLight’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#AnimateElement"><span class="element-name">‘animate’</span></a></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#AnimateColorElement"><span class="element-name">‘animateColor’</span></a></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#SetElement"><span class="element-name">‘set’</span></a></li></ul></dd><dt>Attributes:</dt><dd><ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermCoreAttributes">core attributes</a><span class="expanding"> — <a href="struct.html#IDAttribute"><span class="attr-name">‘id’</span></a>, <a href="struct.html#XMLBaseAttribute"><span class="attr-name">‘xml:base’</span></a>, <a href="struct.html#XMLLangAttribute"><span class="attr-name">‘xml:lang’</span></a>, <a href="struct.html#XMLSpaceAttribute"><span class="attr-name">‘xml:space’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermPresentationAttribute">presentation attributes</a><span class="expanding"> — <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#AlignmentBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘alignment-baseline’">‘alignment-baseline’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#BaselineShiftProperty"><span class="attr-name" title="Presentation attribute for property ‘baseline-shift’">‘baseline-shift’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipProperty"><span class="attr-name" title="Presentation attribute for property ‘clip’">‘clip’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipPathProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-path’">‘clip-path’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-rule’">‘clip-rule’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProperty"><span class="attr-name" title="Presentation attribute for property ‘color’">‘color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation’">‘color-interpolation’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationFiltersProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation-filters’">‘color-interpolation-filters’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProfileProperty"><span class="attr-name" title="Presentation attribute for property ‘color-profile’">‘color-profile’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘color-rendering’">‘color-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#CursorProperty"><span class="attr-name" title="Presentation attribute for property ‘cursor’">‘cursor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DirectionProperty"><span class="attr-name" title="Presentation attribute for property ‘direction’">‘direction’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#DisplayProperty"><span class="attr-name" title="Presentation attribute for property ‘display’">‘display’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DominantBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘dominant-baseline’">‘dominant-baseline’</span></a>, <a href="#EnableBackgroundProperty"><span class="attr-name" title="Presentation attribute for property ‘enable-background’">‘enable-background’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillProperty"><span class="attr-name" title="Presentation attribute for property ‘fill’">‘fill’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-opacity’">‘fill-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-rule’">‘fill-rule’</span></a>, <a href="#FilterProperty"><span class="attr-name" title="Presentation attribute for property ‘filter’">‘filter’</span></a>, <a href="#FloodColorProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-color’">‘flood-color’</span></a>, <a href="#FloodOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-opacity’">‘flood-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontFamilyProperty"><span class="attr-name" title="Presentation attribute for property ‘font-family’">‘font-family’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size’">‘font-size’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeAdjustProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size-adjust’">‘font-size-adjust’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStretchProperty"><span class="attr-name" title="Presentation attribute for property ‘font-stretch’">‘font-stretch’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStyleProperty"><span class="attr-name" title="Presentation attribute for property ‘font-style’">‘font-style’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontVariantProperty"><span class="attr-name" title="Presentation attribute for property ‘font-variant’">‘font-variant’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontWeightProperty"><span class="attr-name" title="Presentation attribute for property ‘font-weight’">‘font-weight’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationHorizontalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-horizontal’">‘glyph-orientation-horizontal’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationVerticalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-vertical’">‘glyph-orientation-vertical’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ImageRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘image-rendering’">‘image-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#KerningProperty"><span class="attr-name" title="Presentation attribute for property ‘kerning’">‘kerning’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#LetterSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘letter-spacing’">‘letter-spacing’</span></a>, <a href="#LightingColorProperty"><span class="attr-name" title="Presentation attribute for property ‘lighting-color’">‘lighting-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerEndProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-end’">‘marker-end’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerMidProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-mid’">‘marker-mid’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerStartProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-start’">‘marker-start’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#MaskProperty"><span class="attr-name" title="Presentation attribute for property ‘mask’">‘mask’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘opacity’">‘opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OverflowProperty"><span class="attr-name" title="Presentation attribute for property ‘overflow’">‘overflow’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#PointerEventsProperty"><span class="attr-name" title="Presentation attribute for property ‘pointer-events’">‘pointer-events’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ShapeRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘shape-rendering’">‘shape-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopColorProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-color’">‘stop-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-opacity’">‘stop-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke’">‘stroke’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDasharrayProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dasharray’">‘stroke-dasharray’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDashoffsetProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dashoffset’">‘stroke-dashoffset’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinecapProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linecap’">‘stroke-linecap’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinejoinProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linejoin’">‘stroke-linejoin’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeMiterlimitProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-miterlimit’">‘stroke-miterlimit’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-opacity’">‘stroke-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeWidthProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-width’">‘stroke-width’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextAnchorProperty"><span class="attr-name" title="Presentation attribute for property ‘text-anchor’">‘text-anchor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextDecorationProperty"><span class="attr-name" title="Presentation attribute for property ‘text-decoration’">‘text-decoration’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#TextRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘text-rendering’">‘text-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#UnicodeBidiProperty"><span class="attr-name" title="Presentation attribute for property ‘unicode-bidi’">‘unicode-bidi’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#VisibilityProperty"><span class="attr-name" title="Presentation attribute for property ‘visibility’">‘visibility’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WordSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘word-spacing’">‘word-spacing’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WritingModeProperty"><span class="attr-name" title="Presentation attribute for property ‘writing-mode’">‘writing-mode’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermFilterPrimitiveAttributes">filter primitive attributes</a><span class="expanding"> — <a href="filters.html#FilterPrimitiveXAttribute"><span class="attr-name">‘x’</span></a>, <a href="filters.html#FilterPrimitiveYAttribute"><span class="attr-name">‘y’</span></a>, <a href="filters.html#FilterPrimitiveWidthAttribute"><span class="attr-name">‘width’</span></a>, <a href="filters.html#FilterPrimitiveHeightAttribute"><span class="attr-name">‘height’</span></a>, <a href="filters.html#FilterPrimitiveResultAttribute"><span class="attr-name">‘result’</span></a></span></li><li><a href="styling.html#ClassAttribute"><span class="attr-name">‘class’</span></a></li><li><a href="styling.html#StyleAttribute"><span class="attr-name">‘style’</span></a></li><li><a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a></li><li><a href="#feDiffuseLightingSurfaceScaleAttribute"><span class="attr-name">‘surfaceScale’</span></a></li><li><a href="#feDiffuseLightingDiffuseConstantAttribute"><span class="attr-name">‘diffuseConstant’</span></a></li><li><a href="#feDiffuseLightingKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a></li></ul></dd><dt>DOM Interfaces:</dt><dd><ul class="no-bullets"><li><a class="idlinterface" href="#InterfaceSVGFEDiffuseLightingElement">SVGFEDiffuseLightingElement</a></li></ul></dd></dl></div>
2167 <p>This filter primitive lights an image using the alpha channel as a bump
2168 map. The resulting image is an RGBA opaque image based on the light color
2169 with alpha = 1.0 everywhere. The lighting calculation follows the standard
2170 diffuse component of the Phong lighting model. The resulting image depends on
2171 the light color, light position and surface geometry of the input bump
2172 map.</p>
2174 <p>The light map produced by this filter primitive can be combined with a
2175 texture image using the multiply term of the <em>arithmetic</em> <a href="#feCompositeElement"><span class="element-name">‘feComposite’</span></a> compositing method. Multiple
2176 light sources can be simulated by adding several of these light maps together
2177 before applying it to the texture image.</p>
2179 <p>The formulas below make use of 3x3 filters. Because they operate on
2180 pixels, such filters are inherently resolution-dependent. To make <a href="#feDiffuseLightingElement"><span class="element-name">‘feDiffuseLighting’</span></a> produce
2181 resolution-independent results, an explicit value should be provided for
2182 either the <a href="#FilterElementFilterResAttribute"><span class="attr-name">‘filterRes’</span></a> attribute on the <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element
2183 and/or attribute <a href="#feDiffuseLightingKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a>.</p>
2185 <p><a href="#feDiffuseLightingKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a>, in combination with the other
2186 attributes, defines an implicit pixel grid in the filter effects coordinate
2187 system (i.e., the coordinate system established by the <a href="#FilterElementPrimitiveUnitsAttribute"><span class="attr-name">‘primitiveUnits’</span></a> attribute). If the pixel grid
2188 established by <a href="#feDiffuseLightingKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a> is not scaled to match the
2189 pixel grid established by attribute <a href="#FilterElementFilterResAttribute"><span class="attr-name">‘filterRes’</span></a> (implicitly or explicitly), then the
2190 input image will be temporarily rescaled to match its pixels with <a href="#feDiffuseLightingKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a>. The 3x3 filters are applied to the resampled image. After applying the filter, the image is resampled back
2191 to its original resolution.</p>
2193 <p><span class="requirement" id="assert_diffuseLightingImageResampling">When the image must be resampled, it is recommended that high quality viewers make use of appropriate interpolation techniques, for example
2194 bilinear or bicubic.</span> Depending on the speed of the available interpolents,
2195 this choice may be affected by the <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ImageRenderingProperty"><span class="prop-name">‘image-rendering’</span></a> property setting. Note that
2196 implementations might choose approaches that minimize or eliminate resampling
2197 when not necessary to produce proper results, such as when the document is
2198 zoomed out such that <a href="#feDiffuseLightingKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a> is
2199 considerably smaller than a device pixel.</p>
2201 <p>For the formulas that follow, the
2202 <code>Norm(A<sub>x</sub>,A<sub>y</sub>,A<sub>z</sub>)</code> function is
2203 defined as:</p>
2205 <div class="note-editor">
2206 ED: Consider making the following in mathml</div>
2208 <p class="filterformula">Norm(A<sub>x</sub>,A<sub>y</sub>,A<sub>z</sub>) =
2209 sqrt(A<sub>x</sub>^2+A<sub>y</sub>^2+A<sub>z</sub>^2)</p>
2211 <p>The resulting RGBA image is computed as follows:</p>
2213 <p class="filterformula">D<sub>r</sub> = k<sub>d</sub> * N.L *
2214 L<sub>r</sub><br/>
2215 D<sub>g</sub> = k<sub>d</sub> * N.L * L<sub>g</sub><br/>
2216 D<sub>b</sub> = k<sub>d</sub> * N.L * L<sub>b</sub><br/>
2217 D<sub>a</sub> = 1.0</p>
2219 <p>where</p>
2220 <dl><dd>k<sub>d</sub> = diffuse lighting constant<br/>
2221 N = surface normal unit vector, a function of x and y<br/>
2222 L = unit vector pointing from surface to light, a function of x and y
2223 in the point and spot light cases<br/>
2224 L<sub>r</sub>,L<sub>g</sub>,L<sub>b</sub> = RGB components of light, a
2225 function of x and y in the spot light case</dd></dl>
2227 <p>N is a function of x and y and depends on the surface gradient as
2228 follows:</p>
2230 <p>The surface described by the input alpha image I(x,y) is:</p>
2232 <p class="filterformula">Z (x,y) = surfaceScale * I(x,y)</p>
2234 <p id="SurfaceNormalCalculations">Surface normal is calculated using the Sobel gradient 3x3 filter.
2235 Different filter kernels are used depending on whether the given pixel is on
2236 the interior or an edge. For each case, the formula is:</p>
2237 <p class="filterformula">N<sub>x</sub> (x,y) = - surfaceScale *
2238 FACTOR<sub>x</sub> *<br/>
2239 (K<sub>x</sub>(0,0)*I(x-dx,y-dy) +
2240 K<sub>x</sub>(1,0)*I(x,y-dy) +
2241 K<sub>x</sub>(2,0)*I(x+dx,y-dy) +<br/>
2242 K<sub>x</sub>(0,1)*I(x-dx,y) +
2243 K<sub>x</sub>(1,1)*I(x,y) +
2244 K<sub>x</sub>(2,1)*I(x+dx,y) +<br/>
2245 K<sub>x</sub>(0,2)*I(x-dx,y+dy) +
2246 K<sub>x</sub>(1,2)*I(x,y+dy) +
2247 K<sub>x</sub>(2,2)*I(x+dx,y+dy))<br/>
2248 N<sub>y</sub> (x,y) = - surfaceScale * FACTOR<sub>y</sub>
2249 *<br/>
2250 (K<sub>y</sub>(0,0)*I(x-dx,y-dy) +
2251 K<sub>y</sub>(1,0)*I(x,y-dy) +
2252 K<sub>y</sub>(2,0)*I(x+dx,y-dy) +<br/>
2253 K<sub>y</sub>(0,1)*I(x-dx,y) +
2254 K<sub>y</sub>(1,1)*I(x,y) +
2255 K<sub>y</sub>(2,1)*I(x+dx,y) +<br/>
2256 K<sub>y</sub>(0,2)*I(x-dx,y+dy) +
2257 K<sub>y</sub>(1,2)*I(x,y+dy) +
2258 K<sub>y</sub>(2,2)*I(x+dx,y+dy))<br/>
2259 N<sub>z</sub> (x,y) = 1.0<br/>
2260 <br/>
2261 N = (N<sub>x</sub>, N<sub>y</sub>, N<sub>z</sub>) /
2262 Norm((N<sub>x</sub>,N<sub>y</sub>,N<sub>z</sub>))</p>
2264 <p>In these formulas, the <code>dx</code> and <code>dy</code> values (e.g.,
2265 <code>I(x-dx,y-dy)</code>), represent deltas relative to a given
2266 <code>(x,y)</code> position for the purpose of estimating the slope of the
2267 surface at that point. These deltas are determined by the value (explicit or
2268 implicit) of attribute <a href="#feDiffuseLightingKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a>.</p>
2270 <table summary="feDiffuseLighting formulas" border="1"><colgroup><col width="33.3%"/><col width="33.3%"/><col width="*"/></colgroup><tbody><tr><td><p>Top/left corner:</p>
2272 <p class="filterformula">FACTOR<sub>x</sub>=2/(3*dx)<br/>
2273 K<sub>x</sub> =<br/>
2274 | 0 0 0 |<br/>
2275 | 0 -2 2 |<br/>
2276 | 0 -1 1 |<br/>
2277 <br/>
2278 FACTOR<sub>y</sub>=2/(3*dy)<br/>
2279 K<sub>y</sub> = <br/>
2280 | 0 0 0 |<br/>
2281 | 0 -2 -1 |<br/>
2282 | 0 2 1 |</p>
2283 </td><td><p>Top row:</p>
2285 <p class="filterformula">FACTOR<sub>x</sub>=1/(3*dx)<br/>
2286 K<sub>x</sub> =<br/>
2287 | 0 0 0 |<br/>
2288 | -2 0 2 |<br/>
2289 | -1 0 1 |<br/>
2290 <br/>
2291 FACTOR<sub>y</sub>=1/(2*dy)<br/>
2292 K<sub>y</sub> = <br/>
2293 | 0 0 0 |<br/>
2294 | -1 -2 -1 |<br/>
2295 | 1 2 1 |</p>
2296 </td><td><p>Top/right corner:</p>
2298 <p class="filterformula">FACTOR<sub>x</sub>=2/(3*dx)<br/>
2299 K<sub>x</sub> =<br/>
2300 | 0 0 0 |<br/>
2301 | -2 2 0 |<br/>
2302 | -1 1 0 |<br/>
2303 <br/>
2304 FACTOR<sub>y</sub>=2/(3*dy)<br/>
2305 K<sub>y</sub> = <br/>
2306 | 0 0 0 |<br/>
2307 | -1 -2 0 |<br/>
2308 | 1 2 0 |</p>
2309 </td></tr><tr><td><p>Left column:</p>
2311 <p class="filterformula">FACTOR<sub>x</sub>=1/(2*dx)<br/>
2312 K<sub>x</sub> =<br/>
2313 | 0 -1 1 |<br/>
2314 | 0 -2 2 |<br/>
2315 | 0 -1 1 |<br/>
2316 <br/>
2317 FACTOR<sub>y</sub>=1/(3*dy)<br/>
2318 K<sub>y</sub> = <br/>
2319 | 0 -2 -1 |<br/>
2320 | 0 0 0 |<br/>
2321 | 0 2 1 |</p>
2322 </td><td><p>Interior pixels:</p>
2324 <p class="filterformula">FACTOR<sub>x</sub>=1/(4*dx)<br/>
2325 K<sub>x</sub> =<br/>
2326 | -1 0 1 |<br/>
2327 | -2 0 2 |<br/>
2328 | -1 0 1 |<br/>
2329 <br/>
2330 FACTOR<sub>y</sub>=1/(4*dy)<br/>
2331 K<sub>y</sub> = <br/>
2332 | -1 -2 -1 |<br/>
2333 | 0 0 0 |<br/>
2334 | 1 2 1 |</p>
2335 </td><td><p>Right column:</p>
2337 <p class="filterformula">FACTOR<sub>x</sub>=1/(2*dx)<br/>
2338 K<sub>x</sub> =<br/>
2339 | -1 1 0|<br/>
2340 | -2 2 0|<br/>
2341 | -1 1 0|<br/>
2342 <br/>
2343 FACTOR<sub>y</sub>=1/(3*dy)<br/>
2344 K<sub>y</sub> = <br/>
2345 | -1 -2 0 |<br/>
2346 | 0 0 0 |<br/>
2347 | 1 2 0 |</p>
2348 </td></tr><tr><td><p>Bottom/left corner:</p>
2350 <p class="filterformula">FACTOR<sub>x</sub>=2/(3*dx)<br/>
2351 K<sub>x</sub> =<br/>
2352 | 0 -1 1 |<br/>
2353 | 0 -2 2 |<br/>
2354 | 0 0 0 |<br/>
2355 <br/>
2356 FACTOR<sub>y</sub>=2/(3*dy)<br/>
2357 K<sub>y</sub> = <br/>
2358 | 0 -2 -1 |<br/>
2359 | 0 2 1 |<br/>
2360 | 0 0 0 |</p>
2361 </td><td><p>Bottom row:</p>
2363 <p class="filterformula">FACTOR<sub>x</sub>=1/(3*dx)<br/>
2364 K<sub>x</sub> =<br/>
2365 | -1 0 1 |<br/>
2366 | -2 0 2 |<br/>
2367 | 0 0 0 |<br/>
2368 <br/>
2369 FACTOR<sub>y</sub>=1/(2*dy)<br/>
2370 K<sub>y</sub> = <br/>
2371 | -1 -2 -1 |<br/>
2372 | 1 2 1 |<br/>
2373 | 0 0 0 |</p>
2374 </td><td><p>Bottom/right corner:</p>
2376 <p class="filterformula">FACTOR<sub>x</sub>=2/(3*dx)<br/>
2377 K<sub>x</sub> =<br/>
2378 | -1 1 0 |<br/>
2379 | -2 2 0 |<br/>
2380 | 0 0 0 |<br/>
2381 <br/>
2382 FACTOR<sub>y</sub>=2/(3*dy)<br/>
2383 K<sub>y</sub> = <br/>
2384 | -1 -2 0 |<br/>
2385 | 1 2 0 |<br/>
2386 | 0 0 0 |</p>
2387 </td></tr></tbody></table>
2389 <p>L, the unit vector from the image sample to the light, is calculated as
2390 follows:</p>
2392 <p>For Infinite light sources it is constant:</p>
2394 <p class="filterformula">L<sub>x</sub> = cos(azimuth)*cos(elevation)<br/>
2395 L<sub>y</sub> = sin(azimuth)*cos(elevation)<br/>
2396 L<sub>z</sub> = sin(elevation)</p>
2398 <p>For Point and spot lights it is a function of position:</p>
2400 <p class="filterformula">L<sub>x</sub> = Light<sub>x</sub> - x<br/>
2401 L<sub>y</sub> = Light<sub>y</sub> - y<br/>
2402 L<sub>z</sub> = Light<sub>z</sub> - Z(x,y)<br/>
2403 <br/>
2404 L = (L<sub>x</sub>, L<sub>y</sub>, L<sub>z</sub>) / Norm(L<sub>x</sub>,
2405 L<sub>y</sub>, L<sub>z</sub>)</p>
2407 <p>where Light<sub>x</sub>, Light<sub>y</sub>, and Light<sub>z</sub> are the
2408 input light position.</p>
2410 <p>L<sub>r</sub>,L<sub>g</sub>,L<sub>b</sub>, the light color vector, is a
2411 function of position in the spot light case only:</p>
2413 <p class="filterformula">L<sub>r</sub> =
2414 Light<sub>r</sub>*pow((-L.S),specularExponent)<br/>
2415 L<sub>g</sub> = Light<sub>g</sub>*pow((-L.S),specularExponent)<br/>
2416 L<sub>b</sub> = Light<sub>b</sub>*pow((-L.S),specularExponent)</p>
2418 <p>where S is the unit vector pointing from the light to the point
2419 (pointsAtX, pointsAtY, pointsAtZ) in the x-y plane:</p>
2421 <p class="filterformula">S<sub>x</sub> = pointsAtX - Light<sub>x</sub><br/>
2422 S<sub>y</sub> = pointsAtY - Light<sub>y</sub><br/>
2423 S<sub>z</sub> = pointsAtZ - Light<sub>z</sub><br/>
2424 <br/>
2425 S = (S<sub>x</sub>, S<sub>y</sub>, S<sub>z</sub>) / Norm(S<sub>x</sub>,
2426 S<sub>y</sub>, S<sub>z</sub>)</p>
2428 <p>If L.S is positive, no light is present. (L<sub>r</sub> = L<sub>g</sub> =
2429 L<sub>b</sub> = 0). If <a href="#feSpotLightLimitingConeAngleAttribute"><span class="attr-name">‘limitingConeAngle’</span></a> is specified, -L.S < cos(limitingConeAngle) also indicates that no light is present.</p>
2431 <div class="adef-list">
2432 <p><em>Attribute definitions:</em></p>
2433 <dl><dt id="feDiffuseLightingSurfaceScaleAttribute"><span class="adef">surfaceScale</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></em>"</dt><dd>height of surface when A<sub>in</sub> = 1.<br/>
2434 If the attribute is not specified, then the effect is as if a value of
2435 <span class="attr-value">1</span> were specified.<br/>
2436 <span class="anim-target">Animatable: yes.</span></dd><dt id="feDiffuseLightingDiffuseConstantAttribute"><span class="adef">diffuseConstant</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></em>"</dt><dd>kd in Phong lighting model. In SVG, this can be any non-negative
2437 number.<br/>
2438 If the attribute is not specified, then the effect is as if a value of
2439 <span class="attr-value">1</span> were specified.<br/>
2440 <span class="anim-target">Animatable: yes.</span></dd><dt id="feDiffuseLightingKernelUnitLengthAttribute"><span class="adef">kernelUnitLength</span> = "<span class="attr-value"><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumberOptionalNumber"><number-optional-number></a></span>"</dt><dd>The first number is the <dx> value. The second number is the
2441 <dy> value. If the <dy> value is not specified, it defaults
2442 to the same value as <dx>. Indicates the intended distance in
2443 current filter units (i.e., units as determined by the value of
2444 attribute <a href="#FilterElementPrimitiveUnitsAttribute"><span class="attr-name">‘primitiveUnits’</span></a>) for <code>dx</code> and
2445 <code>dy</code>, respectively, in the <a href="#SurfaceNormalCalculations">surface normal calculation
2446 formulas</a>. By specifying value(s) for <span class="attr-name">kernelUnitLength</span>, the kernel becomes defined
2447 in a scalable, abstract coordinate system. If <span class="attr-name">kernelUnitLength</span> is not specified, the
2448 <code>dx</code> and <code>dy</code> values should represent very small
2449 deltas relative to a given <code>(x,y)</code> position, which might be
2450 implemented in some cases as one pixel in the intermediate image
2451 offscreen bitmap, which is a pixel-based coordinate system, and thus
2452 potentially not scalable. For some level of consistency across display
2453 media and user agents, it is necessary that a value be provided for at
2454 least one of <a href="#FilterElementFilterResAttribute"><span class="attr-name">‘filterRes’</span></a> and <span class="attr-name">kernelUnitLength</span>. Discussion of intermediate
2455 images are in the <a href="#Introduction">Introduction</a> and in the
2456 description of attribute <a href="#FilterElementFilterResAttribute"><span class="attr-name">‘filterRes’</span></a>.<br/>
2457 If a negative or zero value is specified the default value will be used
2458 instead. <br/>
2459 <span class="anim-target">Animatable: yes.</span></dd></dl>
2460 </div>
2462 <p>The light source is defined by one of the child elements <a href="#feDistantLightElement"><span class="element-name">‘feDistantLight’</span></a>,
2463 <a href="#fePointLightElement"><span class="element-name">‘fePointLight’</span></a> or <a href="#feSpotLightElement"><span class="element-name">‘feSpotLight’</span></a>. The light color is specified
2464 by property <a href="#LightingColorProperty"><span class="prop-name">‘lighting-color’</span></a>.</p>
2466 <h2 id="feDisplacementMapElement">16 Filter primitive <span class="element-name">‘feDisplacementMap’</span></h2>
2468 <div class="element-summary"><div class="element-summary-name"><span class="element-name">‘feDisplacementMap’</span></div><dl><dt>Categories:</dt><dd><a href="#TermFilterPrimitiveElements">Filter primitives element</a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermFilterPrimitiveElement">filter primitive element</a></dd><dt>Content model:</dt><dd>Any number of the following elements, in any order:
2469 <ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#AnimateElement"><span class="element-name">‘animate’</span></a></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#SetElement"><span class="element-name">‘set’</span></a></li></ul></dd><dt>Attributes:</dt><dd><ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermCoreAttributes">core attributes</a><span class="expanding"> — <a href="struct.html#IDAttribute"><span class="attr-name">‘id’</span></a>, <a href="struct.html#XMLBaseAttribute"><span class="attr-name">‘xml:base’</span></a>, <a href="struct.html#XMLLangAttribute"><span class="attr-name">‘xml:lang’</span></a>, <a href="struct.html#XMLSpaceAttribute"><span class="attr-name">‘xml:space’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermPresentationAttribute">presentation attributes</a><span class="expanding"> — <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#AlignmentBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘alignment-baseline’">‘alignment-baseline’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#BaselineShiftProperty"><span class="attr-name" title="Presentation attribute for property ‘baseline-shift’">‘baseline-shift’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipProperty"><span class="attr-name" title="Presentation attribute for property ‘clip’">‘clip’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipPathProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-path’">‘clip-path’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-rule’">‘clip-rule’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProperty"><span class="attr-name" title="Presentation attribute for property ‘color’">‘color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation’">‘color-interpolation’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationFiltersProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation-filters’">‘color-interpolation-filters’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProfileProperty"><span class="attr-name" title="Presentation attribute for property ‘color-profile’">‘color-profile’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘color-rendering’">‘color-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#CursorProperty"><span class="attr-name" title="Presentation attribute for property ‘cursor’">‘cursor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DirectionProperty"><span class="attr-name" title="Presentation attribute for property ‘direction’">‘direction’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#DisplayProperty"><span class="attr-name" title="Presentation attribute for property ‘display’">‘display’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DominantBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘dominant-baseline’">‘dominant-baseline’</span></a>, <a href="#EnableBackgroundProperty"><span class="attr-name" title="Presentation attribute for property ‘enable-background’">‘enable-background’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillProperty"><span class="attr-name" title="Presentation attribute for property ‘fill’">‘fill’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-opacity’">‘fill-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-rule’">‘fill-rule’</span></a>, <a href="#FilterProperty"><span class="attr-name" title="Presentation attribute for property ‘filter’">‘filter’</span></a>, <a href="#FloodColorProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-color’">‘flood-color’</span></a>, <a href="#FloodOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-opacity’">‘flood-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontFamilyProperty"><span class="attr-name" title="Presentation attribute for property ‘font-family’">‘font-family’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size’">‘font-size’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeAdjustProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size-adjust’">‘font-size-adjust’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStretchProperty"><span class="attr-name" title="Presentation attribute for property ‘font-stretch’">‘font-stretch’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStyleProperty"><span class="attr-name" title="Presentation attribute for property ‘font-style’">‘font-style’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontVariantProperty"><span class="attr-name" title="Presentation attribute for property ‘font-variant’">‘font-variant’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontWeightProperty"><span class="attr-name" title="Presentation attribute for property ‘font-weight’">‘font-weight’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationHorizontalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-horizontal’">‘glyph-orientation-horizontal’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationVerticalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-vertical’">‘glyph-orientation-vertical’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ImageRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘image-rendering’">‘image-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#KerningProperty"><span class="attr-name" title="Presentation attribute for property ‘kerning’">‘kerning’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#LetterSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘letter-spacing’">‘letter-spacing’</span></a>, <a href="#LightingColorProperty"><span class="attr-name" title="Presentation attribute for property ‘lighting-color’">‘lighting-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerEndProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-end’">‘marker-end’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerMidProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-mid’">‘marker-mid’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerStartProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-start’">‘marker-start’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#MaskProperty"><span class="attr-name" title="Presentation attribute for property ‘mask’">‘mask’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘opacity’">‘opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OverflowProperty"><span class="attr-name" title="Presentation attribute for property ‘overflow’">‘overflow’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#PointerEventsProperty"><span class="attr-name" title="Presentation attribute for property ‘pointer-events’">‘pointer-events’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ShapeRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘shape-rendering’">‘shape-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopColorProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-color’">‘stop-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-opacity’">‘stop-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke’">‘stroke’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDasharrayProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dasharray’">‘stroke-dasharray’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDashoffsetProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dashoffset’">‘stroke-dashoffset’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinecapProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linecap’">‘stroke-linecap’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinejoinProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linejoin’">‘stroke-linejoin’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeMiterlimitProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-miterlimit’">‘stroke-miterlimit’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-opacity’">‘stroke-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeWidthProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-width’">‘stroke-width’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextAnchorProperty"><span class="attr-name" title="Presentation attribute for property ‘text-anchor’">‘text-anchor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextDecorationProperty"><span class="attr-name" title="Presentation attribute for property ‘text-decoration’">‘text-decoration’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#TextRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘text-rendering’">‘text-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#UnicodeBidiProperty"><span class="attr-name" title="Presentation attribute for property ‘unicode-bidi’">‘unicode-bidi’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#VisibilityProperty"><span class="attr-name" title="Presentation attribute for property ‘visibility’">‘visibility’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WordSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘word-spacing’">‘word-spacing’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WritingModeProperty"><span class="attr-name" title="Presentation attribute for property ‘writing-mode’">‘writing-mode’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermFilterPrimitiveAttributes">filter primitive attributes</a><span class="expanding"> — <a href="filters.html#FilterPrimitiveXAttribute"><span class="attr-name">‘x’</span></a>, <a href="filters.html#FilterPrimitiveYAttribute"><span class="attr-name">‘y’</span></a>, <a href="filters.html#FilterPrimitiveWidthAttribute"><span class="attr-name">‘width’</span></a>, <a href="filters.html#FilterPrimitiveHeightAttribute"><span class="attr-name">‘height’</span></a>, <a href="filters.html#FilterPrimitiveResultAttribute"><span class="attr-name">‘result’</span></a></span></li><li><a href="styling.html#ClassAttribute"><span class="attr-name">‘class’</span></a></li><li><a href="styling.html#StyleAttribute"><span class="attr-name">‘style’</span></a></li><li><a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a></li><li><a href="#feDisplacementMapIn2Attribute"><span class="attr-name">‘in2’</span></a></li><li><a href="#feDisplacementMapScaleAttribute"><span class="attr-name">‘scale’</span></a></li><li><a href="#feDisplacementMapXChannelSelectorAttribute"><span class="attr-name">‘xChannelSelector’</span></a></li><li><a href="#feDisplacementMapYChannelSelectorAttribute"><span class="attr-name">‘yChannelSelector’</span></a></li></ul></dd><dt>DOM Interfaces:</dt><dd><ul class="no-bullets"><li><a class="idlinterface" href="#InterfaceSVGFEDisplacementMapElement">SVGFEDisplacementMapElement</a></li></ul></dd></dl></div>
2471 <p>This filter primitive uses the pixels values from the image from <a href="#feDisplacementMapIn2Attribute"><span class="attr-name">‘in2’</span></a>
2472 to spatially displace the image from <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a>.
2473 This is the transformation to be performed:</p>
2475 <pre> P'(x,y) ← P( x + scale * (XC(x,y) - .5), y + scale * (YC(x,y) - .5))
2476 </pre>
2478 <p>where P(x,y) is the input image, <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a>, and
2479 P'(x,y) is the destination. XC(x,y) and YC(x,y) are the component values of
2480 the channel designated by the <a href="#feDisplacementMapXChannelSelectorAttribute"><span class="attr-name">‘xChannelSelector’</span></a> and
2481 <a href="#feDisplacementMapYChannelSelectorAttribute"><span class="attr-name">‘yChannelSelector’</span></a>. For example, to use the R component of <a href="#feDisplacementMapIn2Attribute"><span class="attr-name">‘in2’</span></a>
2482 to control displacement in x and the G component of Image2 to control
2483 displacement in y, set <a href="#feDisplacementMapXChannelSelectorAttribute"><span class="attr-name">‘xChannelSelector’</span></a> to <span class="attr-value">"R"</span> and
2484 <a href="#feDisplacementMapYChannelSelectorAttribute"><span class="attr-name">‘yChannelSelector’</span></a> to <span class="attr-value">"G"</span>.</p>
2486 <p>The displacement map, <a href="#feDisplacementMapIn2Attribute"><span class="attr-name">‘in2’</span></a>, defines the inverse of the mapping
2487 performed.</p>
2489 <p>The input image in is to remain premultiplied for this filter primitive. The calculations using the pixel values from <a href="#feDisplacementMapIn2Attribute"><span class="attr-name">‘in2’</span></a> are performed using non-premultiplied color values. If the image from <a href="#feDisplacementMapIn2Attribute"><span class="attr-name">‘in2’</span></a> consists of premultiplied color values, those values are automatically converted into non-premultiplied color values before performing this operation.</p>
2491 <p>This filter can have arbitrary non-localized effect on the input which
2492 might require substantial buffering in the processing pipeline. However with
2493 this formulation, any intermediate buffering needs can be determined by
2494 <a href="#feDisplacementMapScaleAttribute"><span class="attr-name">‘scale’</span></a> which represents the maximum range of displacement in either x
2495 or y.</p>
2497 <p>When applying this filter, the source pixel location will often lie
2498 between several source pixels. In this case it is recommended that high
2499 quality viewers apply an interpolent on the surrounding pixels, for example
2500 bilinear or bicubic, rather than simply selecting the nearest source pixel.
2501 Depending on the speed of the available interpolents, this choice may be
2502 affected by the <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ImageRenderingProperty"><span class="prop-name">‘image-rendering’</span></a> property
2503 setting.</p>
2505 <p>The <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationFiltersProperty"><span class="prop-name">‘color-interpolation-filters’</span></a> property only applies to the
2506 <a href="#feDisplacementMapIn2Attribute"><span class="attr-name">‘in2’</span></a> source image and does not apply to the <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a> source image.
2507 The <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a> source image must remain in its current color space.
2508 </p>
2510 <div class="adef-list">
2511 <p><em>Attribute definitions:</em></p>
2512 <dl><dt id="feDisplacementMapScaleAttribute"><span class="adef">scale</span>
2513 = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></em>"</dt><dd>Displacement scale factor. The amount is expressed in the coordinate
2514 system established by attribute <a href="#FilterElementPrimitiveUnitsAttribute"><span class="attr-name">‘primitiveUnits’</span></a> on the <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
2515 element.<br/>
2516 When the value of this attribute is <span class="attr-value">0</span>,
2517 this operation has no effect on the source image.<br/>
2518 <p>The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feDisplacementMapScaleAttribute"><span class="attr-name">‘scale’</span></a> is <span class="attr-value">0</span>.</p>
2519 <span class="anim-target">Animatable: yes.</span></dd><dt id="feDisplacementMapXChannelSelectorAttribute"><span class="adef">xChannelSelector</span> = "<em>R | G | B | A</em>"</dt><dd>Indicates which channel from <a href="#feDisplacementMapIn2Attribute"><span class="attr-name">‘in2’</span></a> to use to displace the pixels in <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a> along the x-axis.
2520 The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feDisplacementMapXChannelSelectorAttribute"><span class="attr-name">‘xChannelSelector’</span></a> is <span class="attr-value">A</span>.
2521 <br/>
2522 <span class="anim-target">Animatable: yes.</span></dd><dt id="feDisplacementMapYChannelSelectorAttribute"><span class="adef">yChannelSelector</span> = "<em>R | G | B | A</em>"</dt><dd>Indicates which channel from <a href="#feDisplacementMapIn2Attribute"><span class="attr-name">‘in2’</span></a> to use to displace the pixels in <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a> along the y-axis.
2523 The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feDisplacementMapYChannelSelectorAttribute"><span class="attr-name">‘yChannelSelector’</span></a> is <span class="attr-value">A</span>.
2524 <br/>
2525 <span class="anim-target">Animatable: yes.</span></dd><dt id="feDisplacementMapIn2Attribute"><span class="adef">in2</span> =
2526 "<em>(see <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a> attribute)</em>"</dt><dd>The second input image, which is used to displace the pixels in the
2527 image from attribute <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a>. This attribute can take on the same
2528 values as the <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a> attribute.<br/>
2529 <span class="anim-target">Animatable: yes.</span></dd></dl>
2530 </div>
2532 <h2 id="feFloodElement">17 Filter primitive <span class="element-name">‘feFlood’</span></h2>
2534 <div class="element-summary"><div class="element-summary-name"><span class="element-name">‘feFlood’</span></div><dl><dt>Categories:</dt><dd><a href="#TermFilterPrimitiveElements">Filter primitives element</a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermFilterPrimitiveElement">filter primitive element</a></dd><dt>Content model:</dt><dd>Any number of the following elements, in any order:
2535 <ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#AnimateElement"><span class="element-name">‘animate’</span></a></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#AnimateColorElement"><span class="element-name">‘animateColor’</span></a></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#SetElement"><span class="element-name">‘set’</span></a></li></ul></dd><dt>Attributes:</dt><dd><ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermCoreAttributes">core attributes</a><span class="expanding"> — <a href="struct.html#IDAttribute"><span class="attr-name">‘id’</span></a>, <a href="struct.html#XMLBaseAttribute"><span class="attr-name">‘xml:base’</span></a>, <a href="struct.html#XMLLangAttribute"><span class="attr-name">‘xml:lang’</span></a>, <a href="struct.html#XMLSpaceAttribute"><span class="attr-name">‘xml:space’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermPresentationAttribute">presentation attributes</a><span class="expanding"> — <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#AlignmentBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘alignment-baseline’">‘alignment-baseline’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#BaselineShiftProperty"><span class="attr-name" title="Presentation attribute for property ‘baseline-shift’">‘baseline-shift’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipProperty"><span class="attr-name" title="Presentation attribute for property ‘clip’">‘clip’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipPathProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-path’">‘clip-path’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-rule’">‘clip-rule’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProperty"><span class="attr-name" title="Presentation attribute for property ‘color’">‘color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation’">‘color-interpolation’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationFiltersProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation-filters’">‘color-interpolation-filters’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProfileProperty"><span class="attr-name" title="Presentation attribute for property ‘color-profile’">‘color-profile’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘color-rendering’">‘color-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#CursorProperty"><span class="attr-name" title="Presentation attribute for property ‘cursor’">‘cursor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DirectionProperty"><span class="attr-name" title="Presentation attribute for property ‘direction’">‘direction’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#DisplayProperty"><span class="attr-name" title="Presentation attribute for property ‘display’">‘display’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DominantBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘dominant-baseline’">‘dominant-baseline’</span></a>, <a href="#EnableBackgroundProperty"><span class="attr-name" title="Presentation attribute for property ‘enable-background’">‘enable-background’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillProperty"><span class="attr-name" title="Presentation attribute for property ‘fill’">‘fill’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-opacity’">‘fill-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-rule’">‘fill-rule’</span></a>, <a href="#FilterProperty"><span class="attr-name" title="Presentation attribute for property ‘filter’">‘filter’</span></a>, <a href="#FloodColorProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-color’">‘flood-color’</span></a>, <a href="#FloodOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-opacity’">‘flood-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontFamilyProperty"><span class="attr-name" title="Presentation attribute for property ‘font-family’">‘font-family’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size’">‘font-size’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeAdjustProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size-adjust’">‘font-size-adjust’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStretchProperty"><span class="attr-name" title="Presentation attribute for property ‘font-stretch’">‘font-stretch’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStyleProperty"><span class="attr-name" title="Presentation attribute for property ‘font-style’">‘font-style’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontVariantProperty"><span class="attr-name" title="Presentation attribute for property ‘font-variant’">‘font-variant’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontWeightProperty"><span class="attr-name" title="Presentation attribute for property ‘font-weight’">‘font-weight’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationHorizontalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-horizontal’">‘glyph-orientation-horizontal’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationVerticalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-vertical’">‘glyph-orientation-vertical’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ImageRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘image-rendering’">‘image-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#KerningProperty"><span class="attr-name" title="Presentation attribute for property ‘kerning’">‘kerning’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#LetterSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘letter-spacing’">‘letter-spacing’</span></a>, <a href="#LightingColorProperty"><span class="attr-name" title="Presentation attribute for property ‘lighting-color’">‘lighting-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerEndProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-end’">‘marker-end’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerMidProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-mid’">‘marker-mid’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerStartProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-start’">‘marker-start’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#MaskProperty"><span class="attr-name" title="Presentation attribute for property ‘mask’">‘mask’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘opacity’">‘opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OverflowProperty"><span class="attr-name" title="Presentation attribute for property ‘overflow’">‘overflow’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#PointerEventsProperty"><span class="attr-name" title="Presentation attribute for property ‘pointer-events’">‘pointer-events’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ShapeRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘shape-rendering’">‘shape-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopColorProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-color’">‘stop-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-opacity’">‘stop-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke’">‘stroke’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDasharrayProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dasharray’">‘stroke-dasharray’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDashoffsetProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dashoffset’">‘stroke-dashoffset’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinecapProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linecap’">‘stroke-linecap’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinejoinProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linejoin’">‘stroke-linejoin’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeMiterlimitProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-miterlimit’">‘stroke-miterlimit’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-opacity’">‘stroke-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeWidthProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-width’">‘stroke-width’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextAnchorProperty"><span class="attr-name" title="Presentation attribute for property ‘text-anchor’">‘text-anchor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextDecorationProperty"><span class="attr-name" title="Presentation attribute for property ‘text-decoration’">‘text-decoration’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#TextRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘text-rendering’">‘text-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#UnicodeBidiProperty"><span class="attr-name" title="Presentation attribute for property ‘unicode-bidi’">‘unicode-bidi’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#VisibilityProperty"><span class="attr-name" title="Presentation attribute for property ‘visibility’">‘visibility’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WordSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘word-spacing’">‘word-spacing’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WritingModeProperty"><span class="attr-name" title="Presentation attribute for property ‘writing-mode’">‘writing-mode’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermFilterPrimitiveAttributes">filter primitive attributes</a><span class="expanding"> — <a href="filters.html#FilterPrimitiveXAttribute"><span class="attr-name">‘x’</span></a>, <a href="filters.html#FilterPrimitiveYAttribute"><span class="attr-name">‘y’</span></a>, <a href="filters.html#FilterPrimitiveWidthAttribute"><span class="attr-name">‘width’</span></a>, <a href="filters.html#FilterPrimitiveHeightAttribute"><span class="attr-name">‘height’</span></a>, <a href="filters.html#FilterPrimitiveResultAttribute"><span class="attr-name">‘result’</span></a></span></li><li><a href="styling.html#ClassAttribute"><span class="attr-name">‘class’</span></a></li><li><a href="styling.html#StyleAttribute"><span class="attr-name">‘style’</span></a></li></ul></dd><dt>DOM Interfaces:</dt><dd><ul class="no-bullets"><li><a class="idlinterface" href="#InterfaceSVGFEFloodElement">SVGFEFloodElement</a></li></ul></dd></dl></div>
2537 <p>This filter primitive creates a rectangle filled with the color and
2538 opacity values from properties <span class="prop-name">‘flood-color’</span>
2539 and <span class="prop-name">‘flood-opacity’</span>. The rectangle is as large
2540 as the <a href="#FilterPrimitiveSubRegion">filter primitive subregion</a>
2541 established by the <span class="element-name">‘feFlood’</span> element.</p>
2543 <div class="adef-list">
2544 </div>
2546 <p>The <span class="prop-name">‘flood-color’</span> property indicates what
2547 color to use to flood the current <a href="#FilterPrimitiveSubRegion">filter
2548 primitive subregion</a>. The keyword <span class="attr-value">currentColor</span> and ICC colors can be specified in the
2549 same manner as within a <paint> specification for the <span class="prop-name">‘fill’</span> and <span class="prop-name">‘stroke’</span>
2550 properties.</p>
2552 <div class="propdef">
2553 <dl><dt id="FloodColorProperty"><span class="propdef-title prop-name">‘flood-color’</span></dt><dd>
2554 <table summary="flood-color property" class="propinfo" cellspacing="0" cellpadding="0"><tbody><tr valign="baseline"><td><em>Value:</em> </td><td>currentColor |<br/>
2555 <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeColor"><color></a>
2556 [<a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeICCColor"><icccolor></a>] |<br/>
2557 <a class="noxref" href="http://www.w3.org/TR/2009/CR-CSS2-20090423/cascade.html#value-def-inherit"><span class="value-inst-inherit noxref">inherit</span></a></td></tr><tr valign="baseline"><td><em>Initial:</em> </td><td>black</td></tr><tr valign="baseline"><td><em>Applies to:</em> </td><td><a href="#feFloodElement"><span class="element-name">‘feFlood’</span></a> and <a href="#feDropShadowElement"><span class="element-name">‘feDropShadow’</span></a> elements</td></tr><tr valign="baseline"><td><em>Inherited:</em> </td><td>no</td></tr><tr valign="baseline"><td><em>Percentages:</em> </td><td>N/A</td></tr><tr valign="baseline"><td><em>Media:</em> </td><td>visual</td></tr><tr valign="baseline"><td><em>Animatable:</em> </td><td>yes</td></tr></tbody></table>
2558 </dd></dl>
2559 </div>
2561 <p>The <span class="prop-name">‘flood-opacity’</span> property defines the
2562 opacity value to use across the entire <a href="#FilterPrimitiveSubRegion">filter primitive subregion</a>.</p>
2564 <div class="propdef">
2565 <dl><dt id="OpacityFloodOpacityProperty"><span class="propdef-title prop-name">‘flood-opacity’</span></dt><dd>
2566 <table summary="flood-opacity property" class="propinfo" cellspacing="0" cellpadding="0"><tbody><tr valign="baseline"><td><em>Value:</em> </td><td><opacity-value> | <a class="noxref" href="http://www.w3.org/TR/2009/CR-CSS2-20090423/cascade.html#value-def-inherit"><span class="value-inst-inherit noxref">inherit</span></a></td></tr><tr valign="baseline"><td><em>Initial:</em> </td><td>1</td></tr><tr valign="baseline"><td><em>Applies to:</em> </td><td><a href="#feFloodElement"><span class="element-name">‘feFlood’</span></a> and <a href="#feDropShadowElement"><span class="element-name">‘feDropShadow’</span></a> elements</td></tr><tr valign="baseline"><td><em>Inherited:</em> </td><td>no</td></tr><tr valign="baseline"><td><em>Percentages:</em> </td><td>N/A</td></tr><tr valign="baseline"><td><em>Media:</em> </td><td>visual</td></tr><tr valign="baseline"><td><em>Animatable:</em> </td><td>yes</td></tr></tbody></table>
2567 </dd></dl>
2568 </div>
2570 <h2 id="feGaussianBlurElement">18 Filter primitive <span class="element-name">‘feGaussianBlur’</span></h2>
2572 <div class="element-summary"><div class="element-summary-name"><span class="element-name">‘feGaussianBlur’</span></div><dl><dt>Categories:</dt><dd><a href="#TermFilterPrimitiveElements">Filter primitives element</a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermFilterPrimitiveElement">filter primitive element</a></dd><dt>Content model:</dt><dd>Any number of the following elements, in any order:
2573 <ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#AnimateElement"><span class="element-name">‘animate’</span></a></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#SetElement"><span class="element-name">‘set’</span></a></li></ul></dd><dt>Attributes:</dt><dd><ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermCoreAttributes">core attributes</a><span class="expanding"> — <a href="struct.html#IDAttribute"><span class="attr-name">‘id’</span></a>, <a href="struct.html#XMLBaseAttribute"><span class="attr-name">‘xml:base’</span></a>, <a href="struct.html#XMLLangAttribute"><span class="attr-name">‘xml:lang’</span></a>, <a href="struct.html#XMLSpaceAttribute"><span class="attr-name">‘xml:space’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermPresentationAttribute">presentation attributes</a><span class="expanding"> — <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#AlignmentBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘alignment-baseline’">‘alignment-baseline’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#BaselineShiftProperty"><span class="attr-name" title="Presentation attribute for property ‘baseline-shift’">‘baseline-shift’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipProperty"><span class="attr-name" title="Presentation attribute for property ‘clip’">‘clip’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipPathProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-path’">‘clip-path’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-rule’">‘clip-rule’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProperty"><span class="attr-name" title="Presentation attribute for property ‘color’">‘color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation’">‘color-interpolation’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationFiltersProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation-filters’">‘color-interpolation-filters’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProfileProperty"><span class="attr-name" title="Presentation attribute for property ‘color-profile’">‘color-profile’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘color-rendering’">‘color-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#CursorProperty"><span class="attr-name" title="Presentation attribute for property ‘cursor’">‘cursor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DirectionProperty"><span class="attr-name" title="Presentation attribute for property ‘direction’">‘direction’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#DisplayProperty"><span class="attr-name" title="Presentation attribute for property ‘display’">‘display’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DominantBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘dominant-baseline’">‘dominant-baseline’</span></a>, <a href="#EnableBackgroundProperty"><span class="attr-name" title="Presentation attribute for property ‘enable-background’">‘enable-background’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillProperty"><span class="attr-name" title="Presentation attribute for property ‘fill’">‘fill’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-opacity’">‘fill-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-rule’">‘fill-rule’</span></a>, <a href="#FilterProperty"><span class="attr-name" title="Presentation attribute for property ‘filter’">‘filter’</span></a>, <a href="#FloodColorProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-color’">‘flood-color’</span></a>, <a href="#FloodOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-opacity’">‘flood-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontFamilyProperty"><span class="attr-name" title="Presentation attribute for property ‘font-family’">‘font-family’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size’">‘font-size’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeAdjustProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size-adjust’">‘font-size-adjust’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStretchProperty"><span class="attr-name" title="Presentation attribute for property ‘font-stretch’">‘font-stretch’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStyleProperty"><span class="attr-name" title="Presentation attribute for property ‘font-style’">‘font-style’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontVariantProperty"><span class="attr-name" title="Presentation attribute for property ‘font-variant’">‘font-variant’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontWeightProperty"><span class="attr-name" title="Presentation attribute for property ‘font-weight’">‘font-weight’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationHorizontalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-horizontal’">‘glyph-orientation-horizontal’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationVerticalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-vertical’">‘glyph-orientation-vertical’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ImageRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘image-rendering’">‘image-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#KerningProperty"><span class="attr-name" title="Presentation attribute for property ‘kerning’">‘kerning’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#LetterSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘letter-spacing’">‘letter-spacing’</span></a>, <a href="#LightingColorProperty"><span class="attr-name" title="Presentation attribute for property ‘lighting-color’">‘lighting-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerEndProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-end’">‘marker-end’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerMidProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-mid’">‘marker-mid’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerStartProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-start’">‘marker-start’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#MaskProperty"><span class="attr-name" title="Presentation attribute for property ‘mask’">‘mask’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘opacity’">‘opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OverflowProperty"><span class="attr-name" title="Presentation attribute for property ‘overflow’">‘overflow’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#PointerEventsProperty"><span class="attr-name" title="Presentation attribute for property ‘pointer-events’">‘pointer-events’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ShapeRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘shape-rendering’">‘shape-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopColorProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-color’">‘stop-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-opacity’">‘stop-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke’">‘stroke’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDasharrayProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dasharray’">‘stroke-dasharray’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDashoffsetProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dashoffset’">‘stroke-dashoffset’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinecapProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linecap’">‘stroke-linecap’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinejoinProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linejoin’">‘stroke-linejoin’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeMiterlimitProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-miterlimit’">‘stroke-miterlimit’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-opacity’">‘stroke-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeWidthProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-width’">‘stroke-width’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextAnchorProperty"><span class="attr-name" title="Presentation attribute for property ‘text-anchor’">‘text-anchor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextDecorationProperty"><span class="attr-name" title="Presentation attribute for property ‘text-decoration’">‘text-decoration’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#TextRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘text-rendering’">‘text-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#UnicodeBidiProperty"><span class="attr-name" title="Presentation attribute for property ‘unicode-bidi’">‘unicode-bidi’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#VisibilityProperty"><span class="attr-name" title="Presentation attribute for property ‘visibility’">‘visibility’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WordSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘word-spacing’">‘word-spacing’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WritingModeProperty"><span class="attr-name" title="Presentation attribute for property ‘writing-mode’">‘writing-mode’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermFilterPrimitiveAttributes">filter primitive attributes</a><span class="expanding"> — <a href="filters.html#FilterPrimitiveXAttribute"><span class="attr-name">‘x’</span></a>, <a href="filters.html#FilterPrimitiveYAttribute"><span class="attr-name">‘y’</span></a>, <a href="filters.html#FilterPrimitiveWidthAttribute"><span class="attr-name">‘width’</span></a>, <a href="filters.html#FilterPrimitiveHeightAttribute"><span class="attr-name">‘height’</span></a>, <a href="filters.html#FilterPrimitiveResultAttribute"><span class="attr-name">‘result’</span></a></span></li><li><a href="styling.html#ClassAttribute"><span class="attr-name">‘class’</span></a></li><li><a href="styling.html#StyleAttribute"><span class="attr-name">‘style’</span></a></li><li><a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a></li><li><a href="#feGaussianBlurStdDeviationAttribute"><span class="attr-name">‘stdDeviation’</span></a></li></ul></dd><dt>DOM Interfaces:</dt><dd><ul class="no-bullets"><li><a class="idlinterface" href="#InterfaceSVGFEGaussianBlurElement">SVGFEGaussianBlurElement</a></li></ul></dd></dl></div>
2576 <p>This filter primitive performs a Gaussian blur on the input image.</p>
2578 <p>The Gaussian blur kernel is an approximation of the normalized
2579 convolution:</p>
2581 <p class="filterformula">G(x,y) = H(x)I(y)</p>
2582 <p>where</p>
2583 <p class="filterformula">H(x) = exp(-x<sup>2</sup>/ (2s<sup>2</sup>)) / sqrt(2* pi*s<sup>2</sup>)</p>
2584 <p>and</p>
2585 <p class="filterformula">I(x) = exp(-y<sup>2</sup>/ (2t<sup>2</sup>)) / sqrt(2* pi*t<sup>2</sup>)</p>
2586 <p>with 's' being the standard deviation in the x direction
2587 and 't' being the standard deviation in the y direction, as specified by <a href="#feGaussianBlurStdDeviationAttribute"><span class="attr-name">‘stdDeviation’</span></a>.</p>
2589 <p>The value of <a href="#feGaussianBlurStdDeviationAttribute"><span class="attr-name">‘stdDeviation’</span></a> can be either one or two numbers.
2590 If two numbers are provided, the first number represents a standard deviation
2591 value along the x-axis of the current coordinate system and the second value
2592 represents a standard deviation in Y. If one number is provided, then that
2593 value is used for both X and Y.</p>
2595 <p>Even if only one value is provided for <a href="#feGaussianBlurStdDeviationAttribute"><span class="attr-name">‘stdDeviation’</span></a>, this can be implemented as a
2596 separable convolution.</p>
2598 <p>For larger values of 's' (s >= 2.0), an approximation can be used:
2599 Three successive box-blurs build a piece-wise quadratic convolution kernel,
2600 which approximates the Gaussian kernel to within roughly 3%.</p>
2602 <p class="filterformula">let d = floor(s * 3*sqrt(2*pi)/4 + 0.5)</p>
2604 <p>... if d is odd, use three box-blurs of size 'd', centered on the output
2605 pixel.</p>
2607 <p>... if d is even, two box-blurs of size 'd' (the first one centered on the
2608 pixel boundary between the output pixel and the one to the left, the second
2609 one centered on the pixel boundary between the output pixel and the one to
2610 the right) and one box blur of size 'd+1' centered on the output pixel.</p>
2612 <p>The approximation formula also applies correspondingly to 't'.</p>
2614 <p>Frequently this operation will take place on alpha-only images, such as
2615 that produced by the built-in input, <a href="#SourceAlpha"><span class="attr-value">SourceAlpha</span></a>. The implementation may notice this
2616 and optimize the single channel case. If the input has infinite extent and is
2617 constant (e.g <span class="attr-value"><a href="#FillPaint">FillPaint</a></span>,
2618 this operation has no effect. If the input has infinite extent and the filter result
2619 is the input to an <a href="#feTileElement"><span class="element-name">‘feTile’</span></a>, the filter is evaluated with periodic boundary conditions.</p>
2621 <div class="adef-list">
2622 <p><em>Attribute definitions:</em></p>
2623 <dl><dt id="feGaussianBlurStdDeviationAttribute"><span class="adef">stdDeviation</span> =
2624 "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumberOptionalNumber"><number-optional-number></a></em>"</dt><dd>The standard deviation for the blur operation. If two <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a>
2625 s are provided, the first number represents a standard deviation value
2626 along the x-axis of the coordinate system established by attribute <a href="#FilterElementPrimitiveUnitsAttribute"><span class="attr-name">‘primitiveUnits’</span></a> on the <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
2627 element. The second value represents a standard deviation in Y. If one
2628 number is provided, then that value is used for both X and Y.<br/>
2629 A value of zero disables the effect of the given filter primitive (i.e., the result is the filter input image).<br/>
2630 If <a href="#feGaussianBlurStdDeviationAttribute"><span class="attr-name">‘stdDeviation’</span></a> is <span class="attr-value">0</span> in only one of X or Y,
2631 then the effect is that the blur is only applied in the direction that has a non-zero value.
2632 <br/>
2633 The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feGaussianBlurStdDeviationAttribute"><span class="attr-name">‘stdDeviation’</span></a> is <span class="attr-value">0</span>.<br/>
2634 <span class="anim-target">Animatable: yes.</span></dd></dl>
2635 </div>
2637 <p><a href="#AnExample">The example</a> at the start of this chapter makes
2638 use of the <a href="#feGaussianBlurElement"><span class="element-name">‘feGaussianBlur’</span></a> filter primitive
2639 to create a drop shadow effect.</p>
2642 <h2 id="feUnsharpMaskElement">19 Filter primitive <span class="element-name">‘feUnsharpMask’</span></h2>
2644 <div class="element-summary"><div class="element-summary-name"><span class="element-name">‘feUnsharpMask’</span></div><dl><dt>Categories:</dt><dd><a href="#TermFilterPrimitiveElements">Filter primitives element</a></dd><dt>Content model:</dt><dd>Any number of the following elements, in any order:
2645 <ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#AnimateElement"><span class="element-name">‘animate’</span></a></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#SetElement"><span class="element-name">‘set’</span></a></li></ul></dd><dt>Attributes:</dt><dd><ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermCoreAttributes">core attributes</a><span class="expanding"> — <a href="struct.html#IDAttribute"><span class="attr-name">‘id’</span></a>, <a href="struct.html#XMLBaseAttribute"><span class="attr-name">‘xml:base’</span></a>, <a href="struct.html#XMLLangAttribute"><span class="attr-name">‘xml:lang’</span></a>, <a href="struct.html#XMLSpaceAttribute"><span class="attr-name">‘xml:space’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermPresentationAttribute">presentation attributes</a><span class="expanding"> — <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#AlignmentBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘alignment-baseline’">‘alignment-baseline’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#BaselineShiftProperty"><span class="attr-name" title="Presentation attribute for property ‘baseline-shift’">‘baseline-shift’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipProperty"><span class="attr-name" title="Presentation attribute for property ‘clip’">‘clip’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipPathProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-path’">‘clip-path’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-rule’">‘clip-rule’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProperty"><span class="attr-name" title="Presentation attribute for property ‘color’">‘color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation’">‘color-interpolation’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationFiltersProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation-filters’">‘color-interpolation-filters’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProfileProperty"><span class="attr-name" title="Presentation attribute for property ‘color-profile’">‘color-profile’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘color-rendering’">‘color-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#CursorProperty"><span class="attr-name" title="Presentation attribute for property ‘cursor’">‘cursor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DirectionProperty"><span class="attr-name" title="Presentation attribute for property ‘direction’">‘direction’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#DisplayProperty"><span class="attr-name" title="Presentation attribute for property ‘display’">‘display’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DominantBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘dominant-baseline’">‘dominant-baseline’</span></a>, <a href="#EnableBackgroundProperty"><span class="attr-name" title="Presentation attribute for property ‘enable-background’">‘enable-background’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillProperty"><span class="attr-name" title="Presentation attribute for property ‘fill’">‘fill’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-opacity’">‘fill-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-rule’">‘fill-rule’</span></a>, <a href="#FilterProperty"><span class="attr-name" title="Presentation attribute for property ‘filter’">‘filter’</span></a>, <a href="#FloodColorProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-color’">‘flood-color’</span></a>, <a href="#FloodOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-opacity’">‘flood-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontFamilyProperty"><span class="attr-name" title="Presentation attribute for property ‘font-family’">‘font-family’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size’">‘font-size’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeAdjustProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size-adjust’">‘font-size-adjust’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStretchProperty"><span class="attr-name" title="Presentation attribute for property ‘font-stretch’">‘font-stretch’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStyleProperty"><span class="attr-name" title="Presentation attribute for property ‘font-style’">‘font-style’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontVariantProperty"><span class="attr-name" title="Presentation attribute for property ‘font-variant’">‘font-variant’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontWeightProperty"><span class="attr-name" title="Presentation attribute for property ‘font-weight’">‘font-weight’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationHorizontalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-horizontal’">‘glyph-orientation-horizontal’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationVerticalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-vertical’">‘glyph-orientation-vertical’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ImageRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘image-rendering’">‘image-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#KerningProperty"><span class="attr-name" title="Presentation attribute for property ‘kerning’">‘kerning’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#LetterSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘letter-spacing’">‘letter-spacing’</span></a>, <a href="#LightingColorProperty"><span class="attr-name" title="Presentation attribute for property ‘lighting-color’">‘lighting-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerEndProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-end’">‘marker-end’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerMidProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-mid’">‘marker-mid’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerStartProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-start’">‘marker-start’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#MaskProperty"><span class="attr-name" title="Presentation attribute for property ‘mask’">‘mask’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘opacity’">‘opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OverflowProperty"><span class="attr-name" title="Presentation attribute for property ‘overflow’">‘overflow’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#PointerEventsProperty"><span class="attr-name" title="Presentation attribute for property ‘pointer-events’">‘pointer-events’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ShapeRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘shape-rendering’">‘shape-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopColorProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-color’">‘stop-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-opacity’">‘stop-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke’">‘stroke’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDasharrayProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dasharray’">‘stroke-dasharray’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDashoffsetProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dashoffset’">‘stroke-dashoffset’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinecapProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linecap’">‘stroke-linecap’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinejoinProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linejoin’">‘stroke-linejoin’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeMiterlimitProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-miterlimit’">‘stroke-miterlimit’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-opacity’">‘stroke-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeWidthProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-width’">‘stroke-width’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextAnchorProperty"><span class="attr-name" title="Presentation attribute for property ‘text-anchor’">‘text-anchor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextDecorationProperty"><span class="attr-name" title="Presentation attribute for property ‘text-decoration’">‘text-decoration’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#TextRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘text-rendering’">‘text-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#UnicodeBidiProperty"><span class="attr-name" title="Presentation attribute for property ‘unicode-bidi’">‘unicode-bidi’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#VisibilityProperty"><span class="attr-name" title="Presentation attribute for property ‘visibility’">‘visibility’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WordSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘word-spacing’">‘word-spacing’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WritingModeProperty"><span class="attr-name" title="Presentation attribute for property ‘writing-mode’">‘writing-mode’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermFilterPrimitiveAttributes">filter primitive attributes</a><span class="expanding"> — <a href="filters.html#FilterPrimitiveXAttribute"><span class="attr-name">‘x’</span></a>, <a href="filters.html#FilterPrimitiveYAttribute"><span class="attr-name">‘y’</span></a>, <a href="filters.html#FilterPrimitiveWidthAttribute"><span class="attr-name">‘width’</span></a>, <a href="filters.html#FilterPrimitiveHeightAttribute"><span class="attr-name">‘height’</span></a>, <a href="filters.html#FilterPrimitiveResultAttribute"><span class="attr-name">‘result’</span></a></span></li><li><a href="styling.html#ClassAttribute"><span class="attr-name">‘class’</span></a></li><li><a href="styling.html#StyleAttribute"><span class="attr-name">‘style’</span></a></li><li><a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a></li><li><a href="#feUnsharpMaskAmountAttribute"><span class="attr-name">‘amount’</span></a></li><li><a href="#feUnsharpMaskThresholdAttribute"><span class="attr-name">‘threshold’</span></a></li><li><a href="#feUnsharpMaskStdDeviationAttribute"><span class="attr-name">‘stdDeviation’</span></a></li></ul></dd><dt>DOM Interfaces:</dt><dd><ul class="no-bullets"><li><a class="idlinterface" href="#InterfaceSVGFEUnsharpMaskElement">SVGFEUnsharpMaskElement</a></li></ul></dd></dl></div>
2647 <p>This filter primitive performs an image sharpening operation on the input image. This is traditionally known as an unsharp mask operation.</p>
2649 <p>The filter first does a <a href="#feGaussianBlurElement"><span class="element-name">‘feGaussianBlur’</span></a> operation on the input image and then subtracts the difference between the input image and the blurred image.</p>
2651 <p>
2652 For controlling the result there are three attributes that can be used:
2653 <ul><li>the <a href="#feUnsharpMaskStdDeviationAttribute"><span class="attr-name">‘stdDeviation’</span></a> attribute controls how much to blur the input image</li><li>the <a href="#feUnsharpMaskThresholdAttribute"><span class="attr-name">‘threshold’</span></a> attribute can be used for controlling when the difference should not be subtracted</li><li>the <a href="#feUnsharpMaskAmountAttribute"><span class="attr-name">‘amount’</span></a> attribute specifies an optional multiplier for the difference to subtract</li></ul>
2654 </p>
2656 <h2 id="feImageElement">20 Filter primitive <span class="element-name">‘feImage’</span></h2>
2658 <div class="element-summary"><div class="element-summary-name"><span class="element-name">‘feImage’</span></div><dl><dt>Categories:</dt><dd><a href="#TermFilterPrimitiveElements">Filter primitives element</a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermFilterPrimitiveElement">filter primitive element</a></dd><dt>Content model:</dt><dd>Any number of the following elements, in any order:
2659 <ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#AnimateElement"><span class="element-name">‘animate’</span></a></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#AnimateTransformElement"><span class="element-name">‘animateTransform’</span></a></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#SetElement"><span class="element-name">‘set’</span></a></li></ul></dd><dt>Attributes:</dt><dd><ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermCoreAttributes">core attributes</a><span class="expanding"> — <a href="struct.html#IDAttribute"><span class="attr-name">‘id’</span></a>, <a href="struct.html#XMLBaseAttribute"><span class="attr-name">‘xml:base’</span></a>, <a href="struct.html#XMLLangAttribute"><span class="attr-name">‘xml:lang’</span></a>, <a href="struct.html#XMLSpaceAttribute"><span class="attr-name">‘xml:space’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermPresentationAttribute">presentation attributes</a><span class="expanding"> — <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#AlignmentBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘alignment-baseline’">‘alignment-baseline’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#BaselineShiftProperty"><span class="attr-name" title="Presentation attribute for property ‘baseline-shift’">‘baseline-shift’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipProperty"><span class="attr-name" title="Presentation attribute for property ‘clip’">‘clip’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipPathProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-path’">‘clip-path’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-rule’">‘clip-rule’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProperty"><span class="attr-name" title="Presentation attribute for property ‘color’">‘color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation’">‘color-interpolation’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationFiltersProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation-filters’">‘color-interpolation-filters’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProfileProperty"><span class="attr-name" title="Presentation attribute for property ‘color-profile’">‘color-profile’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘color-rendering’">‘color-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#CursorProperty"><span class="attr-name" title="Presentation attribute for property ‘cursor’">‘cursor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DirectionProperty"><span class="attr-name" title="Presentation attribute for property ‘direction’">‘direction’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#DisplayProperty"><span class="attr-name" title="Presentation attribute for property ‘display’">‘display’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DominantBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘dominant-baseline’">‘dominant-baseline’</span></a>, <a href="#EnableBackgroundProperty"><span class="attr-name" title="Presentation attribute for property ‘enable-background’">‘enable-background’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillProperty"><span class="attr-name" title="Presentation attribute for property ‘fill’">‘fill’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-opacity’">‘fill-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-rule’">‘fill-rule’</span></a>, <a href="#FilterProperty"><span class="attr-name" title="Presentation attribute for property ‘filter’">‘filter’</span></a>, <a href="#FloodColorProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-color’">‘flood-color’</span></a>, <a href="#FloodOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-opacity’">‘flood-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontFamilyProperty"><span class="attr-name" title="Presentation attribute for property ‘font-family’">‘font-family’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size’">‘font-size’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeAdjustProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size-adjust’">‘font-size-adjust’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStretchProperty"><span class="attr-name" title="Presentation attribute for property ‘font-stretch’">‘font-stretch’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStyleProperty"><span class="attr-name" title="Presentation attribute for property ‘font-style’">‘font-style’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontVariantProperty"><span class="attr-name" title="Presentation attribute for property ‘font-variant’">‘font-variant’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontWeightProperty"><span class="attr-name" title="Presentation attribute for property ‘font-weight’">‘font-weight’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationHorizontalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-horizontal’">‘glyph-orientation-horizontal’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationVerticalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-vertical’">‘glyph-orientation-vertical’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ImageRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘image-rendering’">‘image-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#KerningProperty"><span class="attr-name" title="Presentation attribute for property ‘kerning’">‘kerning’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#LetterSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘letter-spacing’">‘letter-spacing’</span></a>, <a href="#LightingColorProperty"><span class="attr-name" title="Presentation attribute for property ‘lighting-color’">‘lighting-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerEndProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-end’">‘marker-end’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerMidProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-mid’">‘marker-mid’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerStartProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-start’">‘marker-start’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#MaskProperty"><span class="attr-name" title="Presentation attribute for property ‘mask’">‘mask’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘opacity’">‘opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OverflowProperty"><span class="attr-name" title="Presentation attribute for property ‘overflow’">‘overflow’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#PointerEventsProperty"><span class="attr-name" title="Presentation attribute for property ‘pointer-events’">‘pointer-events’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ShapeRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘shape-rendering’">‘shape-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopColorProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-color’">‘stop-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-opacity’">‘stop-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke’">‘stroke’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDasharrayProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dasharray’">‘stroke-dasharray’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDashoffsetProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dashoffset’">‘stroke-dashoffset’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinecapProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linecap’">‘stroke-linecap’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinejoinProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linejoin’">‘stroke-linejoin’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeMiterlimitProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-miterlimit’">‘stroke-miterlimit’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-opacity’">‘stroke-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeWidthProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-width’">‘stroke-width’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextAnchorProperty"><span class="attr-name" title="Presentation attribute for property ‘text-anchor’">‘text-anchor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextDecorationProperty"><span class="attr-name" title="Presentation attribute for property ‘text-decoration’">‘text-decoration’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#TextRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘text-rendering’">‘text-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#UnicodeBidiProperty"><span class="attr-name" title="Presentation attribute for property ‘unicode-bidi’">‘unicode-bidi’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#VisibilityProperty"><span class="attr-name" title="Presentation attribute for property ‘visibility’">‘visibility’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WordSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘word-spacing’">‘word-spacing’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WritingModeProperty"><span class="attr-name" title="Presentation attribute for property ‘writing-mode’">‘writing-mode’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermFilterPrimitiveAttributes">filter primitive attributes</a><span class="expanding"> — <a href="filters.html#FilterPrimitiveXAttribute"><span class="attr-name">‘x’</span></a>, <a href="filters.html#FilterPrimitiveYAttribute"><span class="attr-name">‘y’</span></a>, <a href="filters.html#FilterPrimitiveWidthAttribute"><span class="attr-name">‘width’</span></a>, <a href="filters.html#FilterPrimitiveHeightAttribute"><span class="attr-name">‘height’</span></a>, <a href="filters.html#FilterPrimitiveResultAttribute"><span class="attr-name">‘result’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermXLinkAttributes">xlink attributes</a><span class="expanding"> — <a href="#feImageElementHrefAttribute"><span class="attr-name">‘xlink:href’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/linking.html#XLinkShowAttribute"><span class="attr-name">‘xlink:show’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/linking.html#XLinkActuateAttribute"><span class="attr-name">‘xlink:actuate’</span></a>, <a href="linking.html#XLinkTypeAttribute"><span class="attr-name">‘xlink:type’</span></a>, <a href="linking.html#XLinkRoleAttribute"><span class="attr-name">‘xlink:role’</span></a>, <a href="linking.html#XLinkArcRoleAttribute"><span class="attr-name">‘xlink:arcrole’</span></a>, <a href="linking.html#XLinkTitleAttribute"><span class="attr-name">‘xlink:title’</span></a></span></li><li><a href="styling.html#ClassAttribute"><span class="attr-name">‘class’</span></a></li><li><a href="styling.html#StyleAttribute"><span class="attr-name">‘style’</span></a></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/struct.html#ExternalResourcesRequiredAttribute"><span class="attr-name">‘externalResourcesRequired’</span></a></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/coords.html#PreserveAspectRatioAttribute"><span class="attr-name">‘preserveAspectRatio’</span></a></li><li><a href="#feImageElementHrefAttribute"><span class="attr-name">‘xlink:href’</span></a></li></ul></dd><dt>DOM Interfaces:</dt><dd><ul class="no-bullets"><li><a class="idlinterface" href="#InterfaceSVGFEImageElement">SVGFEImageElement</a></li></ul></dd></dl></div>
2662 <p>This filter primitive refers to a graphic external to this filter element,
2663 which is loaded or rendered into an RGBA raster and becomes the result of the
2664 filter primitive.</p>
2666 <p>This filter primitive can refer to an external image or can be a reference
2667 to another piece of SVG. It produces an image similar to the built-in image
2668 source <a href="#SourceGraphic"><span class="attr-value">SourceGraphic</span></a> except that the graphic comes
2669 from an external source.</p>
2671 <p>If the <span class="attr-name">xlink:href</span> references a stand-alone
2672 image resource such as a JPEG, PNG or SVG file, then the image resource is
2673 rendered according to the behavior of the <span class="element-name">‘image’</span> element; otherwise, the referenced
2674 resource is rendered according to the behavior of the <span class="element-name">‘use’</span> element. In either case, the current user
2675 coordinate system depends on the value of attribute <a href="#FilterElementPrimitiveUnitsAttribute"><span class="attr-name">‘primitiveUnits’</span></a> on the <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element.
2676 The processing of the <span class="attr-name">preserveAspectRatio</span>
2677 attribute on the <span class="element-name">‘feImage’</span> element is
2678 identical to that of the <a href="struct.html#ImageElement"><span class="element-name">‘image’</span></a> element.</p>
2680 <p><span class="requirement" id="assert_hqImageResampling">When the referenced image must be resampled to match the device coordinate
2681 system, it is recommended that high quality viewers make use of appropriate
2682 interpolation techniques, for example bilinear or bicubic.</span> Depending on the
2683 speed of the available interpolents, this choice may be affected by the <span class="prop-name">‘image-rendering’</span> property setting.</p>
2685 <div class="adef-list">
2686 <p><em>Attribute definitions:</em></p>
2687 <dl><dt id="feImageHrefAttribute"><span class="adef">xlink:href</span> =
2688 "<span class="attr-value"><IRI></span>"</dt><dd>An <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermIRIReference"><span class="svg-term">IRI reference</span></a>
2689 to an image resource or to an element.
2690 <br/>
2691 <span class="anim-target">Animatable: yes.</span></dd><dt id="feImageElementPreserveAspectRatioAttribute">
2692 <span class="adef">preserveAspectRatio</span> = "<span class="attr-value">[defer] <align> [<meetOrSlice>]</span>"
2693 </dt><dd>
2694 <p>
2695 See <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/coords.html#PreserveAspectRatioAttribute"><span class="attr-name">‘preserveAspectRatio’</span></a>.
2696 </p>
2697 <p>
2698 The lacuna value for <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/coords.html#PreserveAspectRatioAttribute"><span class="attr-name">‘preserveAspectRatio’</span></a> is <span class="attr-value">xMidYMid meet</span>.
2699 </p>
2700 <p><span class="anim-target"><a href="animate.html#Animatable">Animatable</a>: yes.</span></p>
2701 </dd></dl>
2702 </div>
2704 <p><span class="example-ref">Example feImage</span> illustrates how images are placed relative
2705 to an object. From left to right:</p>
2706 <ul><li>
2707 The default placement of an image. Note that the image is
2708 centered in the <a href="#FilterEffectsRegion"><span class="svg-term">filter region</span></a> and has the maximum size that will
2709 fit in the region consistent with preserving the aspect ratio.
2710 </li><li>
2711 The image stretched to fit the bounding box of an object.
2712 </li><li>
2713 The image placed using user coordinates. Note that the image is
2714 first centered in a box the size of the <a href="#FilterEffectsRegion"><span class="svg-term">filter region</span></a> and has the
2715 maximum size that will fit in the box consistent with preserving
2716 the aspect ratio. This box is then shifted by the given <a href="filters.html#FilterPrimitiveXAttribute"><span class="attr-name">‘x’</span></a> and
2717 <a href="filters.html#FilterPrimitiveYAttribute"><span class="attr-name">‘y’</span></a> values relative to the viewport the object is in.
2718 </li></ul>
2720 <pre class="xml"><svg width="600" height="250" viewBox="0 0 600 250"
2721 xmlns="http://www.w3.org/2000/svg"
2722 xmlns:xlink="http://www.w3.org/1999/xlink">
2723 <title>Example feImage - Examples of feImage use</title>
2724 <desc>Three examples of using feImage, the first showing the
2725 default rendering, the second showing the image fit
2726 to a box and the third showing the image
2727 shifted and clipped.</desc>
2728 <defs>
2729 <filter id="Default">
2730 <feImage xlink:href="smiley.png" />
2731 </filter>
2732 <filter id="Fitted" primitiveUnits="objectBoundingBox">
2733 <feImage xlink:href="smiley.png"
2734 x="0" y="0" width="100%" height="100%"
2735 preserveAspectRatio="none"/>
2736 </filter>
2737 <filter id="Shifted">
2738 <feImage xlink:href="smiley.png"
2739 x="500" y="5"/>
2740 </filter>
2741 </defs>
2742 <rect fill="none" stroke="blue"
2743 x="1" y="1" width="598" height="248"/>
2744 <g>
2745 <rect x="50" y="25" width="100" height="200" filter="url(#Default)"/>
2746 <rect x="50" y="25" width="100" height="200" fill="none" stroke="green"/>
2747 <rect x="250" y="25" width="100" height="200" filter="url(#Fitted)"/>
2748 <rect x="250" y="25" width="100" height="200" fill="none" stroke="green"/>
2749 <rect x="450" y="25" width="100" height="200" filter="url(#Shifted)"/>
2750 <rect x="450" y="25" width="100" height="200" fill="none" stroke="green"/>
2751 </g>
2752 </svg></pre><table summary="Example "><caption align="bottom">Example feImage</caption><tr><td><img alt="Example feImage — Examples of feImage use" src="examples/feImage-01.png"/></td></tr></table><p class="view-as-svg"><a href="examples/feImage-01.svg">View this example as SVG (SVG-enabled browsers only)</a></p>
2755 <h2 id="feMergeElement">21 Filter primitive <span class="element-name">‘feMerge’</span></h2>
2757 <div class="element-summary"><div class="element-summary-name"><span class="element-name">‘feMerge’</span></div><dl><dt>Categories:</dt><dd><a href="#TermFilterPrimitiveElements">Filter primitives element</a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermFilterPrimitiveElement">filter primitive element</a></dd><dt>Content model:</dt><dd>Any number of the following elements, in any order:
2758 <ul class="no-bullets"><li><a href="#feMergeNodeElement"><span class="element-name">‘feMergeNode’</span></a></li></ul></dd><dt>Attributes:</dt><dd><ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermCoreAttributes">core attributes</a><span class="expanding"> — <a href="struct.html#IDAttribute"><span class="attr-name">‘id’</span></a>, <a href="struct.html#XMLBaseAttribute"><span class="attr-name">‘xml:base’</span></a>, <a href="struct.html#XMLLangAttribute"><span class="attr-name">‘xml:lang’</span></a>, <a href="struct.html#XMLSpaceAttribute"><span class="attr-name">‘xml:space’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermPresentationAttribute">presentation attributes</a><span class="expanding"> — <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#AlignmentBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘alignment-baseline’">‘alignment-baseline’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#BaselineShiftProperty"><span class="attr-name" title="Presentation attribute for property ‘baseline-shift’">‘baseline-shift’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipProperty"><span class="attr-name" title="Presentation attribute for property ‘clip’">‘clip’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipPathProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-path’">‘clip-path’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-rule’">‘clip-rule’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProperty"><span class="attr-name" title="Presentation attribute for property ‘color’">‘color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation’">‘color-interpolation’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationFiltersProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation-filters’">‘color-interpolation-filters’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProfileProperty"><span class="attr-name" title="Presentation attribute for property ‘color-profile’">‘color-profile’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘color-rendering’">‘color-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#CursorProperty"><span class="attr-name" title="Presentation attribute for property ‘cursor’">‘cursor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DirectionProperty"><span class="attr-name" title="Presentation attribute for property ‘direction’">‘direction’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#DisplayProperty"><span class="attr-name" title="Presentation attribute for property ‘display’">‘display’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DominantBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘dominant-baseline’">‘dominant-baseline’</span></a>, <a href="#EnableBackgroundProperty"><span class="attr-name" title="Presentation attribute for property ‘enable-background’">‘enable-background’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillProperty"><span class="attr-name" title="Presentation attribute for property ‘fill’">‘fill’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-opacity’">‘fill-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-rule’">‘fill-rule’</span></a>, <a href="#FilterProperty"><span class="attr-name" title="Presentation attribute for property ‘filter’">‘filter’</span></a>, <a href="#FloodColorProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-color’">‘flood-color’</span></a>, <a href="#FloodOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-opacity’">‘flood-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontFamilyProperty"><span class="attr-name" title="Presentation attribute for property ‘font-family’">‘font-family’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size’">‘font-size’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeAdjustProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size-adjust’">‘font-size-adjust’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStretchProperty"><span class="attr-name" title="Presentation attribute for property ‘font-stretch’">‘font-stretch’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStyleProperty"><span class="attr-name" title="Presentation attribute for property ‘font-style’">‘font-style’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontVariantProperty"><span class="attr-name" title="Presentation attribute for property ‘font-variant’">‘font-variant’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontWeightProperty"><span class="attr-name" title="Presentation attribute for property ‘font-weight’">‘font-weight’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationHorizontalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-horizontal’">‘glyph-orientation-horizontal’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationVerticalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-vertical’">‘glyph-orientation-vertical’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ImageRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘image-rendering’">‘image-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#KerningProperty"><span class="attr-name" title="Presentation attribute for property ‘kerning’">‘kerning’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#LetterSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘letter-spacing’">‘letter-spacing’</span></a>, <a href="#LightingColorProperty"><span class="attr-name" title="Presentation attribute for property ‘lighting-color’">‘lighting-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerEndProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-end’">‘marker-end’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerMidProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-mid’">‘marker-mid’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerStartProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-start’">‘marker-start’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#MaskProperty"><span class="attr-name" title="Presentation attribute for property ‘mask’">‘mask’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘opacity’">‘opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OverflowProperty"><span class="attr-name" title="Presentation attribute for property ‘overflow’">‘overflow’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#PointerEventsProperty"><span class="attr-name" title="Presentation attribute for property ‘pointer-events’">‘pointer-events’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ShapeRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘shape-rendering’">‘shape-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopColorProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-color’">‘stop-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-opacity’">‘stop-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke’">‘stroke’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDasharrayProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dasharray’">‘stroke-dasharray’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDashoffsetProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dashoffset’">‘stroke-dashoffset’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinecapProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linecap’">‘stroke-linecap’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinejoinProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linejoin’">‘stroke-linejoin’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeMiterlimitProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-miterlimit’">‘stroke-miterlimit’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-opacity’">‘stroke-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeWidthProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-width’">‘stroke-width’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextAnchorProperty"><span class="attr-name" title="Presentation attribute for property ‘text-anchor’">‘text-anchor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextDecorationProperty"><span class="attr-name" title="Presentation attribute for property ‘text-decoration’">‘text-decoration’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#TextRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘text-rendering’">‘text-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#UnicodeBidiProperty"><span class="attr-name" title="Presentation attribute for property ‘unicode-bidi’">‘unicode-bidi’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#VisibilityProperty"><span class="attr-name" title="Presentation attribute for property ‘visibility’">‘visibility’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WordSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘word-spacing’">‘word-spacing’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WritingModeProperty"><span class="attr-name" title="Presentation attribute for property ‘writing-mode’">‘writing-mode’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermFilterPrimitiveAttributes">filter primitive attributes</a><span class="expanding"> — <a href="filters.html#FilterPrimitiveXAttribute"><span class="attr-name">‘x’</span></a>, <a href="filters.html#FilterPrimitiveYAttribute"><span class="attr-name">‘y’</span></a>, <a href="filters.html#FilterPrimitiveWidthAttribute"><span class="attr-name">‘width’</span></a>, <a href="filters.html#FilterPrimitiveHeightAttribute"><span class="attr-name">‘height’</span></a>, <a href="filters.html#FilterPrimitiveResultAttribute"><span class="attr-name">‘result’</span></a></span></li><li><a href="styling.html#ClassAttribute"><span class="attr-name">‘class’</span></a></li><li><a href="styling.html#StyleAttribute"><span class="attr-name">‘style’</span></a></li></ul></dd><dt>DOM Interfaces:</dt><dd><ul class="no-bullets"><li><a class="idlinterface" href="#InterfaceSVGFEMergeElement">SVGFEMergeElement</a></li></ul></dd></dl></div>
2759 <div class="element-summary"><div class="element-summary-name"><span class="element-name">‘feMergeNode’</span></div><dl><dt>Categories:</dt><dd>None</dd><dt>Content model:</dt><dd>Any number of the following elements, in any order:
2760 <ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#AnimateElement"><span class="element-name">‘animate’</span></a></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#SetElement"><span class="element-name">‘set’</span></a></li></ul></dd><dt>Attributes:</dt><dd><ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermCoreAttributes">core attributes</a><span class="expanding"> — <a href="struct.html#IDAttribute"><span class="attr-name">‘id’</span></a>, <a href="struct.html#XMLBaseAttribute"><span class="attr-name">‘xml:base’</span></a>, <a href="struct.html#XMLLangAttribute"><span class="attr-name">‘xml:lang’</span></a>, <a href="struct.html#XMLSpaceAttribute"><span class="attr-name">‘xml:space’</span></a></span></li><li><a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a></li></ul></dd><dt>DOM Interfaces:</dt><dd><ul class="no-bullets"><li><a class="idlinterface" href="#InterfaceSVGFEMergeNodeElement">SVGFEMergeNodeElement</a></li></ul></dd></dl></div>
2762 <p>This filter primitive composites input image layers on top of each other
2763 using the <em>over</em> operator with <em>Input1</em> (corresponding to the
2764 first <a href="#feMergeNodeElement"><span class="element-name">‘feMergeNode’</span></a> child element) on the bottom
2765 and the last specified input, <em>InputN</em> (corresponding to the last <a href="#feMergeNodeElement"><span class="element-name">‘feMergeNode’</span></a> child element), on top.</p>
2767 <p>Many effects produce a number of intermediate layers in order to create
2768 the final output image. This filter allows us to collapse those into a single
2769 image. Although this could be done by using n-1 Composite-filters, it is more
2770 convenient to have this common operation available in this form, and offers
2771 the implementation some additional flexibility.</p>
2773 <p>Each 'feMerge' element can have any number of 'feMergeNode' subelements,
2774 each of which has an <a href="#CommonAttributes"><span class="attr-name">in</span></a> attribute.</p>
2776 <p>The canonical implementation of feMerge is to render the entire effect
2777 into one RGBA layer, and then render the resulting layer on the output
2778 device. In certain cases (in particular if the output device itself is a
2779 continuous tone device), and since merging is associative, it might be a
2780 sufficient approximation to evaluate the effect one layer at a time and
2781 render each layer individually onto the output device bottom to top.</p>
2783 <p>If the topmost image input is <a href="#SourceGraphic"><span class="attr-value">SourceGraphic</span></a> and this <span class="element-name">‘feMerge’</span> is the last filter primitive in the
2784 filter, the implementation is encouraged to render the layers up to that
2785 point, and then render the <a href="#SourceGraphic"><span class="attr-value">SourceGraphic</span></a> directly from its vector
2786 description on top.</p>
2788 <p id="feMergeNode"><a href="#AnExample">The example</a> at the start of this chapter makes
2789 use of the <span class="element-name">feMerge</span> filter primitive to
2790 composite two intermediate filter results together.</p>
2792 <h2 id="feMorphologyElement">22 Filter primitive <span class="element-name">‘feMorphology’</span></h2>
2794 <div class="element-summary"><div class="element-summary-name"><span class="element-name">‘feMorphology’</span></div><dl><dt>Categories:</dt><dd><a href="#TermFilterPrimitiveElements">Filter primitives element</a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermFilterPrimitiveElement">filter primitive element</a></dd><dt>Content model:</dt><dd>Any number of the following elements, in any order:
2795 <ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#AnimateElement"><span class="element-name">‘animate’</span></a></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#SetElement"><span class="element-name">‘set’</span></a></li></ul></dd><dt>Attributes:</dt><dd><ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermCoreAttributes">core attributes</a><span class="expanding"> — <a href="struct.html#IDAttribute"><span class="attr-name">‘id’</span></a>, <a href="struct.html#XMLBaseAttribute"><span class="attr-name">‘xml:base’</span></a>, <a href="struct.html#XMLLangAttribute"><span class="attr-name">‘xml:lang’</span></a>, <a href="struct.html#XMLSpaceAttribute"><span class="attr-name">‘xml:space’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermPresentationAttribute">presentation attributes</a><span class="expanding"> — <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#AlignmentBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘alignment-baseline’">‘alignment-baseline’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#BaselineShiftProperty"><span class="attr-name" title="Presentation attribute for property ‘baseline-shift’">‘baseline-shift’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipProperty"><span class="attr-name" title="Presentation attribute for property ‘clip’">‘clip’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipPathProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-path’">‘clip-path’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-rule’">‘clip-rule’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProperty"><span class="attr-name" title="Presentation attribute for property ‘color’">‘color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation’">‘color-interpolation’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationFiltersProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation-filters’">‘color-interpolation-filters’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProfileProperty"><span class="attr-name" title="Presentation attribute for property ‘color-profile’">‘color-profile’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘color-rendering’">‘color-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#CursorProperty"><span class="attr-name" title="Presentation attribute for property ‘cursor’">‘cursor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DirectionProperty"><span class="attr-name" title="Presentation attribute for property ‘direction’">‘direction’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#DisplayProperty"><span class="attr-name" title="Presentation attribute for property ‘display’">‘display’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DominantBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘dominant-baseline’">‘dominant-baseline’</span></a>, <a href="#EnableBackgroundProperty"><span class="attr-name" title="Presentation attribute for property ‘enable-background’">‘enable-background’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillProperty"><span class="attr-name" title="Presentation attribute for property ‘fill’">‘fill’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-opacity’">‘fill-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-rule’">‘fill-rule’</span></a>, <a href="#FilterProperty"><span class="attr-name" title="Presentation attribute for property ‘filter’">‘filter’</span></a>, <a href="#FloodColorProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-color’">‘flood-color’</span></a>, <a href="#FloodOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-opacity’">‘flood-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontFamilyProperty"><span class="attr-name" title="Presentation attribute for property ‘font-family’">‘font-family’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size’">‘font-size’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeAdjustProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size-adjust’">‘font-size-adjust’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStretchProperty"><span class="attr-name" title="Presentation attribute for property ‘font-stretch’">‘font-stretch’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStyleProperty"><span class="attr-name" title="Presentation attribute for property ‘font-style’">‘font-style’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontVariantProperty"><span class="attr-name" title="Presentation attribute for property ‘font-variant’">‘font-variant’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontWeightProperty"><span class="attr-name" title="Presentation attribute for property ‘font-weight’">‘font-weight’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationHorizontalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-horizontal’">‘glyph-orientation-horizontal’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationVerticalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-vertical’">‘glyph-orientation-vertical’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ImageRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘image-rendering’">‘image-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#KerningProperty"><span class="attr-name" title="Presentation attribute for property ‘kerning’">‘kerning’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#LetterSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘letter-spacing’">‘letter-spacing’</span></a>, <a href="#LightingColorProperty"><span class="attr-name" title="Presentation attribute for property ‘lighting-color’">‘lighting-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerEndProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-end’">‘marker-end’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerMidProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-mid’">‘marker-mid’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerStartProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-start’">‘marker-start’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#MaskProperty"><span class="attr-name" title="Presentation attribute for property ‘mask’">‘mask’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘opacity’">‘opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OverflowProperty"><span class="attr-name" title="Presentation attribute for property ‘overflow’">‘overflow’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#PointerEventsProperty"><span class="attr-name" title="Presentation attribute for property ‘pointer-events’">‘pointer-events’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ShapeRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘shape-rendering’">‘shape-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopColorProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-color’">‘stop-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-opacity’">‘stop-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke’">‘stroke’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDasharrayProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dasharray’">‘stroke-dasharray’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDashoffsetProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dashoffset’">‘stroke-dashoffset’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinecapProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linecap’">‘stroke-linecap’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinejoinProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linejoin’">‘stroke-linejoin’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeMiterlimitProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-miterlimit’">‘stroke-miterlimit’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-opacity’">‘stroke-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeWidthProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-width’">‘stroke-width’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextAnchorProperty"><span class="attr-name" title="Presentation attribute for property ‘text-anchor’">‘text-anchor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextDecorationProperty"><span class="attr-name" title="Presentation attribute for property ‘text-decoration’">‘text-decoration’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#TextRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘text-rendering’">‘text-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#UnicodeBidiProperty"><span class="attr-name" title="Presentation attribute for property ‘unicode-bidi’">‘unicode-bidi’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#VisibilityProperty"><span class="attr-name" title="Presentation attribute for property ‘visibility’">‘visibility’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WordSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘word-spacing’">‘word-spacing’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WritingModeProperty"><span class="attr-name" title="Presentation attribute for property ‘writing-mode’">‘writing-mode’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermFilterPrimitiveAttributes">filter primitive attributes</a><span class="expanding"> — <a href="filters.html#FilterPrimitiveXAttribute"><span class="attr-name">‘x’</span></a>, <a href="filters.html#FilterPrimitiveYAttribute"><span class="attr-name">‘y’</span></a>, <a href="filters.html#FilterPrimitiveWidthAttribute"><span class="attr-name">‘width’</span></a>, <a href="filters.html#FilterPrimitiveHeightAttribute"><span class="attr-name">‘height’</span></a>, <a href="filters.html#FilterPrimitiveResultAttribute"><span class="attr-name">‘result’</span></a></span></li><li><a href="styling.html#ClassAttribute"><span class="attr-name">‘class’</span></a></li><li><a href="styling.html#StyleAttribute"><span class="attr-name">‘style’</span></a></li><li><a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a></li><li><a href="#feMorphologyOperatorAttribute"><span class="attr-name">‘operator’</span></a></li><li><a href="#feMorphologyRadiusAttribute"><span class="attr-name">‘radius’</span></a></li></ul></dd><dt>DOM Interfaces:</dt><dd><ul class="no-bullets"><li><a class="idlinterface" href="#InterfaceSVGFEMorphologyElement">SVGFEMorphologyElement</a></li></ul></dd></dl></div>
2798 <p>This filter primitive performs "fattening" or "thinning" of artwork. It is
2799 particularly useful for fattening or thinning an alpha channel.</p>
2801 <p>The dilation (or erosion) kernel is a rectangle with a width of
2802 2*<em>x-radius</em> and a height of 2*<em>y-radius</em>. In dilation, the
2803 output pixel is the individual component-wise maximum of the corresponding
2804 R,G,B,A values in the input image's kernel rectangle. In erosion, the output
2805 pixel is the individual component-wise minimum of the corresponding R,G,B,A
2806 values in the input image's kernel rectangle.</p>
2808 <p>Frequently this operation will take place on alpha-only images, such as
2809 that produced by the built-in input, <a href="#SourceAlpha"><span class="attr-value">SourceAlpha</span></a>. In that case, the implementation
2810 might want to optimize the single channel case.</p>
2812 <p>If the input has infinite extent and is constant (e.g <span class="attr-value"><a href="#FillPaint">FillPaint</a></span>
2813 where the fill is a solid color), this operation has no effect.
2814 If the input has infinite extent and the filter result
2815 is the input to an <a href="#feTileElement"><span class="element-name">‘feTile’</span></a>, the filter is evaluated with
2816 periodic boundary conditions.</p>
2818 <p>Because <span class="element-name">‘feMorphology’</span> operates on
2819 premultipied color values, it will always result in color values less than or
2820 equal to the alpha channel.</p>
2822 <div class="adef-list">
2823 <p><em>Attribute definitions:</em></p>
2824 <dl><dt id="feMorphologyOperatorAttribute"><span class="adef">operator</span> = "<em>erode | dilate</em>"</dt><dd>A keyword indicating whether to erode (i.e., thin) or dilate (fatten)
2825 the source graphic.
2826 The lacuna value for <a href="#feMorphologyOperatorAttribute"><span class="attr-name">‘operator’</span></a> is <span class="attr-value">erode</span>.
2827 <br/>
2828 <span class="anim-target">Animatable: yes.</span></dd><dt id="feMorphologyRadiusAttribute"><span class="adef">radius</span> =
2829 "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumberOptionalNumber"><number-optional-number></a></em>"</dt><dd>The radius (or radii) for the operation. If two <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a>
2830 s are provided, the first number represents a x-radius and the second
2831 value represents a y-radius. If one number is provided, then that value
2832 is used for both X and Y. The values are in the coordinate system
2833 established by attribute <a href="#FilterElementPrimitiveUnitsAttribute"><span class="attr-name">‘primitiveUnits’</span></a> on the <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
2834 element.<br/>
2835 A negative or zero value disables the effect of the given filter
2836 primitive (i.e., the result is a transparent black image).<br/>
2837 If the attribute is not specified, then the effect is as if a value of
2838 <span class="attr-value">0</span> were specified.<br/>
2839 <span class="anim-target">Animatable: yes.</span></dd></dl>
2840 </div>
2843 <pre class="xml"><?xml version="1.0"?>
2844 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
2845 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
2846 <svg width="5cm" height="7cm" viewBox="0 0 700 500"
2847 xmlns="http://www.w3.org/2000/svg" version="1.1">
2848 <title>Example feMorphology - Examples of erode and dilate</title>
2849 <desc>Five text strings drawn as outlines.
2850 The first is unfiltered. The second and third use 'erode'.
2851 The fourth and fifth use 'dilate'.</desc>
2852 <defs>
2853 <filter id="Erode3">
2854 <feMorphology operator="erode" in="SourceGraphic" radius="3" />
2855 </filter>
2856 <filter id="Erode6">
2857 <feMorphology operator="erode" in="SourceGraphic" radius="6" />
2858 </filter>
2859 <filter id="Dilate3">
2860 <feMorphology operator="dilate" in="SourceGraphic" radius="3" />
2861 </filter>
2862 <filter id="Dilate6">
2863 <feMorphology operator="dilate" in="SourceGraphic" radius="6" />
2864 </filter>
2865 </defs>
2866 <rect fill="none" stroke="blue" stroke-width="2"
2867 x="1" y="1" width="698" height="498"/>
2868 <g enable-background="new" >
2869 <g font-family="Verdana" font-size="75"
2870 fill="none" stroke="black" stroke-width="6" >
2871 <text x="50" y="90">Unfiltered</text>
2872 <text x="50" y="180" filter="url(#Erode3)" >Erode radius 3</text>
2873 <text x="50" y="270" filter="url(#Erode6)" >Erode radius 6</text>
2874 <text x="50" y="360" filter="url(#Dilate3)" >Dilate radius 3</text>
2875 <text x="50" y="450" filter="url(#Dilate6)" >Dilate radius 6</text>
2876 </g>
2877 </g>
2878 </svg></pre><table summary="Example "><caption align="bottom">Example </caption><tr><td><img alt="Example " src="examples/feMorphology.png"/></td></tr></table><p class="view-as-svg"><a href="examples/feMorphology.svg">View this example as SVG (SVG-enabled browsers only)</a></p>
2880 <h2 id="feOffsetElement">23 Filter primitive <span class="element-name">‘feOffset’</span></h2>
2882 <div class="element-summary"><div class="element-summary-name"><span class="element-name">‘feOffset’</span></div><dl><dt>Categories:</dt><dd><a href="#TermFilterPrimitiveElements">Filter primitives element</a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermFilterPrimitiveElement">filter primitive element</a></dd><dt>Content model:</dt><dd>Any number of the following elements, in any order:
2883 <ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#AnimateElement"><span class="element-name">‘animate’</span></a></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#SetElement"><span class="element-name">‘set’</span></a></li></ul></dd><dt>Attributes:</dt><dd><ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermCoreAttributes">core attributes</a><span class="expanding"> — <a href="struct.html#IDAttribute"><span class="attr-name">‘id’</span></a>, <a href="struct.html#XMLBaseAttribute"><span class="attr-name">‘xml:base’</span></a>, <a href="struct.html#XMLLangAttribute"><span class="attr-name">‘xml:lang’</span></a>, <a href="struct.html#XMLSpaceAttribute"><span class="attr-name">‘xml:space’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermPresentationAttribute">presentation attributes</a><span class="expanding"> — <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#AlignmentBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘alignment-baseline’">‘alignment-baseline’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#BaselineShiftProperty"><span class="attr-name" title="Presentation attribute for property ‘baseline-shift’">‘baseline-shift’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipProperty"><span class="attr-name" title="Presentation attribute for property ‘clip’">‘clip’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipPathProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-path’">‘clip-path’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-rule’">‘clip-rule’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProperty"><span class="attr-name" title="Presentation attribute for property ‘color’">‘color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation’">‘color-interpolation’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationFiltersProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation-filters’">‘color-interpolation-filters’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProfileProperty"><span class="attr-name" title="Presentation attribute for property ‘color-profile’">‘color-profile’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘color-rendering’">‘color-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#CursorProperty"><span class="attr-name" title="Presentation attribute for property ‘cursor’">‘cursor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DirectionProperty"><span class="attr-name" title="Presentation attribute for property ‘direction’">‘direction’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#DisplayProperty"><span class="attr-name" title="Presentation attribute for property ‘display’">‘display’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DominantBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘dominant-baseline’">‘dominant-baseline’</span></a>, <a href="#EnableBackgroundProperty"><span class="attr-name" title="Presentation attribute for property ‘enable-background’">‘enable-background’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillProperty"><span class="attr-name" title="Presentation attribute for property ‘fill’">‘fill’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-opacity’">‘fill-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-rule’">‘fill-rule’</span></a>, <a href="#FilterProperty"><span class="attr-name" title="Presentation attribute for property ‘filter’">‘filter’</span></a>, <a href="#FloodColorProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-color’">‘flood-color’</span></a>, <a href="#FloodOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-opacity’">‘flood-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontFamilyProperty"><span class="attr-name" title="Presentation attribute for property ‘font-family’">‘font-family’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size’">‘font-size’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeAdjustProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size-adjust’">‘font-size-adjust’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStretchProperty"><span class="attr-name" title="Presentation attribute for property ‘font-stretch’">‘font-stretch’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStyleProperty"><span class="attr-name" title="Presentation attribute for property ‘font-style’">‘font-style’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontVariantProperty"><span class="attr-name" title="Presentation attribute for property ‘font-variant’">‘font-variant’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontWeightProperty"><span class="attr-name" title="Presentation attribute for property ‘font-weight’">‘font-weight’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationHorizontalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-horizontal’">‘glyph-orientation-horizontal’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationVerticalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-vertical’">‘glyph-orientation-vertical’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ImageRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘image-rendering’">‘image-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#KerningProperty"><span class="attr-name" title="Presentation attribute for property ‘kerning’">‘kerning’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#LetterSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘letter-spacing’">‘letter-spacing’</span></a>, <a href="#LightingColorProperty"><span class="attr-name" title="Presentation attribute for property ‘lighting-color’">‘lighting-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerEndProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-end’">‘marker-end’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerMidProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-mid’">‘marker-mid’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerStartProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-start’">‘marker-start’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#MaskProperty"><span class="attr-name" title="Presentation attribute for property ‘mask’">‘mask’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘opacity’">‘opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OverflowProperty"><span class="attr-name" title="Presentation attribute for property ‘overflow’">‘overflow’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#PointerEventsProperty"><span class="attr-name" title="Presentation attribute for property ‘pointer-events’">‘pointer-events’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ShapeRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘shape-rendering’">‘shape-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopColorProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-color’">‘stop-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-opacity’">‘stop-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke’">‘stroke’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDasharrayProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dasharray’">‘stroke-dasharray’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDashoffsetProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dashoffset’">‘stroke-dashoffset’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinecapProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linecap’">‘stroke-linecap’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinejoinProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linejoin’">‘stroke-linejoin’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeMiterlimitProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-miterlimit’">‘stroke-miterlimit’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-opacity’">‘stroke-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeWidthProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-width’">‘stroke-width’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextAnchorProperty"><span class="attr-name" title="Presentation attribute for property ‘text-anchor’">‘text-anchor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextDecorationProperty"><span class="attr-name" title="Presentation attribute for property ‘text-decoration’">‘text-decoration’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#TextRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘text-rendering’">‘text-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#UnicodeBidiProperty"><span class="attr-name" title="Presentation attribute for property ‘unicode-bidi’">‘unicode-bidi’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#VisibilityProperty"><span class="attr-name" title="Presentation attribute for property ‘visibility’">‘visibility’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WordSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘word-spacing’">‘word-spacing’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WritingModeProperty"><span class="attr-name" title="Presentation attribute for property ‘writing-mode’">‘writing-mode’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermFilterPrimitiveAttributes">filter primitive attributes</a><span class="expanding"> — <a href="filters.html#FilterPrimitiveXAttribute"><span class="attr-name">‘x’</span></a>, <a href="filters.html#FilterPrimitiveYAttribute"><span class="attr-name">‘y’</span></a>, <a href="filters.html#FilterPrimitiveWidthAttribute"><span class="attr-name">‘width’</span></a>, <a href="filters.html#FilterPrimitiveHeightAttribute"><span class="attr-name">‘height’</span></a>, <a href="filters.html#FilterPrimitiveResultAttribute"><span class="attr-name">‘result’</span></a></span></li><li><a href="styling.html#ClassAttribute"><span class="attr-name">‘class’</span></a></li><li><a href="styling.html#StyleAttribute"><span class="attr-name">‘style’</span></a></li><li><a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a></li><li><a href="#feOffsetDxAttribute"><span class="attr-name">‘dx’</span></a></li><li><a href="#feOffsetDyAttribute"><span class="attr-name">‘dy’</span></a></li></ul></dd><dt>DOM Interfaces:</dt><dd><ul class="no-bullets"><li><a class="idlinterface" href="#InterfaceSVGFEOffsetElement">SVGFEOffsetElement</a></li></ul></dd></dl></div>
2885 <p>This filter primitive offsets the input image relative to its current
2886 position in the image space by the specified vector.</p>
2888 <p>This is important for effects like drop shadows.</p>
2890 <p>When applying this filter, the destination location may be offset by a
2891 fraction of a pixel in device space. <span class="requirement" id="assert_hqFeOffsetInterpolation">In this case a high quality viewer
2892 should make use of appropriate interpolation techniques, for example bilinear
2893 or bicubic.</span> This is especially recommended for dynamic viewers where this
2894 interpolation provides visually smoother movement of images. For static
2895 viewers this is less of a concern. Close attention should be made to the
2896 <span class="prop-name">‘image-rendering’</span> property setting to
2897 determine the authors intent.</p>
2899 <div class="adef-list">
2900 <p><em>Attribute definitions:</em></p>
2901 <dl><dt id="feOffsetDxAttribute"><span class="adef">dx</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></em>"</dt><dd>The amount to offset the input graphic along the x-axis. The offset
2902 amount is expressed in the coordinate system established by attribute
2903 <a href="#FilterElementPrimitiveUnitsAttribute"><span class="attr-name">‘primitiveUnits’</span></a> on the <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
2904 element.<br/>
2905 If the attribute is not specified, then the effect is as if a value of
2906 <span class="attr-value">0</span> were specified.<br/>
2907 <span class="anim-target">Animatable: yes.</span></dd><dt id="feOffsetDyAttribute"><span class="adef">dy</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></em>"</dt><dd>The amount to offset the input graphic along the y-axis. The offset
2908 amount is expressed in the coordinate system established by attribute
2909 <a href="#FilterElementPrimitiveUnitsAttribute"><span class="attr-name">‘primitiveUnits’</span></a> on the <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
2910 element.<br/>
2911 If the attribute is not specified, then the effect is as if a value of
2912 <span class="attr-value">0</span> were specified.<br/>
2913 <span class="anim-target">Animatable: yes.</span></dd></dl>
2914 </div>
2916 <p><a href="#AnExample">The example</a> at the start of this chapter makes
2917 use of the <span class="element-name">feOffset</span> filter primitive to
2918 offset the drop shadow from the original source graphic.</p>
2920 <h2 id="feSpecularLightingElement">24 Filter primitive <span class="element-name">‘feSpecularLighting’</span></h2>
2922 <div class="element-summary"><div class="element-summary-name"><span class="element-name">‘feSpecularLighting’</span></div><dl><dt>Categories:</dt><dd><a href="#TermFilterPrimitiveElements">Filter primitives element</a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermFilterPrimitiveElement">filter primitive element</a></dd><dt>Content model:</dt><dd>Any number of the following elements, in any order:
2923 <ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermLightSourceElement">light source elements</a><span class="expanding"> — <a href="#feDistantLightElement"><span class="element-name">‘feDistantLight’</span></a>, <a href="#fePointLightElement"><span class="element-name">‘fePointLight’</span></a>, <a href="#feSpotLightElement"><span class="element-name">‘feSpotLight’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#AnimateElement"><span class="element-name">‘animate’</span></a></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#AnimateColorElement"><span class="element-name">‘animateColor’</span></a></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#SetElement"><span class="element-name">‘set’</span></a></li></ul></dd><dt>Attributes:</dt><dd><ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermCoreAttributes">core attributes</a><span class="expanding"> — <a href="struct.html#IDAttribute"><span class="attr-name">‘id’</span></a>, <a href="struct.html#XMLBaseAttribute"><span class="attr-name">‘xml:base’</span></a>, <a href="struct.html#XMLLangAttribute"><span class="attr-name">‘xml:lang’</span></a>, <a href="struct.html#XMLSpaceAttribute"><span class="attr-name">‘xml:space’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermPresentationAttribute">presentation attributes</a><span class="expanding"> — <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#AlignmentBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘alignment-baseline’">‘alignment-baseline’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#BaselineShiftProperty"><span class="attr-name" title="Presentation attribute for property ‘baseline-shift’">‘baseline-shift’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipProperty"><span class="attr-name" title="Presentation attribute for property ‘clip’">‘clip’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipPathProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-path’">‘clip-path’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-rule’">‘clip-rule’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProperty"><span class="attr-name" title="Presentation attribute for property ‘color’">‘color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation’">‘color-interpolation’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationFiltersProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation-filters’">‘color-interpolation-filters’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProfileProperty"><span class="attr-name" title="Presentation attribute for property ‘color-profile’">‘color-profile’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘color-rendering’">‘color-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#CursorProperty"><span class="attr-name" title="Presentation attribute for property ‘cursor’">‘cursor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DirectionProperty"><span class="attr-name" title="Presentation attribute for property ‘direction’">‘direction’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#DisplayProperty"><span class="attr-name" title="Presentation attribute for property ‘display’">‘display’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DominantBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘dominant-baseline’">‘dominant-baseline’</span></a>, <a href="#EnableBackgroundProperty"><span class="attr-name" title="Presentation attribute for property ‘enable-background’">‘enable-background’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillProperty"><span class="attr-name" title="Presentation attribute for property ‘fill’">‘fill’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-opacity’">‘fill-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-rule’">‘fill-rule’</span></a>, <a href="#FilterProperty"><span class="attr-name" title="Presentation attribute for property ‘filter’">‘filter’</span></a>, <a href="#FloodColorProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-color’">‘flood-color’</span></a>, <a href="#FloodOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-opacity’">‘flood-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontFamilyProperty"><span class="attr-name" title="Presentation attribute for property ‘font-family’">‘font-family’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size’">‘font-size’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeAdjustProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size-adjust’">‘font-size-adjust’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStretchProperty"><span class="attr-name" title="Presentation attribute for property ‘font-stretch’">‘font-stretch’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStyleProperty"><span class="attr-name" title="Presentation attribute for property ‘font-style’">‘font-style’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontVariantProperty"><span class="attr-name" title="Presentation attribute for property ‘font-variant’">‘font-variant’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontWeightProperty"><span class="attr-name" title="Presentation attribute for property ‘font-weight’">‘font-weight’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationHorizontalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-horizontal’">‘glyph-orientation-horizontal’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationVerticalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-vertical’">‘glyph-orientation-vertical’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ImageRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘image-rendering’">‘image-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#KerningProperty"><span class="attr-name" title="Presentation attribute for property ‘kerning’">‘kerning’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#LetterSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘letter-spacing’">‘letter-spacing’</span></a>, <a href="#LightingColorProperty"><span class="attr-name" title="Presentation attribute for property ‘lighting-color’">‘lighting-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerEndProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-end’">‘marker-end’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerMidProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-mid’">‘marker-mid’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerStartProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-start’">‘marker-start’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#MaskProperty"><span class="attr-name" title="Presentation attribute for property ‘mask’">‘mask’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘opacity’">‘opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OverflowProperty"><span class="attr-name" title="Presentation attribute for property ‘overflow’">‘overflow’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#PointerEventsProperty"><span class="attr-name" title="Presentation attribute for property ‘pointer-events’">‘pointer-events’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ShapeRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘shape-rendering’">‘shape-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopColorProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-color’">‘stop-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-opacity’">‘stop-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke’">‘stroke’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDasharrayProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dasharray’">‘stroke-dasharray’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDashoffsetProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dashoffset’">‘stroke-dashoffset’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinecapProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linecap’">‘stroke-linecap’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinejoinProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linejoin’">‘stroke-linejoin’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeMiterlimitProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-miterlimit’">‘stroke-miterlimit’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-opacity’">‘stroke-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeWidthProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-width’">‘stroke-width’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextAnchorProperty"><span class="attr-name" title="Presentation attribute for property ‘text-anchor’">‘text-anchor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextDecorationProperty"><span class="attr-name" title="Presentation attribute for property ‘text-decoration’">‘text-decoration’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#TextRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘text-rendering’">‘text-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#UnicodeBidiProperty"><span class="attr-name" title="Presentation attribute for property ‘unicode-bidi’">‘unicode-bidi’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#VisibilityProperty"><span class="attr-name" title="Presentation attribute for property ‘visibility’">‘visibility’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WordSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘word-spacing’">‘word-spacing’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WritingModeProperty"><span class="attr-name" title="Presentation attribute for property ‘writing-mode’">‘writing-mode’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermFilterPrimitiveAttributes">filter primitive attributes</a><span class="expanding"> — <a href="filters.html#FilterPrimitiveXAttribute"><span class="attr-name">‘x’</span></a>, <a href="filters.html#FilterPrimitiveYAttribute"><span class="attr-name">‘y’</span></a>, <a href="filters.html#FilterPrimitiveWidthAttribute"><span class="attr-name">‘width’</span></a>, <a href="filters.html#FilterPrimitiveHeightAttribute"><span class="attr-name">‘height’</span></a>, <a href="filters.html#FilterPrimitiveResultAttribute"><span class="attr-name">‘result’</span></a></span></li><li><a href="styling.html#ClassAttribute"><span class="attr-name">‘class’</span></a></li><li><a href="styling.html#StyleAttribute"><span class="attr-name">‘style’</span></a></li><li><a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a></li><li><a href="#feSpecularLightingSurfaceScaleAttribute"><span class="attr-name">‘surfaceScale’</span></a></li><li><a href="#feSpecularLightingSpecularConstantAttribute"><span class="attr-name">‘specularConstant’</span></a></li><li><a href="#feSpecularLightingSpecularExponentAttribute"><span class="attr-name">‘specularExponent’</span></a></li><li><a href="#feSpecularLightingKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a></li></ul></dd><dt>DOM Interfaces:</dt><dd><ul class="no-bullets"><li><a class="idlinterface" href="#InterfaceSVGFESpecularLightingElement">SVGFESpecularLightingElement</a></li></ul></dd></dl></div>
2925 <p>This filter primitive lights a source graphic using the alpha channel as a
2926 bump map. The resulting image is an RGBA image based on the light color. The
2927 lighting calculation follows the standard specular component of the Phong
2928 lighting model. The resulting image depends on the light color, light
2929 position and surface geometry of the input bump map. The result of the
2930 lighting calculation is added. The filter primitive assumes that the viewer
2931 is at infinity in the z direction (i.e., the unit vector in the eye direction
2932 is (0,0,1) everywhere).</p>
2934 <p>This filter primitive produces an image which contains the specular
2935 reflection part of the lighting calculation. Such a map is intended to be
2936 combined with a texture using the <em>add</em> term of the
2937 <em>arithmetic</em> <a href="#feCompositeElement"><span class="element-name">‘feComposite’</span></a> method. Multiple light sources
2938 can be simulated by adding several of these light maps before applying it to
2939 the texture image.</p>
2941 <p>The resulting RGBA image is computed as follows:</p>
2943 <p class="filterformula">S<sub>r</sub> = k<sub>s</sub> * pow(N.H,
2944 specularExponent) * L<sub>r<br/>
2945 </sub> S<sub>g</sub> = k<sub>s</sub> * pow(N.H, specularExponent) *
2946 L<sub>g<br/>
2947 </sub> S<sub>b</sub> = k<sub>s</sub> * pow(N.H, specularExponent) *
2948 L<sub>b<br/>
2949 </sub> S<sub>a</sub> = max(S<sub>r,</sub> S<sub>g,</sub> S<sub>b</sub>)</p>
2951 <p>where</p>
2952 <dl><dd>k<sub>s</sub> = specular lighting constant<br/>
2953 N = surface normal unit vector, a function of x and y<br/>
2954 H = "halfway" unit vector between eye unit vector and light unit
2955 vector<br/>
2956 <br/>
2957 L<sub>r</sub>,L<sub>g</sub>,L<sub>b</sub> = RGB components of light</dd></dl>
2959 <p>See <a href="#feDiffuseLighting"><span class="element-name">‘feDiffuseLighting’</span></a> for definition of N and
2960 (L<sub>r</sub>, L<sub>g</sub>, L<sub>b</sub>).</p>
2962 <p>The definition of H reflects our assumption of the constant eye vector E =
2963 (0,0,1):</p>
2965 <p class="filterformula">H = (L + E) / Norm(L+E)</p>
2967 <p>where L is the light unit vector.</p>
2969 <p>Unlike the <a href="#feDiffuseLighting"><span class="element-name">‘feDiffuseLighting’</span></a>, the <span class="element-name">‘feSpecularLighting’</span> filter produces a non-opaque
2970 image. This is due to the fact that the specular result
2971 (S<sub>r</sub>,S<sub>g</sub>,S<sub>b</sub>,S<sub>a</sub>) is meant to be
2972 added to the textured image. The alpha channel of the result is the max of
2973 the color components, so that where the specular light is zero, no additional
2974 coverage is added to the image and a fully white highlight will add
2975 opacity.</p>
2977 <p>The <a href="#feDiffuseLighting"><span class="element-name">‘feDiffuseLighting’</span></a> and <span class="element-name">‘feSpecularLighting’</span> filters will often be
2978 applied together. An implementation may detect this and calculate both maps
2979 in one pass, instead of two.</p>
2981 <div class="adef-list">
2982 <p><em>Attribute definitions:</em></p>
2983 <dl><dt id="feSpecularLightingSurfaceScaleAttribute"><span class="adef">surfaceScale</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></em>"</dt><dd>height of surface when A<sub>in</sub> = 1.<br/>
2984 If the attribute is not specified, then the effect is as if a value of
2985 <span class="attr-value">1</span> were specified.<br/>
2986 <span class="anim-target">Animatable: yes.</span></dd><dt id="feSpecularLightingSpecularConstantAttribute"><span class="adef">specularConstant</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></em>"</dt><dd>ks in Phong lighting model. In SVG, this can be any non-negative
2987 number.<br/>
2988 If the attribute is not specified, then the effect is as if a value of
2989 <span class="attr-value">1</span> were specified.<br/>
2990 <span class="anim-target">Animatable: yes.</span></dd><dt id="feSpecularLightingSpecularExponentAttribute"><span class="adef">specularExponent</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></em>"</dt><dd>Exponent for specular term, larger is more "shiny". Range 1.0 to
2991 128.0.<br/>
2992 If the attribute is not specified, then the effect is as if a value of
2993 <span class="attr-value">1</span> were specified.<br/>
2994 <span class="anim-target">Animatable: yes.</span></dd><dt id="feSpecularLightingKernelUnitLengthAttribute"><span class="adef">kernelUnitLength</span> = "<span class="attr-value"><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumberOptionalNumber"><number-optional-number></a></span>"</dt><dd>The first number is the <dx> value. The second number is the
2995 <dy> value. If the <dy> value is not specified, it defaults
2996 to the same value as <dx>. Indicates the intended distance in
2997 current filter units (i.e., units as determined by the value of
2998 attribute <a href="#FilterElementPrimitiveUnitsAttribute"><span class="attr-name">‘primitiveUnits’</span></a>) for <code>dx</code> and
2999 <code>dy</code>, respectively, in the <a href="#SurfaceNormalCalculations">surface normal calculation
3000 formulas</a>. By specifying value(s) for <span class="attr-name">kernelUnitLength</span>, the kernel becomes defined
3001 in a scalable, abstract coordinate system. If <span class="attr-name">kernelUnitLength</span> is not specified, the
3002 <code>dx</code> and <code>dy</code> values should represent very small
3003 deltas relative to a given <code>(x,y)</code> position, which might be
3004 implemented in some cases as one pixel in the intermediate image
3005 offscreen bitmap, which is a pixel-based coordinate system, and thus
3006 potentially not scalable. For some level of consistency across display
3007 media and user agents, it is necessary that a value be provided for at
3008 least one of <span class="attr-name">filterRes</span> and <span class="attr-name">kernelUnitLength</span>. Discussion of intermediate
3009 images are in the <a href="#Introduction">Introduction</a> and in the
3010 description of attribute <a href="#FilterElementFilterResAttribute"><span class="attr-name">‘filterRes’</span></a>.<br/>
3011 If a negative or zero value is specified the default value will be used
3012 instead. <br/>
3013 <span class="anim-target">Animatable: yes.</span></dd></dl>
3014 </div>
3016 <p>The light source is defined by one of the child elements <a href="#feDistantLightElement"><span class="element-name">‘feDistantLight’</span></a>,
3017 <a href="#fePointLightElement"><span class="element-name">‘fePointLight’</span></a> or <a href="#feDistantLightElement"><span class="element-name">‘feDistantLight’</span></a>. The light color is
3018 specified by property <a href="#LightingColorProperty"><span class="prop-name">‘lighting-color’</span></a>.</p>
3020 <p><a href="#AnExample">The example</a> at the start of this chapter makes
3021 use of the <span class="element-name">feSpecularLighting</span> filter
3022 primitive to achieve a highly reflective, 3D glowing effect.</p>
3024 <h2 id="feTileElement">25 Filter primitive <span class="element-name">‘feTile’</span></h2>
3026 <div class="element-summary"><div class="element-summary-name"><span class="element-name">‘feTile’</span></div><dl><dt>Categories:</dt><dd><a href="#TermFilterPrimitiveElements">Filter primitives element</a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermFilterPrimitiveElement">filter primitive element</a></dd><dt>Content model:</dt><dd>Any number of the following elements, in any order:
3027 <ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#AnimateElement"><span class="element-name">‘animate’</span></a></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#SetElement"><span class="element-name">‘set’</span></a></li></ul></dd><dt>Attributes:</dt><dd><ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermCoreAttributes">core attributes</a><span class="expanding"> — <a href="struct.html#IDAttribute"><span class="attr-name">‘id’</span></a>, <a href="struct.html#XMLBaseAttribute"><span class="attr-name">‘xml:base’</span></a>, <a href="struct.html#XMLLangAttribute"><span class="attr-name">‘xml:lang’</span></a>, <a href="struct.html#XMLSpaceAttribute"><span class="attr-name">‘xml:space’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermPresentationAttribute">presentation attributes</a><span class="expanding"> — <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#AlignmentBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘alignment-baseline’">‘alignment-baseline’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#BaselineShiftProperty"><span class="attr-name" title="Presentation attribute for property ‘baseline-shift’">‘baseline-shift’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipProperty"><span class="attr-name" title="Presentation attribute for property ‘clip’">‘clip’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipPathProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-path’">‘clip-path’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-rule’">‘clip-rule’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProperty"><span class="attr-name" title="Presentation attribute for property ‘color’">‘color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation’">‘color-interpolation’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationFiltersProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation-filters’">‘color-interpolation-filters’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProfileProperty"><span class="attr-name" title="Presentation attribute for property ‘color-profile’">‘color-profile’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘color-rendering’">‘color-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#CursorProperty"><span class="attr-name" title="Presentation attribute for property ‘cursor’">‘cursor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DirectionProperty"><span class="attr-name" title="Presentation attribute for property ‘direction’">‘direction’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#DisplayProperty"><span class="attr-name" title="Presentation attribute for property ‘display’">‘display’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DominantBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘dominant-baseline’">‘dominant-baseline’</span></a>, <a href="#EnableBackgroundProperty"><span class="attr-name" title="Presentation attribute for property ‘enable-background’">‘enable-background’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillProperty"><span class="attr-name" title="Presentation attribute for property ‘fill’">‘fill’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-opacity’">‘fill-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-rule’">‘fill-rule’</span></a>, <a href="#FilterProperty"><span class="attr-name" title="Presentation attribute for property ‘filter’">‘filter’</span></a>, <a href="#FloodColorProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-color’">‘flood-color’</span></a>, <a href="#FloodOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-opacity’">‘flood-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontFamilyProperty"><span class="attr-name" title="Presentation attribute for property ‘font-family’">‘font-family’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size’">‘font-size’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeAdjustProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size-adjust’">‘font-size-adjust’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStretchProperty"><span class="attr-name" title="Presentation attribute for property ‘font-stretch’">‘font-stretch’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStyleProperty"><span class="attr-name" title="Presentation attribute for property ‘font-style’">‘font-style’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontVariantProperty"><span class="attr-name" title="Presentation attribute for property ‘font-variant’">‘font-variant’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontWeightProperty"><span class="attr-name" title="Presentation attribute for property ‘font-weight’">‘font-weight’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationHorizontalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-horizontal’">‘glyph-orientation-horizontal’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationVerticalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-vertical’">‘glyph-orientation-vertical’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ImageRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘image-rendering’">‘image-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#KerningProperty"><span class="attr-name" title="Presentation attribute for property ‘kerning’">‘kerning’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#LetterSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘letter-spacing’">‘letter-spacing’</span></a>, <a href="#LightingColorProperty"><span class="attr-name" title="Presentation attribute for property ‘lighting-color’">‘lighting-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerEndProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-end’">‘marker-end’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerMidProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-mid’">‘marker-mid’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerStartProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-start’">‘marker-start’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#MaskProperty"><span class="attr-name" title="Presentation attribute for property ‘mask’">‘mask’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘opacity’">‘opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OverflowProperty"><span class="attr-name" title="Presentation attribute for property ‘overflow’">‘overflow’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#PointerEventsProperty"><span class="attr-name" title="Presentation attribute for property ‘pointer-events’">‘pointer-events’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ShapeRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘shape-rendering’">‘shape-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopColorProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-color’">‘stop-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-opacity’">‘stop-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke’">‘stroke’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDasharrayProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dasharray’">‘stroke-dasharray’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDashoffsetProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dashoffset’">‘stroke-dashoffset’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinecapProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linecap’">‘stroke-linecap’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinejoinProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linejoin’">‘stroke-linejoin’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeMiterlimitProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-miterlimit’">‘stroke-miterlimit’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-opacity’">‘stroke-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeWidthProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-width’">‘stroke-width’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextAnchorProperty"><span class="attr-name" title="Presentation attribute for property ‘text-anchor’">‘text-anchor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextDecorationProperty"><span class="attr-name" title="Presentation attribute for property ‘text-decoration’">‘text-decoration’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#TextRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘text-rendering’">‘text-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#UnicodeBidiProperty"><span class="attr-name" title="Presentation attribute for property ‘unicode-bidi’">‘unicode-bidi’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#VisibilityProperty"><span class="attr-name" title="Presentation attribute for property ‘visibility’">‘visibility’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WordSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘word-spacing’">‘word-spacing’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WritingModeProperty"><span class="attr-name" title="Presentation attribute for property ‘writing-mode’">‘writing-mode’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermFilterPrimitiveAttributes">filter primitive attributes</a><span class="expanding"> — <a href="filters.html#FilterPrimitiveXAttribute"><span class="attr-name">‘x’</span></a>, <a href="filters.html#FilterPrimitiveYAttribute"><span class="attr-name">‘y’</span></a>, <a href="filters.html#FilterPrimitiveWidthAttribute"><span class="attr-name">‘width’</span></a>, <a href="filters.html#FilterPrimitiveHeightAttribute"><span class="attr-name">‘height’</span></a>, <a href="filters.html#FilterPrimitiveResultAttribute"><span class="attr-name">‘result’</span></a></span></li><li><a href="styling.html#ClassAttribute"><span class="attr-name">‘class’</span></a></li><li><a href="styling.html#StyleAttribute"><span class="attr-name">‘style’</span></a></li><li><a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a></li></ul></dd><dt>DOM Interfaces:</dt><dd><ul class="no-bullets"><li><a class="idlinterface" href="#InterfaceSVGFETileElement">SVGFETileElement</a></li></ul></dd></dl></div>
3029 <p>This filter primitive fills a target rectangle with a repeated, tiled
3030 pattern of an input image.
3031 The target rectangle is as large as the <a href="#FilterPrimitiveSubRegion"><span class="svg-term">filter primitive subregion</span></a> established
3032 by the <span class="element-name">‘feTile’</span> element.
3033 </p>
3035 <p>Typically, the input image has been defined with its own <a href="#FilterPrimitiveSubRegion"><span class="svg-term">filter primitive subregion</span></a> in order to
3036 define a reference tile. <span class="element-name">‘feTile’</span>
3037 replicates the reference tile in both X and Y to completely fill the target
3038 rectangle. The top/left corner of each given tile is at location
3039 <code>(x+i*width,y+j*height)</code>, where <code>(x,y)</code> represents the
3040 top/left of the input image's <a href="#FilterPrimitiveSubRegion"><span class="svg-term">filter primitive subregion</span></a>, <code>width</code>
3041 and <code>height</code> represent the width and height of the input image's
3042 <a href="#FilterPrimitiveSubRegion"><span class="svg-term">filter primitive subregion</span></a>, and <code>i</code> and <code>j</code> can be any
3043 integer value. In most cases, the input image will have a smaller <a href="#FilterPrimitiveSubRegion"><span class="svg-term">filter
3044 primitive subregion</span></a> than the <span class="element-name">‘feTile’</span> in
3045 order to achieve a repeated pattern effect.</p>
3047 <p class="requirement" id="assertTileArtifacts">Implementers must take appropriate measures in constructing the tiled
3048 image to avoid artifacts between tiles, particularly in situations where the
3049 user to device transform includes shear and/or rotation. Unless care is
3050 taken, interpolation can lead to edge pixels in the tile having opacity
3051 values lower or higher than expected due to the interaction of painting
3052 adjacent tiles which each have partial overlap with particular pixels.</p>
3054 <div class="adef-list">
3055 </div>
3057 <h2 id="feTurbulenceElement">26 Filter primitive <span class="element-name">‘feTurbulence’</span></h2>
3061 <p class="specissue">ISSUE: Consider phasing out this C algorithm in favor of Simplex noise, which is more HW friendly.</p>
3063 <p>This filter primitive creates an image using the Perlin turbulence
3064 function. It allows the synthesis of artificial textures like clouds or
3065 marble. For a detailed description the of the Perlin turbulence function, see
3066 "Texturing and Modeling", Ebert et al, AP Professional, 1994. The resulting
3067 image will fill the entire <a href="#FilterPrimitiveSubRegion"><span class="svg-term">filter primitive subregion</span></a> for this filter primitive.</p>
3069 <p>It is possible to create bandwidth-limited noise by synthesizing only one
3070 octave.</p>
3072 <p>The C code below shows the exact algorithm used for this filter effect.
3073 The <a href="#FilterPrimitiveSubRegion"><span class="svg-term">filter primitive subregion</span></a> is to be passed as the arguments fTileX,
3074 fTileY, fTileWidth and fTileHeight.</p>
3076 <p>For fractalSum, you get a turbFunctionResult that is aimed at a range of
3077 -1 to 1 (the actual result might exceed this range in some cases). To convert
3078 to a color value, use the formula <code>colorValue = ((turbFunctionResult *
3079 255) + 255) / 2</code>, then clamp to the range 0 to 255.</p>
3081 <p>For turbulence, you get a turbFunctionResult that is aimed at a range of 0
3082 to 1 (the actual result might exceed this range in some cases). To convert to
3083 a color value, use the formula <code>colorValue = (turbFunctionResult *
3084 255)</code>, then clamp to the range 0 to 255.</p>
3086 <p>The following order is used for applying the pseudo random numbers. An
3087 initial seed value is computed based on the <a href="#feTurbulenceSeedAttribute"><span class="attr-name">‘seed’</span></a> attribute.
3088 Then the implementation computes the lattice
3089 points for R, then continues getting additional pseudo random numbers
3090 relative to the last generated pseudo random number and computes the lattice
3091 points for G, and so on for B and A.</p>
3093 <p>The generated color and alpha values are in the color space determined by
3094 the <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationFiltersProperty"><span class="prop-name">‘color-interpolation-filters’</span></a> property:</p>
3095 <pre class="svgsamplecompressed">/* Produces results in the range [1, 2**31 - 2].
3096 Algorithm is: r = (a * r) mod m
3097 where a = 16807 and m = 2**31 - 1 = 2147483647
3098 See [Park & Miller], CACM vol. 31 no. 10 p. 1195, Oct. 1988
3099 To test: the algorithm should produce the result 1043618065
3100 as the 10,000th generated number if the original seed is 1.
3101 */
3102 #define RAND_m 2147483647 /* 2**31 - 1 */
3103 #define RAND_a 16807 /* 7**5; primitive root of m */
3104 #define RAND_q 127773 /* m / a */
3105 #define RAND_r 2836 /* m % a */
3106 long setup_seed(long lSeed)
3107 {
3108 if (lSeed <= 0) lSeed = -(lSeed % (RAND_m - 1)) + 1;
3109 if (lSeed > RAND_m - 1) lSeed = RAND_m - 1;
3110 return lSeed;
3111 }
3112 long random(long lSeed)
3113 {
3114 long result;
3115 result = RAND_a * (lSeed % RAND_q) - RAND_r * (lSeed / RAND_q);
3116 if (result <= 0) result += RAND_m;
3117 return result;
3118 }
3119 #define BSize 0x100
3120 #define BM 0xff
3121 #define PerlinN 0x1000
3122 #define NP 12 /* 2^PerlinN */
3123 #define NM 0xfff
3124 static uLatticeSelector[BSize + BSize + 2];
3125 static double fGradient[4][BSize + BSize + 2][2];
3126 struct StitchInfo
3127 {
3128 int nWidth; // How much to subtract to wrap for stitching.
3129 int nHeight;
3130 int nWrapX; // Minimum value to wrap.
3131 int nWrapY;
3132 };
3133 static void init(long lSeed)
3134 {
3135 double s;
3136 int i, j, k;
3137 lSeed = setup_seed(lSeed);
3138 for(k = 0; k < 4; k++)
3139 {
3140 for(i = 0; i < BSize; i++)
3141 {
3142 uLatticeSelector[i] = i;
3143 for (j = 0; j < 2; j++)
3144 fGradient[k][i][j] = (double)(((lSeed = random(lSeed)) % (BSize + BSize)) - BSize) / BSize;
3145 s = double(sqrt(fGradient[k][i][0] * fGradient[k][i][0] + fGradient[k][i][1] * fGradient[k][i][1]));
3146 fGradient[k][i][0] /= s;
3147 fGradient[k][i][1] /= s;
3148 }
3149 }
3150 while(--i)
3151 {
3152 k = uLatticeSelector[i];
3153 uLatticeSelector[i] = uLatticeSelector[j = (lSeed = random(lSeed)) % BSize];
3154 uLatticeSelector[j] = k;
3155 }
3156 for(i = 0; i < BSize + 2; i++)
3157 {
3158 uLatticeSelector[BSize + i] = uLatticeSelector[i];
3159 for(k = 0; k < 4; k++)
3160 for(j = 0; j < 2; j++)
3161 fGradient[k][BSize + i][j] = fGradient[k][i][j];
3162 }
3163 }
3164 #define s_curve(t) ( t * t * (3. - 2. * t) )
3165 #define lerp(t, a, b) ( a + t * (b - a) )
3166 double noise2(int nColorChannel, double vec[2], StitchInfo *pStitchInfo)
3167 {
3168 int bx0, bx1, by0, by1, b00, b10, b01, b11;
3169 double rx0, rx1, ry0, ry1, *q, sx, sy, a, b, t, u, v;
3170 register i, j;
3171 t = vec[0] + PerlinN;
3172 bx0 = (int)t;
3173 bx1 = bx0+1;
3174 rx0 = t - (int)t;
3175 rx1 = rx0 - 1.0f;
3176 t = vec[1] + PerlinN;
3177 by0 = (int)t;
3178 by1 = by0+1;
3179 ry0 = t - (int)t;
3180 ry1 = ry0 - 1.0f;
3181 // If stitching, adjust lattice points accordingly.
3182 if(pStitchInfo != NULL)
3183 {
3184 if(bx0 >= pStitchInfo->nWrapX)
3185 bx0 -= pStitchInfo->nWidth;
3186 if(bx1 >= pStitchInfo->nWrapX)
3187 bx1 -= pStitchInfo->nWidth;
3188 if(by0 >= pStitchInfo->nWrapY)
3189 by0 -= pStitchInfo->nHeight;
3190 if(by1 >= pStitchInfo->nWrapY)
3191 by1 -= pStitchInfo->nHeight;
3192 }
3193 bx0 &= BM;
3194 bx1 &= BM;
3195 by0 &= BM;
3196 by1 &= BM;
3197 i = uLatticeSelector[bx0];
3198 j = uLatticeSelector[bx1];
3199 b00 = uLatticeSelector[i + by0];
3200 b10 = uLatticeSelector[j + by0];
3201 b01 = uLatticeSelector[i + by1];
3202 b11 = uLatticeSelector[j + by1];
3203 sx = double(s_curve(rx0));
3204 sy = double(s_curve(ry0));
3205 q = fGradient[nColorChannel][b00]; u = rx0 * q[0] + ry0 * q[1];
3206 q = fGradient[nColorChannel][b10]; v = rx1 * q[0] + ry0 * q[1];
3207 a = lerp(sx, u, v);
3208 q = fGradient[nColorChannel][b01]; u = rx0 * q[0] + ry1 * q[1];
3209 q = fGradient[nColorChannel][b11]; v = rx1 * q[0] + ry1 * q[1];
3210 b = lerp(sx, u, v);
3211 return lerp(sy, a, b);
3212 }
3213 double turbulence(int nColorChannel, double *point, double <a href="#feTurbulenceBaseFrequencyAttribute">fBaseFreqX</a>, double <a href="#feTurbulenceBaseFrequencyAttribute">fBaseFreqY</a>,
3214 int <a href="#feTurbulenceNumOctavesAttribute">nNumOctaves</a>, bool bFractalSum, bool bDoStitching,
3215 double <a href="#FilterPrimitiveSubRegion">fTileX</a>, double <a href="#FilterPrimitiveSubRegion">fTileY</a>, double <a href="#FilterPrimitiveSubRegion">fTileWidth</a>, double <a href="#FilterPrimitiveSubRegion">fTileHeight</a>)
3216 {
3217 StitchInfo stitch;
3218 StitchInfo *pStitchInfo = NULL; // Not stitching when NULL.
3219 // Adjust the base frequencies if necessary for stitching.
3220 if(bDoStitching)
3221 {
3222 // When stitching tiled turbulence, the frequencies must be adjusted
3223 // so that the tile borders will be continuous.
3224 if(fBaseFreqX != 0.0)
3225 {
3226 double fLoFreq = double(floor(fTileWidth * fBaseFreqX)) / fTileWidth;
3227 double fHiFreq = double(ceil(fTileWidth * fBaseFreqX)) / fTileWidth;
3228 if(fBaseFreqX / fLoFreq < fHiFreq / fBaseFreqX)
3229 fBaseFreqX = fLoFreq;
3230 else
3231 fBaseFreqX = fHiFreq;
3232 }
3233 if(fBaseFreqY != 0.0)
3234 {
3235 double fLoFreq = double(floor(fTileHeight * fBaseFreqY)) / fTileHeight;
3236 double fHiFreq = double(ceil(fTileHeight * fBaseFreqY)) / fTileHeight;
3237 if(fBaseFreqY / fLoFreq < fHiFreq / fBaseFreqY)
3238 fBaseFreqY = fLoFreq;
3239 else
3240 fBaseFreqY = fHiFreq;
3241 }
3242 // Set up initial stitch values.
3243 pStitchInfo = &stitch;
3244 stitch.nWidth = int(fTileWidth * fBaseFreqX + 0.5f);
3245 stitch.nWrapX = fTileX * fBaseFreqX + PerlinN + stitch.nWidth;
3246 stitch.nHeight = int(fTileHeight * fBaseFreqY + 0.5f);
3247 stitch.nWrapY = fTileY * fBaseFreqY + PerlinN + stitch.nHeight;
3248 }
3249 double fSum = 0.0f;
3250 double vec[2];
3251 vec[0] = point[0] * fBaseFreqX;
3252 vec[1] = point[1] * fBaseFreqY;
3253 double ratio = 1;
3254 for(int nOctave = 0; nOctave < nNumOctaves; nOctave++)
3255 {
3256 if(bFractalSum)
3257 fSum += double(noise2(nColorChannel, vec, pStitchInfo) / ratio);
3258 else
3259 fSum += double(fabs(noise2(nColorChannel, vec, pStitchInfo)) / ratio);
3260 vec[0] *= 2;
3261 vec[1] *= 2;
3262 ratio *= 2;
3263 if(pStitchInfo != NULL)
3264 {
3265 // Update stitch values. Subtracting PerlinN before the multiplication and
3266 // adding it afterward simplifies to subtracting it once.
3267 stitch.nWidth *= 2;
3268 stitch.nWrapX = 2 * stitch.nWrapX - PerlinN;
3269 stitch.nHeight *= 2;
3270 stitch.nWrapY = 2 * stitch.nWrapY - PerlinN;
3271 }
3272 }
3273 return fSum;
3274 }</pre>
3276 <div class="adef-list">
3277 <p><em>Attribute definitions:</em></p>
3278 <dl><dt id="feTurbulenceBaseFrequencyAttribute"><span class="adef">baseFrequency</span> =
3279 "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumberOptionalNumber"><number-optional-number></a></em>"</dt><dd>
3280 <p>The base frequency (frequencies) parameter(s) for the noise function.
3281 If two <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a>s are provided, the first number represents a base frequency in the X
3282 direction and the second value represents a base frequency in the Y
3283 direction. If one number is provided, then that value is used for both
3284 X and Y.</p>
3285 <p>The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feTurbulenceBaseFrequencyAttribute"><span class="attr-name">‘baseFrequency’</span></a> is <span class="attr-value">0</span>.</p>
3286 <p>Negative values are <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermUnsupportedValue"><span class="svg-term">unsupported</span></a>.</p>
3287 <p><span class="anim-target">Animatable: yes.</span></p>
3288 </dd><dt id="feTurbulenceNumOctavesAttribute"><span class="adef">numOctaves</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeInteger"><integer></a></em>"</dt><dd>
3289 <p>The numOctaves parameter for the noise function.</p>
3290 <p><span class="requirement" id="assert_turbulenceNumOctavesLacunaValue">The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feTurbulenceNumOctavesAttribute"><span class="attr-name">‘numOctaves’</span></a> is <span class="attr-value">1</span>.</span></p>
3291 <p><span class="requirement" id="assert_turbulenceNumOctavesUnsupportedValue">Negative values are <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermUnsupportedValue"><span class="svg-term">unsupported</span></a>.</span></p>
3292 <p><span class="requirement" id="assert_turbulenceNumOctavesAnimatable"><span class="anim-target">Animatable: yes.</span></span></p>
3293 </dd><dt id="feTurbulenceSeedAttribute">
3294 <span class="adef">seed</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></em>"</dt><dd>
3295 <p>The starting number for the pseudo random number generator.</p>
3296 <p><span class="requirement" id="assert_turbulenceSeedLacunaValue">The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feTurbulenceSeedAttribute"><span class="attr-name">‘seed’</span></a> is <span class="attr-value">0</span>.</span></p>
3297 <p><span class="requirement" id="assert_turbulenceSeedTruncation">When the seed number is handed over to the algorithm above it must first be
3298 truncated, i.e. rounded to the closest integer value towards zero.</span></p>
3299 <p><span class="anim-target">Animatable: yes.</span></p>
3300 </dd><dt id="feTurbulenceStitchTilesAttribute"><span class="adef">stitchTiles</span> = "<em>stitch | noStitch</em>"</dt><dd>
3301 <p>If <span class="attr-value">stitchTiles="noStitch"</span>, no attempt
3302 it made to achieve smooth transitions at the border of tiles which
3303 contain a turbulence function. Sometimes the result will show clear
3304 discontinuities at the tile borders.<br/>
3305 If <span class="attr-value">stitchTiles="stitch"</span>, then the user
3306 agent will automatically adjust baseFrequency-x and baseFrequency-y
3307 values such that the <a href="#feTurbulenceElement"><span class="element-name">‘feTurbulence’</span></a> node's width and height (i.e., the
3308 width and height of the current subregion) contains an integral number
3309 of the Perlin tile width and height for the first octave. The
3310 baseFrequency will be adjusted up or down depending on which way has
3311 the smallest relative (not absolute) change as follows: Given the
3312 frequency, calculate <code>lowFreq=floor(width*frequency)/width</code>
3313 and <code>hiFreq=ceil(width*frequency)/width</code>. If
3314 frequency/lowFreq < hiFreq/frequency then use lowFreq, else use
3315 hiFreq. While generating turbulence values, generate lattice vectors as
3316 normal for Perlin Noise, except for those lattice points that lie on
3317 the right or bottom edges of the active area (the size of the resulting
3318 tile). In those cases, copy the lattice vector from the opposite edge
3319 of the active area.</p>
3320 <p><span class="requirement" id="assert_turbulenceStitchTilesLacunaValue">The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feTurbulenceStitchTilesAttribute"><span class="attr-name">‘stitchTiles’</span></a> is <span class="attr-value">noStitch</span>.</span></p>
3321 <p><span class="anim-target">Animatable: yes.</span></p>
3322 </dd><dt id="feTurbulenceTypeAttribute">
3323 <span class="adef">type</span> = "<em>fractalNoise | turbulence</em>"</dt><dd>
3324 <p>Indicates whether the filter primitive should perform a noise or
3325 turbulence function.</p>
3326 <p><span class="requirement" id="assert_turbulenceTypeLacunaValue">The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feTurbulenceTypeAttribute"><span class="attr-name">‘type’</span></a> is <span class="attr-value">turbulence</span>.</span></p>
3327 <p><span class="anim-target">Animatable: yes.</span></p>
3328 </dd></dl>
3329 </div>
3331 <pre class="xml"><?xml version="1.0"?>
3332 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
3333 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3334 <svg width="450px" height="325px" viewBox="0 0 450 325"
3335 xmlns="http://www.w3.org/2000/svg" version="1.1">
3336 <title>Example feTurbulence - Examples of feTurbulence operations</title>
3337 <desc>Six rectangular areas showing the effects of
3338 various parameter settings for feTurbulence.</desc>
3339 <g font-family="Verdana" text-anchor="middle" font-size="10" >
3340 <defs>
3341 <filter id="Turb1" filterUnits="objectBoundingBox"
3342 x="0%" y="0%" width="100%" height="100%">
3343 <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2"/>
3344 </filter>
3345 <filter id="Turb2" filterUnits="objectBoundingBox"
3346 x="0%" y="0%" width="100%" height="100%">
3347 <feTurbulence type="turbulence" baseFrequency="0.1" numOctaves="2"/>
3348 </filter>
3349 <filter id="Turb3" filterUnits="objectBoundingBox"
3350 x="0%" y="0%" width="100%" height="100%">
3351 <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="8"/>
3352 </filter>
3353 <filter id="Turb4" filterUnits="objectBoundingBox"
3354 x="0%" y="0%" width="100%" height="100%">
3355 <feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="4"/>
3356 </filter>
3357 <filter id="Turb5" filterUnits="objectBoundingBox"
3358 x="0%" y="0%" width="100%" height="100%">
3359 <feTurbulence type="fractalNoise" baseFrequency="0.4" numOctaves="4"/>
3360 </filter>
3361 <filter id="Turb6" filterUnits="objectBoundingBox"
3362 x="0%" y="0%" width="100%" height="100%">
3363 <feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="1"/>
3364 </filter>
3365 </defs>
3367 <rect x="1" y="1" width="448" height="323"
3368 fill="none" stroke="blue" stroke-width="1" />
3370 <rect x="25" y="25" width="100" height="75" filter="url(#Turb1)" />
3371 <text x="75" y="117">type=turbulence</text>
3372 <text x="75" y="129">baseFrequency=0.05</text>
3373 <text x="75" y="141">numOctaves=2</text>
3375 <rect x="175" y="25" width="100" height="75" filter="url(#Turb2)" />
3376 <text x="225" y="117">type=turbulence</text>
3377 <text x="225" y="129">baseFrequency=0.1</text>
3378 <text x="225" y="141">numOctaves=2</text>
3380 <rect x="325" y="25" width="100" height="75" filter="url(#Turb3)" />
3381 <text x="375" y="117">type=turbulence</text>
3382 <text x="375" y="129">baseFrequency=0.05</text>
3383 <text x="375" y="141">numOctaves=8</text>
3385 <rect x="25" y="180" width="100" height="75" filter="url(#Turb4)" />
3386 <text x="75" y="272">type=fractalNoise</text>
3387 <text x="75" y="284">baseFrequency=0.1</text>
3388 <text x="75" y="296">numOctaves=4</text>
3390 <rect x="175" y="180" width="100" height="75" filter="url(#Turb5)" />
3391 <text x="225" y="272">type=fractalNoise</text>
3392 <text x="225" y="284">baseFrequency=0.4</text>
3393 <text x="225" y="296">numOctaves=4</text>
3395 <rect x="325" y="180" width="100" height="75" filter="url(#Turb6)" />
3396 <text x="375" y="272">type=fractalNoise</text>
3397 <text x="375" y="284">baseFrequency=0.1</text>
3398 <text x="375" y="296">numOctaves=1</text>
3399 </g>
3400 </svg></pre><table summary="Example "><caption align="bottom">Example </caption><tr><td><img alt="Example " src="examples/feTurbulence.png"/></td></tr></table><p class="view-as-svg"><a href="examples/feTurbulence.svg">View this example as SVG (SVG-enabled browsers only)</a></p>
3403 <h2 id="feDropShadowElement">27 Filter primitive <span class="element-name">‘feDropShadow’</span></h2>
3405 <div class="element-summary"><div class="element-summary-name"><span class="element-name">‘feDropShadow’</span></div><dl><dt>Categories:</dt><dd>None</dd><dt>Content model:</dt><dd>Any number of the following elements, in any order:
3406 <ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#AnimateElement"><span class="element-name">‘animate’</span></a></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#AnimateColorElement"><span class="element-name">‘animateColor’</span></a></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/animate.html#SetElement"><span class="element-name">‘set’</span></a></li></ul></dd><dt>Attributes:</dt><dd><ul class="no-bullets"><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermCoreAttributes">core attributes</a><span class="expanding"> — <a href="struct.html#IDAttribute"><span class="attr-name">‘id’</span></a>, <a href="struct.html#XMLBaseAttribute"><span class="attr-name">‘xml:base’</span></a>, <a href="struct.html#XMLLangAttribute"><span class="attr-name">‘xml:lang’</span></a>, <a href="struct.html#XMLSpaceAttribute"><span class="attr-name">‘xml:space’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermPresentationAttribute">presentation attributes</a><span class="expanding"> — <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#AlignmentBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘alignment-baseline’">‘alignment-baseline’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#BaselineShiftProperty"><span class="attr-name" title="Presentation attribute for property ‘baseline-shift’">‘baseline-shift’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipProperty"><span class="attr-name" title="Presentation attribute for property ‘clip’">‘clip’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipPathProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-path’">‘clip-path’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#ClipRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘clip-rule’">‘clip-rule’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProperty"><span class="attr-name" title="Presentation attribute for property ‘color’">‘color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation’">‘color-interpolation’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorInterpolationFiltersProperty"><span class="attr-name" title="Presentation attribute for property ‘color-interpolation-filters’">‘color-interpolation-filters’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/color.html#ColorProfileProperty"><span class="attr-name" title="Presentation attribute for property ‘color-profile’">‘color-profile’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ColorRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘color-rendering’">‘color-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#CursorProperty"><span class="attr-name" title="Presentation attribute for property ‘cursor’">‘cursor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DirectionProperty"><span class="attr-name" title="Presentation attribute for property ‘direction’">‘direction’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#DisplayProperty"><span class="attr-name" title="Presentation attribute for property ‘display’">‘display’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#DominantBaselineProperty"><span class="attr-name" title="Presentation attribute for property ‘dominant-baseline’">‘dominant-baseline’</span></a>, <a href="#EnableBackgroundProperty"><span class="attr-name" title="Presentation attribute for property ‘enable-background’">‘enable-background’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillProperty"><span class="attr-name" title="Presentation attribute for property ‘fill’">‘fill’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-opacity’">‘fill-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#FillRuleProperty"><span class="attr-name" title="Presentation attribute for property ‘fill-rule’">‘fill-rule’</span></a>, <a href="#FilterProperty"><span class="attr-name" title="Presentation attribute for property ‘filter’">‘filter’</span></a>, <a href="#FloodColorProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-color’">‘flood-color’</span></a>, <a href="#FloodOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘flood-opacity’">‘flood-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontFamilyProperty"><span class="attr-name" title="Presentation attribute for property ‘font-family’">‘font-family’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size’">‘font-size’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontSizeAdjustProperty"><span class="attr-name" title="Presentation attribute for property ‘font-size-adjust’">‘font-size-adjust’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStretchProperty"><span class="attr-name" title="Presentation attribute for property ‘font-stretch’">‘font-stretch’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontStyleProperty"><span class="attr-name" title="Presentation attribute for property ‘font-style’">‘font-style’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontVariantProperty"><span class="attr-name" title="Presentation attribute for property ‘font-variant’">‘font-variant’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#FontWeightProperty"><span class="attr-name" title="Presentation attribute for property ‘font-weight’">‘font-weight’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationHorizontalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-horizontal’">‘glyph-orientation-horizontal’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#GlyphOrientationVerticalProperty"><span class="attr-name" title="Presentation attribute for property ‘glyph-orientation-vertical’">‘glyph-orientation-vertical’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ImageRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘image-rendering’">‘image-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#KerningProperty"><span class="attr-name" title="Presentation attribute for property ‘kerning’">‘kerning’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#LetterSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘letter-spacing’">‘letter-spacing’</span></a>, <a href="#LightingColorProperty"><span class="attr-name" title="Presentation attribute for property ‘lighting-color’">‘lighting-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerEndProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-end’">‘marker-end’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerMidProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-mid’">‘marker-mid’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#MarkerStartProperty"><span class="attr-name" title="Presentation attribute for property ‘marker-start’">‘marker-start’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#MaskProperty"><span class="attr-name" title="Presentation attribute for property ‘mask’">‘mask’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘opacity’">‘opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#OverflowProperty"><span class="attr-name" title="Presentation attribute for property ‘overflow’">‘overflow’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/interact.html#PointerEventsProperty"><span class="attr-name" title="Presentation attribute for property ‘pointer-events’">‘pointer-events’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#ShapeRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘shape-rendering’">‘shape-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopColorProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-color’">‘stop-color’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/pservers.html#StopOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stop-opacity’">‘stop-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke’">‘stroke’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDasharrayProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dasharray’">‘stroke-dasharray’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeDashoffsetProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-dashoffset’">‘stroke-dashoffset’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinecapProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linecap’">‘stroke-linecap’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeLinejoinProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-linejoin’">‘stroke-linejoin’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeMiterlimitProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-miterlimit’">‘stroke-miterlimit’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeOpacityProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-opacity’">‘stroke-opacity’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#StrokeWidthProperty"><span class="attr-name" title="Presentation attribute for property ‘stroke-width’">‘stroke-width’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextAnchorProperty"><span class="attr-name" title="Presentation attribute for property ‘text-anchor’">‘text-anchor’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#TextDecorationProperty"><span class="attr-name" title="Presentation attribute for property ‘text-decoration’">‘text-decoration’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#TextRenderingProperty"><span class="attr-name" title="Presentation attribute for property ‘text-rendering’">‘text-rendering’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#UnicodeBidiProperty"><span class="attr-name" title="Presentation attribute for property ‘unicode-bidi’">‘unicode-bidi’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/painting.html#VisibilityProperty"><span class="attr-name" title="Presentation attribute for property ‘visibility’">‘visibility’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WordSpacingProperty"><span class="attr-name" title="Presentation attribute for property ‘word-spacing’">‘word-spacing’</span></a>, <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/text.html#WritingModeProperty"><span class="attr-name" title="Presentation attribute for property ‘writing-mode’">‘writing-mode’</span></a></span></li><li><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermFilterPrimitiveAttributes">filter primitive attributes</a><span class="expanding"> — <a href="filters.html#FilterPrimitiveXAttribute"><span class="attr-name">‘x’</span></a>, <a href="filters.html#FilterPrimitiveYAttribute"><span class="attr-name">‘y’</span></a>, <a href="filters.html#FilterPrimitiveWidthAttribute"><span class="attr-name">‘width’</span></a>, <a href="filters.html#FilterPrimitiveHeightAttribute"><span class="attr-name">‘height’</span></a>, <a href="filters.html#FilterPrimitiveResultAttribute"><span class="attr-name">‘result’</span></a></span></li><li><a href="styling.html#ClassAttribute"><span class="attr-name">‘class’</span></a></li><li><a href="styling.html#StyleAttribute"><span class="attr-name">‘style’</span></a></li><li><a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a></li><li><a href="#feDropShadowStdDeviationAttribute"><span class="attr-name">‘stdDeviation’</span></a></li><li><a href="#feDropShadowDxAttribute"><span class="attr-name">‘dx’</span></a></li><li><a href="#feDropShadowDyAttribute"><span class="attr-name">‘dy’</span></a></li></ul></dd><dt>DOM Interfaces:</dt><dd><ul class="no-bullets"><li><a class="idlinterface" href="#InterfaceSVGFEDropShadowElement">SVGFEDropShadowElement</a></li></ul></dd></dl></div>
3408 <p>This filter creates a drop shadow of the input image. It is a shorthand
3409 filter, and is defined in terms of combinations of other <a href="#TermFilterPrimitiveElements"><span class="svg-term">filter primitives</span></a>.
3410 The expectation is that it can be optimized more easily by
3411 implementations.</p>
3413 <p>The result of a <a href="#feDropShadowElement"><span class="element-name">‘feDropShadow’</span></a> filter
3414 primitive is equivalent to the following:
3416 <pre class="examplesource">
3417 <feGaussianBlur in="<b>alpha-channel-of-feDropShadow-in</b>" stdDeviation="<b>stdDeviation-of-feDropShadow</b>"/>
3418 <feOffset dx="<b>dx-of-feDropShadow</b>" dy="<b>dy-of-feDropShadow</b>" result="offsetblur"/>
3419 <feFlood flood-color="<b>flood-color-of-feDropShadow</b>" flood-opacity="<b>flood-opacity-of-feDropShadow</b>"/>
3420 <feComposite in2="offsetblur" operator="in"/>
3421 <feMerge>
3422 <feMergeNode/>
3423 <feMergeNode in="<b>in-of-feDropShadow</b>"/>
3424 </feMerge>
3425 </pre>
3426 </p>
3428 <p>
3429 The above divided into steps:
3430 <ol><li>Take the alpha channel of the input to the <a href="#feDropShadowElement"><span class="element-name">‘feDropShadow’</span></a> filter primitive and the <a href="#feDropShadowStdDeviationAttribute"><span class="attr-name">‘stdDeviation’</span></a> on the <a href="#feDropShadowElement"><span class="element-name">‘feDropShadow’</span></a> and do processing as if the
3431 following <a href="#feGaussianBlurElement"><span class="element-name">‘feGaussianBlur’</span></a> was applied:
3432 <pre class="examplesource"> <feGaussianBlur in="<b>alpha-channel-of-feDropShadow-in</b>" stdDeviation="<b>stdDeviation-of-feDropShadow</b>"/></pre>
3433 <br/>
3434 </li><li>Offset the result of step 1 by <a href="#feDropShadowDxAttribute"><span class="attr-name">‘dx’</span></a> and <a href="#feDropShadowDyAttribute"><span class="attr-name">‘dy’</span></a> as
3435 specified on the <a href="#feDropShadowElement"><span class="element-name">‘feDropShadow’</span></a>
3436 element, equivalent to applying an <a href="#feOffsetElement"><span class="element-name">‘feOffset’</span></a> with these parameters:
3437 <pre class="examplesource"> <feOffset dx="<b>dx-of-feDropShadow</b>" dy="<b>dy-of-feDropShadow</b>" result="offsetblur"/></pre>
3438 <br/>
3439 </li><li>Do processing as if an <a href="#feFloodElement"><span class="element-name">‘feFlood’</span></a> element with <a href="#FloodColorProperty"><span class="prop-name">‘flood-color’</span></a> and
3440 <a href="#FloodOpacityProperty"><span class="prop-name">‘flood-opacity’</span></a> as specified on the <a href="#feDropShadowElement"><span class="element-name">‘feDropShadow’</span></a> was applied:
3441 <pre class="examplesource"> <feFlood flood-color="<b>flood-color-of-feDropShadow</b>" flood-opacity="<b>flood-opacity-of-feDropShadow</b>"/></pre>
3442 <br/>
3443 </li><li>Composite the result of the <a href="#feFloodElement"><span class="element-name">‘feFlood’</span></a> in step 3 with the result of
3444 the <a href="#feOffsetElement"><span class="element-name">‘feOffset’</span></a> in step 2 as if an <a href="#feCompositeElement"><span class="element-name">‘feComposite’</span></a> filter primitive with <a href="#feCompositeOperatorAttribute"><span class="attr-name">operator</span></a>='in' was applied:
3445 <pre class="examplesource"> <feComposite in2="offsetblur" operator="in"/></pre>
3446 <br/>
3447 </li><li>Finally merge the result of the previous step, doing processing as if
3448 the following <a href="#feMergeElement"><span class="element-name">‘feMerge’</span></a> was performed:
3449 <pre class="examplesource"> <feMerge>
3450 <feMergeNode/>
3451 <feMergeNode in="<b>in-of-feDropShadow</b>"/>
3452 </feMerge></pre>
3453 </li></ol>
3454 </p>
3456 <p class="note implementation">Note that while the definition of the <span class="element-name">‘feDropShadow’</span> filter primitive says that it can
3457 be expanded into an equivalent tree it is not required that it is implemented
3458 like that. The expectation is that user agents can optimize the handling by not having to do all the steps separately.
3459 </p>
3461 <p>Beyond the DOM interface <a href="#InterfaceSVGFEDropShadowElement">SVGFEDropShadowElement</a> there is no way
3462 of accessing the internals of the <a href="#feDropShadowElement"><span class="element-name">‘feDropShadow’</span></a> filter primitive, meaning <span class="requirement" id="assert_dropShadowShadowTrees">if the
3463 filter primitive is implemented as an equivalent tree then that tree must not
3464 be exposed to the DOM.</span> </p>
3466 <div class="adef-list">
3467 <p><em>Attribute definitions:</em></p>
3468 <dl><dt id="feDropShadowDxAttribute">
3469 <span class="adef">dx</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></em>"</dt><dd>
3470 <p>The x offset of the drop shadow.</p>
3471 <p>The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feDropShadowDxAttribute"><span class="attr-name">‘dx’</span></a> is <span class="attr-value">2</span>.</p>
3472 <p>This attribute is then forwarded to the <a href="#feOffsetDxAttribute"><span class="attr-name">‘dx’</span></a> attribute of the internal <a href="#feOffsetElement"><span class="element-name">‘feOffset’</span></a> element.</p>
3473 <p><span class="anim-target">Animatable: yes.</span></p>
3474 </dd><dt id="feDropShadowDyAttribute">
3475 <span class="adef">dy</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a></em>"</dt><dd>
3476 <p>The y offset of the drop shadow.</p>
3477 <p>The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feDropShadowDyAttribute"><span class="attr-name">‘dy’</span></a> is <span class="attr-value">2</span>. </p>
3478 <p>This attribute is then forwarded to the <a href="#feOffsetDyAttribute"><span class="attr-name">‘dy’</span></a> attribute of the internal <a href="#feOffsetElement"><span class="element-name">‘feOffset’</span></a> element.</p>
3479 <p><span class="anim-target">Animatable: yes.</span></p>
3480 </dd><dt id="feDropShadowStdDeviationAttribute"><span class="adef">stdDeviation</span> =
3481 "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumberOptionalNumber"><number-optional-number></a></em>"</dt><dd>
3482 <p>The standard deviation for the blur operation in the drop shadow.</p>
3483 <p>The <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/intro.html#TermLacunaValue"><span class="svg-term">lacuna value</span></a> for <a href="#feDropShadowStdDeviationAttribute"><span class="attr-name">‘stdDeviation’</span></a> is <span class="attr-value">2</span>.</p>
3484 <p>This attribute is then forwarded to the <a href="#feGaussianBlurStdDeviationAttribute"><span class="attr-name">‘stdDeviation’</span></a> attribute of the internal
3485 <a href="#feGaussianBlurElement"><span class="element-name">‘feGaussianBlur’</span></a> element.</p>
3486 <p><span class="anim-target">Animatable: yes.</span></p>
3487 </dd></dl>
3488 </div>
3490 <div class="note">
3491 <h2 id="feDiffuseSpecularElement">28 Filter primitive <span class="element-name">‘feDiffuseSpecular’</span></h2>
3492 The WG is looking at providing a shorthand for diffuse+specular.
3493 </div>
3495 <div class="note">
3496 <h2 id="feCustomElement">29 Filter primitive <span class="element-name">‘feCustom’</span></h2>
3497 The WG is considering a proposal to add a filter primitive that would reference a
3498 programmable operation, similar to an OpenCL kernel or GLSL fragment shader. At
3499 this time, the WG is intending to <strong>not</strong> include such a feature
3500 in the current version of this specification. If you feel it is necessary, please
3501 submit feedback to the WG (by email, described in the introduction) with your
3502 reasons and, preferably, use cases.
3503 </div>
3505 <h2 id="FilterCSSImageValue">30 The filter CSS <image> value</h2>
3507 <p>
3508 The filter() function produces a CSS <image> value. It has the following syntax:
3509 </p>
3511 <h4 class="no-toc" id="filter-syntax">
3512 filter() syntax</h4>
3514 <pre class="prod"><code><dfn><filter></dfn> = filter(
3515 <image>,
3516 none | <filter-function> [ <filter-function> ]*
3517 )
3518 </code></pre>
3520 <p>
3521 The function takes two parameters. The first is a CSS <image> value. The second
3522 is the value of a <span class="prop-name">filter</span> property. The function take the
3523 input image parameter and apply the filter rules, returning a processing image.
3524 </p>
3526 <h2 id="RelaxNG">31 RelaxNG Schema for Filter Effects 1.0</h2>
3528 <p>The schema for Filter Effects 1.0 is written in <a href="http://www.y12.doe.gov/sgml/sc34/document/0362_files/relaxng-is.pdf">RelaxNG</a>
3529 [<a href="#ref-RNG">RelaxNG</a>], a namespace-aware schema language that uses
3530 the datatypes from <a href="http://www.w3.org/TR/2004/REC-xmlschema-2-20041028/">XML Schema Part
3531 2</a> [<a href="#ref-Schema2">Schema2</a>]. This allows namespaces and
3532 modularity to be much more naturally expressed than using DTD syntax. The
3533 RelaxNG schema for Filter Effects 1.0 may be imported by other RelaxNG schemas,
3534 or combined with other schemas in other languages into a multi-namespace,
3535 multi-grammar schema using <a href="http://www.asahi-net.or.jp/~eb2m-mrt/dsdl/">Namespace-based Validation
3536 Dispatching Language</a> [<a href="#ref-NVDL">NVDL</a>].</p>
3538 <p>Unlike a DTD, the schema used for validation is not hardcoded into the
3539 document instance. There is no equivalent to the DOCTYPE declaration. Simply
3540 point your editor or other validation tool to the IRI of the schema (or your
3541 local cached copy, as you prefer).</p>
3543 <p>
3544 The RNG is under construction, and only the individual RNG snippets are available at this time. They have not yet been integrated into a functional schema. The individual RNG files are available <a href="rng">here</a>.
3545 </p>
3548 <h2 id="ShorthandEquivalents">32 Shorthands defined in terms of the <span class="element-name">‘filter’</span> element</h2>
3550 <p>
3551 Below are the equivalents for each of the filter functions expressed in terms of
3552 the 'filter element' element. The parameters from the function are labelled with
3553 brackets in the following style: [amount].
3554 </p>
3556 <h3 id="grayscaleEquivalent">32.1 grayscale</h3>
3558 <pre class="examplesource"> <filter id="grayscale">
3559 <feColorMatrix type="matrix"
3560 values="(0.2127 * [amount]) (0.7152 * [amount]) (0.0722 * [amount]) 0 0
3561 (0.2127 * [amount]) (0.7152 * [amount]) (0.0722 * [amount]) 0 0
3562 (0.2127 * [amount]) (0.7152 * [amount]) (0.0722 * [amount]) 0 0
3563 0 0 0 1 0"/>
3564 </filter> </pre>
3566 <h3 id="sepiaEquivalent">32.2 sepia</h3>
3568 <pre class="examplesource"> <filter id="sepia">
3569 <feColorMatrix type="matrix"
3570 values="(0.393 * [amount]) (0.769 * [amount]) (0.189 * [amount]) 0 0
3571 (0.349 * [amount]) (0.686 * [amount]) (0.168 * [amount]) 0 0
3572 (0.272 * [amount]) (0.534 * [amount]) (0.131 * [amount]) 0 0
3573 0 0 0 1 0"/>
3574 </filter> </pre>
3576 <h3 id="saturateEquivalent">32.3 saturate</h3>
3578 <pre class="examplesource"> <filter id="saturate">
3579 <feColorMatrix type="saturate"
3580 values="(1 - [amount])"/>
3581 </filter> </pre>
3583 <h3 id="huerotateEquivalent">32.4 hue-rotate</h3>
3585 <pre class="examplesource"> <filter id="hue-rotate">
3586 <feColorMatrix type="hueRotate"
3587 values="[angle]"/>
3588 </filter> </pre>
3590 <h3 id="invertEquivalent">32.5 invert</h3>
3592 <pre class="examplesource"> <filter id="invert">
3593 <feComponentTransfer>
3594 <feFuncR type="table" tableValues="[amount] (1 - [amount])"/>
3595 <feFuncG type="table" tableValues="[amount] (1 - [amount])"/>
3596 <feFuncB type="table" tableValues="[amount] (1 - [amount])"/>
3597 </feComponentTransfer>
3598 </filter> </pre>
3600 <h3 id="opacityEquivalent">32.6 opacity</h3>
3602 <pre class="examplesource"> <filter id="opacity">
3603 <feComponentTransfer>
3604 <feFuncA type="table" tableValues="0 [amount]"/>
3605 </feComponentTransfer>
3606 </filter> </pre>
3608 <h3 id="gammaEquivalent">32.7 gamma</h3>
3610 <pre class="examplesource"> <filter id="gamma">
3611 <feComponentTransfer>
3612 <feFuncR type="gamma" amplitude="[amplitude]" exponent="[exponent]" offset="[offset]"/>
3613 <feFuncG type="gamma" amplitude="[amplitude]" exponent="[exponent]" offset="[offset]"/>
3614 <feFuncB type="gamma" amplitude="[amplitude]" exponent="[exponent]" offset="[offset]"/>
3615 </feComponentTransfer>
3616 </filter> </pre>
3618 <h3 id="blurEquivalent">32.8 blur</h3>
3620 <pre class="examplesource"> <filter id="blur">
3621 <feGaussianBlur stdDeviation="[radiusX radiusY]">
3622 </filter> </pre>
3624 <h3 id="sharpenEquivalent">32.9 sharpen</h3>
3626 <pre class="examplesource"> <filter id="unsharp">
3627 <feUnsharpMask stdDeviation="[radius]" threshold="[threshold]" amount="[amount]">
3628 </filter> </pre>
3630 <h3 id="dropshadowEquivalent">32.10 drop-shadow</h3>
3632 <pre class="examplesource"> <filter id="drop-shadow">
3633 <feGaussianBlur in="[alpha-channel-of-input]" stdDeviation="[radius]"/>
3634 <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
3635 <feFlood flood-color="[color]"/>
3636 <feComposite in2="offsetblur" operator="in"/>
3637 <feMerge>
3638 <feMergeNode/>
3639 <feMergeNode in="input-image"/>
3640 </feMerge>
3641 </filter> </pre>
3643 <h2 id="DOMInterfaces">33 DOM interfaces</h2>
3645 <div class="note">
3646 The interfaces below will be made available in a IDL file for an upcoming draft.
3647 </div>
3649 <h3 id="InterfaceImageData">33.1 Interface ImageData</h3>
3652 The ImageData interface corresponds to pixel data that can be used as input to the SVGFilterElement interface.
3653 <pre class="idl">interface <b>ImageData</b> {
3654 readonly attribute long <a href="#__svg__ImageData__width">width</a>;
3655 readonly attribute long <a href="#__svg__ImageData__height">height</a>;
3656 readonly attribute <a href="#__svg__ImageData__data">data</a>;
3657 };</pre><dl class="interface"><dt>Attributes:</dt><dd><dl class="attributes">
3658 <dt id="__svg__ImageData__width"><b>width</b><span class="idl-type-parenthetical"> (readonly long)</span></dt><dd><div>
3659 The width of the bitmap that the ImageData represents.
3660 </div></dd>
3661 <dt id="__svg__ImageData__height"><b>height</b><span class="idl-type-parenthetical"> (readonly long)</span></dt><dd><div>
3662 The height of the bitmap that the ImageData represents.
3663 </div></dd>
3664 <dt id="__svg__ImageData__data"><b>data</b><span class="idl-type-parenthetical"> (readonly )</span></dt><dd><div>
3665 An array of pixel values that is the bitmap. This array must
3666 always be in the form of width×height×4 integer values. The
3667 pixel data is in left-to-right order, starting from the top-left
3668 corner, and going row by row downwards. Every pixel is
3669 represented by four integer values, red, green, blue and alpha,
3670 in that order. The range of each color component is 0..255. The
3671 intent is that this is compatible with the HTML5 [<a href="#ref-html5">HTML5</a>]
3672 canvas interfaces, in particular see
3673 <a href="http://www.w3.org/TR/html5/the-canvas.html#imagedata">ImageData</a>.
3674 </div></dd></dl></dd></dl>
3676 <h3 id="InterfaceSVGFilterElement">33.2 Interface SVGFilterElement</h3>
3680 The <a class="idlinterface" href="#InterfaceSVGFilterElement">SVGFilterElement</a> interface corresponds to the <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
3681 element.
3682 <pre class="idl">interface <b>SVGFilterElement</b> : ::svg::SVGElement,
3683 ::svg::SVGURIReference,
3684 ::svg::SVGLangSpace,
3685 ::svg::SVGExternalResourcesRequired,
3686 ::svg::SVGStylable,
3687 ::svg::SVGUnitTypes {
3689 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a> <a href="#__svg__SVGFilterElement__filterUnits">filterUnits</a>;
3690 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a> <a href="#__svg__SVGFilterElement__primitiveUnits">primitiveUnits</a>;
3691 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a href="#__svg__SVGFilterElement__x">x</a>;
3692 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a href="#__svg__SVGFilterElement__y">y</a>;
3693 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a href="#__svg__SVGFilterElement__width">width</a>;
3694 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a href="#__svg__SVGFilterElement__height">height</a>;
3695 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedInteger">SVGAnimatedInteger</a> <a href="#__svg__SVGFilterElement__filterResX">filterResX</a>;
3696 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedInteger">SVGAnimatedInteger</a> <a href="#__svg__SVGFilterElement__filterResY">filterResY</a>;
3698 void <a href="#__svg__SVGFilterElement__setFilterRes">setFilterRes</a>(in unsigned long filterResX, in unsigned long filterResY) raises(<a class="idlinterface" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187">DOMException</a>);
3699 <a class="idlinterface" href="#InterfaceImageData">ImageData</a> <a href="#__svg__SVGFilterElement__apply">apply</a>(in <a class="idlinterface" href="#InterfaceImageData">ImageData</a> source);
3700 };</pre><dl class="interface"><dt>Attributes:</dt><dd><dl class="attributes">
3701 <dt id="__svg__SVGFilterElement__filterUnits"><b>filterUnits</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a>)</span></dt><dd><div>
3702 Corresponds to attribute <a href="#FilterElementFilterUnitsAttribute"><span class="attr-name">‘filterUnits’</span></a> on the given <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
3703 element. Takes one of the constants defined in <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGUnitTypes">SVGUnitTypes</a>.
3704 </div></dd>
3705 <dt id="__svg__SVGFilterElement__primitiveUnits"><b>primitiveUnits</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a>)</span></dt><dd><div>
3706 Corresponds to attribute <a href="#FilterElementPrimitiveUnitsAttribute"><span class="attr-name">‘primitiveUnits’</span></a> on the given <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
3707 element. Takes one of the constants defined in <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGUnitTypes">SVGUnitTypes</a>.
3708 </div></dd>
3709 <dt id="__svg__SVGFilterElement__x"><b>x</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a>)</span></dt><dd><div>
3710 Corresponds to attribute <a href="#FilterElementXAttribute"><span class="attr-name">‘x’</span></a> on the given <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element.
3711 </div></dd>
3712 <dt id="__svg__SVGFilterElement__y"><b>y</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a>)</span></dt><dd><div>
3713 Corresponds to attribute <a href="#FilterElementYAttribute"><span class="attr-name">‘y’</span></a> on the given <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element.
3714 </div></dd>
3715 <dt id="__svg__SVGFilterElement__width"><b>width</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a>)</span></dt><dd><div>
3716 Corresponds to attribute <a href="#FilterElementWidthAttribute"><span class="attr-name">‘width’</span></a> on the given <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element.
3717 </div></dd>
3718 <dt id="__svg__SVGFilterElement__height"><b>height</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a>)</span></dt><dd><div>
3719 Corresponds to attribute <a href="#FilterElementHeightAttribute"><span class="attr-name">‘height’</span></a> on the given <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element.
3720 </div></dd>
3721 <dt id="__svg__SVGFilterElement__filterResX"><b>filterResX</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedInteger">SVGAnimatedInteger</a>)</span></dt><dd><div>
3722 Corresponds to attribute <a href="#FilterElementFilterResAttribute"><span class="attr-name">‘filterRes’</span></a> on the given <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
3723 element. Contains the X component of attribute <a href="#FilterElementFilterResAttribute"><span class="attr-name">‘filterRes’</span></a>.
3724 </div></dd>
3725 <dt id="__svg__SVGFilterElement__filterResY"><b>filterResY</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedInteger">SVGAnimatedInteger</a>)</span></dt><dd><div>
3726 Corresponds to attribute <a href="#FilterElementFilterResAttribute"><span class="attr-name">‘filterRes’</span></a> on the given <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
3727 element. Contains the Y component (possibly computed automatically) of
3728 attribute <a href="#FilterElementFilterResAttribute"><span class="attr-name">‘filterRes’</span></a>.
3729 </div></dd></dl></dd><dt>Operations:</dt><dd><dl class="attributes">
3730 <dt id="__svg__SVGFilterElement__setFilterRes">void <b>setFilterRes</b>(in unsigned long <var>filterResX</var>, in unsigned long <var>filterResY</var>)</dt><dd><div>
3731 Sets the values for attribute <a href="#FilterElementFilterResAttribute"><span class="attr-name">‘filterRes’</span></a>.
3733 </div><dl class="operation"><dt>Parameters</dt><dd><ol class="parameters"><li><div class="parameter">unsigned long <var>filterResX</var></div> <div> The X component of attribute <a href="#FilterElementFilterResAttribute"><span class="attr-name">‘filterRes’</span></a>.
3734 </div></li><li><div class="parameter">unsigned long <var>filterResY</var></div> <div> The Y component of attribute <a href="#FilterElementFilterResAttribute"><span class="attr-name">‘filterRes’</span></a>.
3735 </div></li></ol></dd><dt>Exceptions</dt><dd><dl class="exceptions"><dt><a class="idlinterface" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187">DOMException</a>, code NO_MODIFICATION_ALLOWED_ERR</dt><dd> Raised on an attempt
3736 to change the value of a readonly attribute.
3737 </dd></dl></dd></dl></dd>
3738 <dt id="__svg__SVGFilterElement__apply"><a class="idlinterface" href="#InterfaceImageData">ImageData</a> <b>apply</b>(in <a class="idlinterface" href="#InterfaceImageData">ImageData</a> <var>source</var>)</dt><dd><div>
3739 Applies the filter to the given ImageData object and returns the result.
3741 </div><dl class="operation"><dt>Parameters</dt><dd><ol class="parameters"><li><div class="parameter"><a class="idlinterface" href="#InterfaceImageData">ImageData</a> <var>source</var></div> <div> The image to apply the filter to.
3742 </div></li></ol></dd><dt>Returns</dt><dd><div> The result of the filter, see <a class="idlinterface" href="#InterfaceImageData">ImageData</a> for how to construct this.
3743 </div></dd></dl></dd></dl></dd></dl>
3746 <h3 id="InterfaceSVGFilterPrimitiveStandardAttributes">33.3 Interface SVGFilterPrimitiveStandardAttributes</h3>
3750 This interface defines the set of DOM attributes that are common across
3751 the filter primitive interfaces.
3752 <pre class="idl">interface <b>SVGFilterPrimitiveStandardAttributes</b> : ::svg::SVGStylable {
3753 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a href="#__svg__SVGFilterPrimitiveStandardAttributes__x">x</a>;
3754 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a href="#__svg__SVGFilterPrimitiveStandardAttributes__y">y</a>;
3755 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a href="#__svg__SVGFilterPrimitiveStandardAttributes__width">width</a>;
3756 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a href="#__svg__SVGFilterPrimitiveStandardAttributes__height">height</a>;
3757 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a> <a href="#__svg__SVGFilterPrimitiveStandardAttributes__result">result</a>;
3758 };</pre><dl class="interface"><dt>Attributes:</dt><dd><dl class="attributes">
3759 <dt id="__svg__SVGFilterPrimitiveStandardAttributes__x"><b>x</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a>)</span></dt><dd><div>
3760 Corresponds to attribute <a href="filters.html#FilterPrimitiveXAttribute"><span class="attr-name">‘x’</span></a> on the given element.
3761 </div></dd>
3762 <dt id="__svg__SVGFilterPrimitiveStandardAttributes__y"><b>y</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a>)</span></dt><dd><div>
3763 Corresponds to attribute <a href="filters.html#FilterPrimitiveYAttribute"><span class="attr-name">‘y’</span></a> on the given element.
3764 </div></dd>
3765 <dt id="__svg__SVGFilterPrimitiveStandardAttributes__width"><b>width</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a>)</span></dt><dd><div>
3766 Corresponds to attribute <a href="filters.html#FilterPrimitiveWidthAttribute"><span class="attr-name">‘width’</span></a> on the given element.
3767 </div></dd>
3768 <dt id="__svg__SVGFilterPrimitiveStandardAttributes__height"><b>height</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a>)</span></dt><dd><div>
3769 Corresponds to attribute <a href="filters.html#FilterPrimitiveHeightAttribute"><span class="attr-name">‘height’</span></a> on the given element.
3770 </div></dd>
3771 <dt id="__svg__SVGFilterPrimitiveStandardAttributes__result"><b>result</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a>)</span></dt><dd><div>
3772 Corresponds to attribute <a href="filters.html#FilterPrimitiveResultAttribute"><span class="attr-name">‘result’</span></a> on the given element.
3773 </div></dd></dl></dd></dl>
3776 <h3 id="InterfaceSVGFEBlendElement">33.4 Interface SVGFEBlendElement</h3>
3780 The <a class="idlinterface" href="#InterfaceSVGFEBlendElement">SVGFEBlendElement</a> interface corresponds to the <a href="#feBlendElement"><span class="element-name">‘feBlend’</span></a>
3781 element.
3782 <pre class="idl">interface <b>SVGFEBlendElement</b> : ::svg::SVGElement,
3783 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
3785 // Blend Mode Types
3786 const unsigned short <a href="#__svg__SVGFEBlendElement__SVG_FEBLEND_MODE_UNKNOWN">SVG_FEBLEND_MODE_UNKNOWN</a> = 0;
3787 const unsigned short <a href="#__svg__SVGFEBlendElement__SVG_FEBLEND_MODE_NORMAL">SVG_FEBLEND_MODE_NORMAL</a> = 1;
3788 const unsigned short <a href="#__svg__SVGFEBlendElement__SVG_FEBLEND_MODE_MULTIPLY">SVG_FEBLEND_MODE_MULTIPLY</a> = 2;
3789 const unsigned short <a href="#__svg__SVGFEBlendElement__SVG_FEBLEND_MODE_SCREEN">SVG_FEBLEND_MODE_SCREEN</a> = 3;
3790 const unsigned short <a href="#__svg__SVGFEBlendElement__SVG_FEBLEND_MODE_DARKEN">SVG_FEBLEND_MODE_DARKEN</a> = 4;
3791 const unsigned short <a href="#__svg__SVGFEBlendElement__SVG_FEBLEND_MODE_LIGHTEN">SVG_FEBLEND_MODE_LIGHTEN</a> = 5;
3793 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a> <a href="#__svg__SVGFEBlendElement__in1">in1</a>;
3794 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a> <a href="#__svg__SVGFEBlendElement__in2">in2</a>;
3795 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a> <a href="#__svg__SVGFEBlendElement__mode">mode</a>;
3796 };</pre><dl class="interface"><dt>Constants in group “Blend Mode Types”:</dt><dd><dl class="constants">
3797 <dt id="__svg__SVGFEBlendElement__SVG_FEBLEND_MODE_UNKNOWN"><b>SVG_FEBLEND_MODE_UNKNOWN</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
3798 The type is not one of predefined types. It is invalid to attempt to
3799 define a new value of this type or to attempt to switch an existing
3800 value to this type.
3802 </div></dd>
3803 <dt id="__svg__SVGFEBlendElement__SVG_FEBLEND_MODE_NORMAL"><b>SVG_FEBLEND_MODE_NORMAL</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
3804 Corresponds to value <span class="attr-value">'normal'</span>.
3806 </div></dd>
3807 <dt id="__svg__SVGFEBlendElement__SVG_FEBLEND_MODE_MULTIPLY"><b>SVG_FEBLEND_MODE_MULTIPLY</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
3808 Corresponds to value <span class="attr-value">'multiply'</span>.
3810 </div></dd>
3811 <dt id="__svg__SVGFEBlendElement__SVG_FEBLEND_MODE_SCREEN"><b>SVG_FEBLEND_MODE_SCREEN</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
3812 Corresponds to value <span class="attr-value">'screen'</span>.
3814 </div></dd>
3815 <dt id="__svg__SVGFEBlendElement__SVG_FEBLEND_MODE_DARKEN"><b>SVG_FEBLEND_MODE_DARKEN</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
3816 Corresponds to value <span class="attr-value">'darken'</span>.
3818 </div></dd>
3819 <dt id="__svg__SVGFEBlendElement__SVG_FEBLEND_MODE_LIGHTEN"><b>SVG_FEBLEND_MODE_LIGHTEN</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
3820 Corresponds to value <span class="attr-value">'lighten'</span>.
3822 </div></dd></dl></dd><dt>Attributes:</dt><dd><dl class="attributes">
3823 <dt id="__svg__SVGFEBlendElement__in1"><b>in1</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a>)</span></dt><dd><div>
3824 Corresponds to attribute <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a> on the given <a href="#feBlendElement"><span class="element-name">‘feBlend’</span></a>
3825 element.
3826 </div></dd>
3827 <dt id="__svg__SVGFEBlendElement__in2"><b>in2</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a>)</span></dt><dd><div>
3828 Corresponds to attribute <a href="#feBlendIn2Attribute"><span class="attr-name">‘in2’</span></a> on the given <a href="#feBlendElement"><span class="element-name">‘feBlend’</span></a>
3829 element.
3830 </div></dd>
3831 <dt id="__svg__SVGFEBlendElement__mode"><b>mode</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a>)</span></dt><dd><div>
3832 Corresponds to attribute <a href="#feBlendModeAttribute"><span class="attr-name">‘mode’</span></a> on the given <a href="#feBlendElement"><span class="element-name">‘feBlend’</span></a>
3833 element. Takes one of the SVG_FEBLEND_MODE_* constants defined on
3834 this interface.
3835 </div></dd></dl></dd></dl>
3838 <h3 id="InterfaceSVGFEColorMatrixElement">33.5 Interface SVGFEColorMatrixElement</h3>
3842 The <a class="idlinterface" href="#InterfaceSVGFEColorMatrixElement">SVGFEColorMatrixElement</a> interface corresponds to the
3843 <a href="#feColorMatrixElement"><span class="element-name">‘feColorMatrix’</span></a> element.
3844 <pre class="idl">interface <b>SVGFEColorMatrixElement</b> : ::svg::SVGElement,
3845 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
3847 // Color Matrix Types
3848 const unsigned short <a href="#__svg__SVGFEColorMatrixElement__SVG_FECOLORMATRIX_TYPE_UNKNOWN">SVG_FECOLORMATRIX_TYPE_UNKNOWN</a> = 0;
3849 const unsigned short <a href="#__svg__SVGFEColorMatrixElement__SVG_FECOLORMATRIX_TYPE_MATRIX">SVG_FECOLORMATRIX_TYPE_MATRIX</a> = 1;
3850 const unsigned short <a href="#__svg__SVGFEColorMatrixElement__SVG_FECOLORMATRIX_TYPE_SATURATE">SVG_FECOLORMATRIX_TYPE_SATURATE</a> = 2;
3851 const unsigned short <a href="#__svg__SVGFEColorMatrixElement__SVG_FECOLORMATRIX_TYPE_HUEROTATE">SVG_FECOLORMATRIX_TYPE_HUEROTATE</a> = 3;
3852 const unsigned short <a href="#__svg__SVGFEColorMatrixElement__SVG_FECOLORMATRIX_TYPE_LUMINANCETOALPHA">SVG_FECOLORMATRIX_TYPE_LUMINANCETOALPHA</a> = 4;
3854 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a> <a href="#__svg__SVGFEColorMatrixElement__in1">in1</a>;
3855 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a> <a href="#__svg__SVGFEColorMatrixElement__type">type</a>;
3856 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumberList">SVGAnimatedNumberList</a> <a href="#__svg__SVGFEColorMatrixElement__values">values</a>;
3857 };</pre><dl class="interface"><dt>Constants in group “Color Matrix Types”:</dt><dd><dl class="constants">
3858 <dt id="__svg__SVGFEColorMatrixElement__SVG_FECOLORMATRIX_TYPE_UNKNOWN"><b>SVG_FECOLORMATRIX_TYPE_UNKNOWN</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
3859 The type is not one of predefined types. It is invalid to attempt to
3860 define a new value of this type or to attempt to switch an existing
3861 value to this type.
3863 </div></dd>
3864 <dt id="__svg__SVGFEColorMatrixElement__SVG_FECOLORMATRIX_TYPE_MATRIX"><b>SVG_FECOLORMATRIX_TYPE_MATRIX</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
3865 Corresponds to value <span class="attr-value">'matrix'</span>.
3867 </div></dd>
3868 <dt id="__svg__SVGFEColorMatrixElement__SVG_FECOLORMATRIX_TYPE_SATURATE"><b>SVG_FECOLORMATRIX_TYPE_SATURATE</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
3869 Corresponds to value <span class="attr-value">'saturate'</span>.
3871 </div></dd>
3872 <dt id="__svg__SVGFEColorMatrixElement__SVG_FECOLORMATRIX_TYPE_HUEROTATE"><b>SVG_FECOLORMATRIX_TYPE_HUEROTATE</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
3873 Corresponds to value <span class="attr-value">'hueRotate'</span>.
3875 </div></dd>
3876 <dt id="__svg__SVGFEColorMatrixElement__SVG_FECOLORMATRIX_TYPE_LUMINANCETOALPHA"><b>SVG_FECOLORMATRIX_TYPE_LUMINANCETOALPHA</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
3877 Corresponds to value <span class="attr-value">'luminanceToAlpha'</span>.
3879 </div></dd></dl></dd><dt>Attributes:</dt><dd><dl class="attributes">
3880 <dt id="__svg__SVGFEColorMatrixElement__in1"><b>in1</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a>)</span></dt><dd><div>
3881 Corresponds to attribute <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a> on the given <a href="#feColorMatrixElement"><span class="element-name">‘feColorMatrix’</span></a>
3882 element.
3883 </div></dd>
3884 <dt id="__svg__SVGFEColorMatrixElement__type"><b>type</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a>)</span></dt><dd><div>
3885 Corresponds to attribute <a href="#feColorMatrixTypeAttribute"><span class="attr-name">‘type’</span></a> on the given <a href="#feColorMatrixElement"><span class="element-name">‘feColorMatrix’</span></a>
3886 element. Takes one of the SVG_FECOLORMATRIX_TYPE_* constants defined
3887 on this interface.
3888 </div></dd>
3889 <dt id="__svg__SVGFEColorMatrixElement__values"><b>values</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumberList">SVGAnimatedNumberList</a>)</span></dt><dd><div>
3890 Corresponds to attribute <a href="#feColorMatrixValuesAttribute"><span class="attr-name">‘values’</span></a> on the given <a href="#feColorMatrixElement"><span class="element-name">‘feColorMatrix’</span></a>
3891 element.
3892 </div></dd></dl></dd></dl>
3895 <h3 id="InterfaceSVGFEComponentTransferElement">33.6 Interface SVGFEComponentTransferElement</h3>
3899 The <a class="idlinterface" href="#InterfaceSVGFEComponentTransferElement">SVGFEComponentTransferElement</a> interface corresponds to the
3900 <a href="#feComponentTransferElement"><span class="element-name">‘feComponentTransfer’</span></a> element.
3901 <pre class="idl">interface <b>SVGFEComponentTransferElement</b> : ::svg::SVGElement,
3902 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
3903 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a> <a href="#__svg__SVGFEComponentTransferElement__in1">in1</a>;
3904 };</pre><dl class="interface"><dt>Attributes:</dt><dd><dl class="attributes">
3905 <dt id="__svg__SVGFEComponentTransferElement__in1"><b>in1</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a>)</span></dt><dd><div>
3906 Corresponds to attribute <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a> on the given <a href="#feComponentTransferElement"><span class="element-name">‘feComponentTransfer’</span></a>
3907 element.
3908 </div></dd></dl></dd></dl>
3911 <h3 id="InterfaceSVGComponentTransferFunctionElement">33.7 Interface SVGComponentTransferFunctionElement</h3>
3915 This interface defines a base interface used by the component transfer
3916 function interfaces.
3917 <pre class="idl">interface <b>SVGComponentTransferFunctionElement</b> : ::svg::SVGElement {
3919 // Component Transfer Types
3920 const unsigned short <a href="#__svg__SVGComponentTransferFunctionElement__SVG_FECOMPONENTTRANSFER_TYPE_UNKNOWN">SVG_FECOMPONENTTRANSFER_TYPE_UNKNOWN</a> = 0;
3921 const unsigned short <a href="#__svg__SVGComponentTransferFunctionElement__SVG_FECOMPONENTTRANSFER_TYPE_IDENTITY">SVG_FECOMPONENTTRANSFER_TYPE_IDENTITY</a> = 1;
3922 const unsigned short <a href="#__svg__SVGComponentTransferFunctionElement__SVG_FECOMPONENTTRANSFER_TYPE_TABLE">SVG_FECOMPONENTTRANSFER_TYPE_TABLE</a> = 2;
3923 const unsigned short <a href="#__svg__SVGComponentTransferFunctionElement__SVG_FECOMPONENTTRANSFER_TYPE_DISCRETE">SVG_FECOMPONENTTRANSFER_TYPE_DISCRETE</a> = 3;
3924 const unsigned short <a href="#__svg__SVGComponentTransferFunctionElement__SVG_FECOMPONENTTRANSFER_TYPE_LINEAR">SVG_FECOMPONENTTRANSFER_TYPE_LINEAR</a> = 4;
3925 const unsigned short <a href="#__svg__SVGComponentTransferFunctionElement__SVG_FECOMPONENTTRANSFER_TYPE_GAMMA">SVG_FECOMPONENTTRANSFER_TYPE_GAMMA</a> = 5;
3927 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a> <a href="#__svg__SVGComponentTransferFunctionElement__type">type</a>;
3928 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumberList">SVGAnimatedNumberList</a> <a href="#__svg__SVGComponentTransferFunctionElement__tableValues">tableValues</a>;
3929 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGComponentTransferFunctionElement__slope">slope</a>;
3930 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGComponentTransferFunctionElement__intercept">intercept</a>;
3931 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGComponentTransferFunctionElement__amplitude">amplitude</a>;
3932 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGComponentTransferFunctionElement__exponent">exponent</a>;
3933 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGComponentTransferFunctionElement__offset">offset</a>;
3934 };</pre><dl class="interface"><dt>Constants in group “Component Transfer Types”:</dt><dd><dl class="constants">
3935 <dt id="__svg__SVGComponentTransferFunctionElement__SVG_FECOMPONENTTRANSFER_TYPE_UNKNOWN"><b>SVG_FECOMPONENTTRANSFER_TYPE_UNKNOWN</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
3936 The type is not one of predefined types. It is invalid to attempt to
3937 define a new value of this type or to attempt to switch an existing
3938 value to this type.
3940 </div></dd>
3941 <dt id="__svg__SVGComponentTransferFunctionElement__SVG_FECOMPONENTTRANSFER_TYPE_IDENTITY"><b>SVG_FECOMPONENTTRANSFER_TYPE_IDENTITY</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
3942 Corresponds to value <span class="attr-value">'identity'</span>.
3944 </div></dd>
3945 <dt id="__svg__SVGComponentTransferFunctionElement__SVG_FECOMPONENTTRANSFER_TYPE_TABLE"><b>SVG_FECOMPONENTTRANSFER_TYPE_TABLE</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
3946 Corresponds to value <span class="attr-value">'table'</span>.
3948 </div></dd>
3949 <dt id="__svg__SVGComponentTransferFunctionElement__SVG_FECOMPONENTTRANSFER_TYPE_DISCRETE"><b>SVG_FECOMPONENTTRANSFER_TYPE_DISCRETE</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
3950 Corresponds to value <span class="attr-value">'discrete'</span>.
3952 </div></dd>
3953 <dt id="__svg__SVGComponentTransferFunctionElement__SVG_FECOMPONENTTRANSFER_TYPE_LINEAR"><b>SVG_FECOMPONENTTRANSFER_TYPE_LINEAR</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
3954 Corresponds to value <span class="attr-value">'linear'</span>.
3956 </div></dd>
3957 <dt id="__svg__SVGComponentTransferFunctionElement__SVG_FECOMPONENTTRANSFER_TYPE_GAMMA"><b>SVG_FECOMPONENTTRANSFER_TYPE_GAMMA</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
3958 Corresponds to value <span class="attr-value">'gamma'</span>.
3960 </div></dd></dl></dd><dt>Attributes:</dt><dd><dl class="attributes">
3961 <dt id="__svg__SVGComponentTransferFunctionElement__type"><b>type</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a>)</span></dt><dd><div>
3962 Corresponds to attribute <a href="#feComponentTransferTypeAttribute"><span class="attr-name">‘type’</span></a> on the given
3963 element. Takes one of the SVG_FECOMPONENTTRANSFER_TYPE_* constants defined
3964 on this interface.
3965 </div></dd>
3966 <dt id="__svg__SVGComponentTransferFunctionElement__tableValues"><b>tableValues</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumberList">SVGAnimatedNumberList</a>)</span></dt><dd><div>
3967 Corresponds to attribute <a href="#feComponentTransferTableValuesAttribute"><span class="attr-name">‘tableValues’</span></a> on the given element.
3968 </div></dd>
3969 <dt id="__svg__SVGComponentTransferFunctionElement__slope"><b>slope</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
3970 Corresponds to attribute <a href="#feComponentTransferSlopeAttribute"><span class="attr-name">‘slope’</span></a> on the given element.
3971 </div></dd>
3972 <dt id="__svg__SVGComponentTransferFunctionElement__intercept"><b>intercept</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
3973 Corresponds to attribute <a href="#feComponentTransferInterceptAttribute"><span class="attr-name">‘intercept’</span></a> on the given element.
3974 </div></dd>
3975 <dt id="__svg__SVGComponentTransferFunctionElement__amplitude"><b>amplitude</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
3976 Corresponds to attribute <a href="#feComponentTransferAmplitudeAttribute"><span class="attr-name">‘amplitude’</span></a> on the given element.
3977 </div></dd>
3978 <dt id="__svg__SVGComponentTransferFunctionElement__exponent"><b>exponent</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
3979 Corresponds to attribute <a href="#feComponentTransferExponentAttribute"><span class="attr-name">‘exponent’</span></a> on the given element.
3980 </div></dd>
3981 <dt id="__svg__SVGComponentTransferFunctionElement__offset"><b>offset</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
3982 Corresponds to attribute <a href="#feComponentTransferOffsetAttribute"><span class="attr-name">‘offset’</span></a> on the given element.
3983 </div></dd></dl></dd></dl>
3986 <h3 id="InterfaceSVGFEFuncRElement">33.8 Interface SVGFEFuncRElement</h3>
3990 The <a class="idlinterface" href="#InterfaceSVGFEFuncRElement">SVGFEFuncRElement</a> interface corresponds to the <a href=""><span class="element-name">‘feFuncR’</span></a>
3991 element.
3992 <pre class="idl">interface <b>SVGFEFuncRElement</b> : <a class="idlinterface" href="#InterfaceSVGComponentTransferFunctionElement">SVGComponentTransferFunctionElement</a> {
3993 };</pre>
3996 <h3 id="InterfaceSVGFEFuncGElement">33.9 Interface SVGFEFuncGElement</h3>
4000 The <a class="idlinterface" href="#InterfaceSVGFEFuncRElement">SVGFEFuncRElement</a> interface corresponds to the <a href=""><span class="element-name">‘feFuncG’</span></a>
4001 element.
4002 <pre class="idl">interface <b>SVGFEFuncGElement</b> : <a class="idlinterface" href="#InterfaceSVGComponentTransferFunctionElement">SVGComponentTransferFunctionElement</a> {
4003 };</pre>
4006 <h3 id="InterfaceSVGFEFuncBElement">33.10 Interface SVGFEFuncBElement</h3>
4010 The <a class="idlinterface" href="#InterfaceSVGFEFuncBElement">SVGFEFuncBElement</a> interface corresponds to the <a href=""><span class="element-name">‘feFuncB’</span></a>
4011 element.
4012 <pre class="idl">interface <b>SVGFEFuncBElement</b> : <a class="idlinterface" href="#InterfaceSVGComponentTransferFunctionElement">SVGComponentTransferFunctionElement</a> {
4013 };</pre>
4016 <h3 id="InterfaceSVGFEFuncAElement">33.11 Interface SVGFEFuncAElement</h3>
4020 The <a class="idlinterface" href="#InterfaceSVGFEFuncAElement">SVGFEFuncAElement</a> interface corresponds to the <a href=""><span class="element-name">‘feFuncA’</span></a>
4021 element.
4022 <pre class="idl">interface <b>SVGFEFuncAElement</b> : <a class="idlinterface" href="#InterfaceSVGComponentTransferFunctionElement">SVGComponentTransferFunctionElement</a> {
4023 };</pre>
4026 <h3 id="InterfaceSVGFECompositeElement">33.12 Interface SVGFECompositeElement</h3>
4030 The <a class="idlinterface" href="#InterfaceSVGFECompositeElement">SVGFECompositeElement</a> interface corresponds to the
4031 <a href="#feCompositeElement"><span class="element-name">‘feComposite’</span></a> element.
4032 <pre class="idl">interface <b>SVGFECompositeElement</b> : ::svg::SVGElement,
4033 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
4035 // Composite Operators
4036 const unsigned short <a href="#__svg__SVGFECompositeElement__SVG_FECOMPOSITE_OPERATOR_UNKNOWN">SVG_FECOMPOSITE_OPERATOR_UNKNOWN</a> = 0;
4037 const unsigned short <a href="#__svg__SVGFECompositeElement__SVG_FECOMPOSITE_OPERATOR_OVER">SVG_FECOMPOSITE_OPERATOR_OVER</a> = 1;
4038 const unsigned short <a href="#__svg__SVGFECompositeElement__SVG_FECOMPOSITE_OPERATOR_IN">SVG_FECOMPOSITE_OPERATOR_IN</a> = 2;
4039 const unsigned short <a href="#__svg__SVGFECompositeElement__SVG_FECOMPOSITE_OPERATOR_OUT">SVG_FECOMPOSITE_OPERATOR_OUT</a> = 3;
4040 const unsigned short <a href="#__svg__SVGFECompositeElement__SVG_FECOMPOSITE_OPERATOR_ATOP">SVG_FECOMPOSITE_OPERATOR_ATOP</a> = 4;
4041 const unsigned short <a href="#__svg__SVGFECompositeElement__SVG_FECOMPOSITE_OPERATOR_XOR">SVG_FECOMPOSITE_OPERATOR_XOR</a> = 5;
4042 const unsigned short <a href="#__svg__SVGFECompositeElement__SVG_FECOMPOSITE_OPERATOR_ARITHMETIC">SVG_FECOMPOSITE_OPERATOR_ARITHMETIC</a> = 6;
4044 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a> <a href="#__svg__SVGFECompositeElement__in1">in1</a>;
4045 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a> <a href="#__svg__SVGFECompositeElement__in2">in2</a>;
4046 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a> <a href="#__svg__SVGFECompositeElement__operator">operator</a>;
4047 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFECompositeElement__k1">k1</a>;
4048 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFECompositeElement__k2">k2</a>;
4049 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFECompositeElement__k3">k3</a>;
4050 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFECompositeElement__k4">k4</a>;
4051 };</pre><dl class="interface"><dt>Constants in group “Composite Operators”:</dt><dd><dl class="constants">
4052 <dt id="__svg__SVGFECompositeElement__SVG_FECOMPOSITE_OPERATOR_UNKNOWN"><b>SVG_FECOMPOSITE_OPERATOR_UNKNOWN</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
4053 The type is not one of predefined types. It is invalid to attempt to
4054 define a new value of this type or to attempt to switch an existing
4055 value to this type.
4057 </div></dd>
4058 <dt id="__svg__SVGFECompositeElement__SVG_FECOMPOSITE_OPERATOR_OVER"><b>SVG_FECOMPOSITE_OPERATOR_OVER</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
4059 Corresponds to value <span class="attr-value">'over'</span>.
4061 </div></dd>
4062 <dt id="__svg__SVGFECompositeElement__SVG_FECOMPOSITE_OPERATOR_IN"><b>SVG_FECOMPOSITE_OPERATOR_IN</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
4063 Corresponds to value <span class="attr-value">'in'</span>.
4065 </div></dd>
4066 <dt id="__svg__SVGFECompositeElement__SVG_FECOMPOSITE_OPERATOR_OUT"><b>SVG_FECOMPOSITE_OPERATOR_OUT</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
4067 Corresponds to value <span class="attr-value">'out'</span>.
4069 </div></dd>
4070 <dt id="__svg__SVGFECompositeElement__SVG_FECOMPOSITE_OPERATOR_ATOP"><b>SVG_FECOMPOSITE_OPERATOR_ATOP</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
4071 Corresponds to value <span class="attr-value">'atop'</span>.
4073 </div></dd>
4074 <dt id="__svg__SVGFECompositeElement__SVG_FECOMPOSITE_OPERATOR_XOR"><b>SVG_FECOMPOSITE_OPERATOR_XOR</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
4075 Corresponds to value <span class="attr-value">'xor'</span>.
4077 </div></dd>
4078 <dt id="__svg__SVGFECompositeElement__SVG_FECOMPOSITE_OPERATOR_ARITHMETIC"><b>SVG_FECOMPOSITE_OPERATOR_ARITHMETIC</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
4079 Corresponds to value <span class="attr-value">'arithmetic'</span>.
4081 </div></dd></dl></dd><dt>Attributes:</dt><dd><dl class="attributes">
4082 <dt id="__svg__SVGFECompositeElement__in1"><b>in1</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a>)</span></dt><dd><div>
4083 Corresponds to attribute <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a> on the given <a href="#feCompositeElement"><span class="element-name">‘feComposite’</span></a>
4084 element.
4085 </div></dd>
4086 <dt id="__svg__SVGFECompositeElement__in2"><b>in2</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a>)</span></dt><dd><div>
4087 Corresponds to attribute <a href="#feCompositeIn2Attribute"><span class="attr-name">‘in2’</span></a> on the given <a href="#feCompositeElement"><span class="element-name">‘feComposite’</span></a>
4088 element.
4089 </div></dd>
4090 <dt id="__svg__SVGFECompositeElement__operator"><b>operator</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a>)</span></dt><dd><div>
4091 Corresponds to attribute <a href="#feCompositeOperatorAttribute"><span class="attr-name">‘operator’</span></a> on the given <a href="#feCompositeElement"><span class="element-name">‘feComposite’</span></a>
4092 element. Takes one of the SVG_FECOMPOSITE_OPERATOR_* constants defined
4093 on this interface.
4094 </div></dd>
4095 <dt id="__svg__SVGFECompositeElement__k1"><b>k1</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4096 Corresponds to attribute <a href="#feCompositeK1Attribute"><span class="attr-name">‘k1’</span></a> on the given <a href="#feCompositeElement"><span class="element-name">‘feComposite’</span></a>
4097 element.
4098 </div></dd>
4099 <dt id="__svg__SVGFECompositeElement__k2"><b>k2</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4100 Corresponds to attribute <a href="#feCompositeK2Attribute"><span class="attr-name">‘k2’</span></a> on the given <a href="#feCompositeElement"><span class="element-name">‘feComposite’</span></a>
4101 element.
4102 </div></dd>
4103 <dt id="__svg__SVGFECompositeElement__k3"><b>k3</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4104 Corresponds to attribute <a href="#feCompositeK3Attribute"><span class="attr-name">‘k3’</span></a> on the given <a href="#feCompositeElement"><span class="element-name">‘feComposite’</span></a>
4105 element.
4106 </div></dd>
4107 <dt id="__svg__SVGFECompositeElement__k4"><b>k4</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4108 Corresponds to attribute <a href="#feCompositeK4Attribute"><span class="attr-name">‘k4’</span></a> on the given <a href="#feCompositeElement"><span class="element-name">‘feComposite’</span></a>
4109 element.
4110 </div></dd></dl></dd></dl>
4113 <h3 id="InterfaceSVGFEConvolveMatrixElement">33.13 Interface SVGFEConvolveMatrixElement</h3>
4117 The <a class="idlinterface" href="#InterfaceSVGFEConvolveMatrixElement">SVGFEConvolveMatrixElement</a> interface corresponds to the
4118 <a href="#feConvolveMatrixElement"><span class="element-name">‘feConvolveMatrix’</span></a> element.
4119 <pre class="idl">interface <b>SVGFEConvolveMatrixElement</b> : ::svg::SVGElement,
4120 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
4122 // Edge Mode Values
4123 const unsigned short <a href="#__svg__SVGFEConvolveMatrixElement__SVG_EDGEMODE_UNKNOWN">SVG_EDGEMODE_UNKNOWN</a> = 0;
4124 const unsigned short <a href="#__svg__SVGFEConvolveMatrixElement__SVG_EDGEMODE_DUPLICATE">SVG_EDGEMODE_DUPLICATE</a> = 1;
4125 const unsigned short <a href="#__svg__SVGFEConvolveMatrixElement__SVG_EDGEMODE_WRAP">SVG_EDGEMODE_WRAP</a> = 2;
4126 const unsigned short <a href="#__svg__SVGFEConvolveMatrixElement__SVG_EDGEMODE_NONE">SVG_EDGEMODE_NONE</a> = 3;
4128 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a> <a href="#__svg__SVGFEConvolveMatrixElement__in1">in1</a>;
4129 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedInteger">SVGAnimatedInteger</a> <a href="#__svg__SVGFEConvolveMatrixElement__orderX">orderX</a>;
4130 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedInteger">SVGAnimatedInteger</a> <a href="#__svg__SVGFEConvolveMatrixElement__orderY">orderY</a>;
4131 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumberList">SVGAnimatedNumberList</a> <a href="#__svg__SVGFEConvolveMatrixElement__kernelMatrix">kernelMatrix</a>;
4132 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFEConvolveMatrixElement__divisor">divisor</a>;
4133 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFEConvolveMatrixElement__bias">bias</a>;
4134 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedInteger">SVGAnimatedInteger</a> <a href="#__svg__SVGFEConvolveMatrixElement__targetX">targetX</a>;
4135 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedInteger">SVGAnimatedInteger</a> <a href="#__svg__SVGFEConvolveMatrixElement__targetY">targetY</a>;
4136 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a> <a href="#__svg__SVGFEConvolveMatrixElement__edgeMode">edgeMode</a>;
4137 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFEConvolveMatrixElement__kernelUnitLengthX">kernelUnitLengthX</a>;
4138 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFEConvolveMatrixElement__kernelUnitLengthY">kernelUnitLengthY</a>;
4139 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedBoolean">SVGAnimatedBoolean</a> <a href="#__svg__SVGFEConvolveMatrixElement__preserveAlpha">preserveAlpha</a>;
4140 };</pre><dl class="interface"><dt>Constants in group “Edge Mode Values”:</dt><dd><dl class="constants">
4141 <dt id="__svg__SVGFEConvolveMatrixElement__SVG_EDGEMODE_UNKNOWN"><b>SVG_EDGEMODE_UNKNOWN</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
4142 The type is not one of predefined types. It is invalid to attempt to
4143 define a new value of this type or to attempt to switch an existing
4144 value to this type.
4146 </div></dd>
4147 <dt id="__svg__SVGFEConvolveMatrixElement__SVG_EDGEMODE_DUPLICATE"><b>SVG_EDGEMODE_DUPLICATE</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
4148 Corresponds to value <span class="attr-value">'duplicate'</span>.
4150 </div></dd>
4151 <dt id="__svg__SVGFEConvolveMatrixElement__SVG_EDGEMODE_WRAP"><b>SVG_EDGEMODE_WRAP</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
4152 Corresponds to value <span class="attr-value">'wrap'</span>.
4154 </div></dd>
4155 <dt id="__svg__SVGFEConvolveMatrixElement__SVG_EDGEMODE_NONE"><b>SVG_EDGEMODE_NONE</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
4156 Corresponds to value <span class="attr-value">'none'</span>.
4158 </div></dd></dl></dd><dt>Attributes:</dt><dd><dl class="attributes">
4159 <dt id="__svg__SVGFEConvolveMatrixElement__in1"><b>in1</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a>)</span></dt><dd><div>
4160 Corresponds to attribute <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a> on the given
4161 <a href="#feConvolveMatrixElement"><span class="element-name">‘feConvolveMatrix’</span></a> element.
4162 </div></dd>
4163 <dt id="__svg__SVGFEConvolveMatrixElement__orderX"><b>orderX</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedInteger">SVGAnimatedInteger</a>)</span></dt><dd><div>
4164 Corresponds to attribute <a href="#feConvolveMatrixElementOrderAttribute"><span class="attr-name">‘order’</span></a> on the given
4165 <a href="#feConvolveMatrixElement"><span class="element-name">‘feConvolveMatrix’</span></a> element.
4166 </div></dd>
4167 <dt id="__svg__SVGFEConvolveMatrixElement__orderY"><b>orderY</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedInteger">SVGAnimatedInteger</a>)</span></dt><dd><div>
4168 Corresponds to attribute <a href="#feConvolveMatrixElementOrderAttribute"><span class="attr-name">‘order’</span></a> on the given
4169 <a href="#feConvolveMatrixElement"><span class="element-name">‘feConvolveMatrix’</span></a> element.
4170 </div></dd>
4171 <dt id="__svg__SVGFEConvolveMatrixElement__kernelMatrix"><b>kernelMatrix</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumberList">SVGAnimatedNumberList</a>)</span></dt><dd><div>
4172 Corresponds to attribute <a href="#feConvolveMatrixElementKernelMatrixAttribute"><span class="attr-name">‘kernelMatrix’</span></a> on the given
4173 <a href="#feConvolveMatrixElement"><span class="element-name">‘feConvolveMatrix’</span></a> element.
4174 </div></dd>
4175 <dt id="__svg__SVGFEConvolveMatrixElement__divisor"><b>divisor</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4176 Corresponds to attribute <a href="#feConvolveMatrixElementDivisorAttribute"><span class="attr-name">‘divisor’</span></a> on the given
4177 <a href="#feConvolveMatrixElement"><span class="element-name">‘feConvolveMatrix’</span></a> element.
4178 </div></dd>
4179 <dt id="__svg__SVGFEConvolveMatrixElement__bias"><b>bias</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4180 Corresponds to attribute <a href="#feConvolveMatrixElementBiasAttribute"><span class="attr-name">‘bias’</span></a> on the given
4181 <a href="#feConvolveMatrixElement"><span class="element-name">‘feConvolveMatrix’</span></a> element.
4182 </div></dd>
4183 <dt id="__svg__SVGFEConvolveMatrixElement__targetX"><b>targetX</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedInteger">SVGAnimatedInteger</a>)</span></dt><dd><div>
4184 Corresponds to attribute <a href="#feConvolveMatrixElementTargetXAttribute"><span class="attr-name">‘targetX’</span></a> on the given
4185 <a href="#feConvolveMatrixElement"><span class="element-name">‘feConvolveMatrix’</span></a> element.
4186 </div></dd>
4187 <dt id="__svg__SVGFEConvolveMatrixElement__targetY"><b>targetY</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedInteger">SVGAnimatedInteger</a>)</span></dt><dd><div>
4188 Corresponds to attribute <a href="#feConvolveMatrixElementTargetYAttribute"><span class="attr-name">‘targetY’</span></a> on the given
4189 <a href="#feConvolveMatrixElement"><span class="element-name">‘feConvolveMatrix’</span></a> element.
4190 </div></dd>
4191 <dt id="__svg__SVGFEConvolveMatrixElement__edgeMode"><b>edgeMode</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a>)</span></dt><dd><div>
4192 Corresponds to attribute <a href="#feConvolveMatrixElementEdgeModeAttribute"><span class="attr-name">‘edgeMode’</span></a> on the given
4193 <a href="#feConvolveMatrixElement"><span class="element-name">‘feConvolveMatrix’</span></a> element. Takes one of the SVG_EDGEMODE_*
4194 constants defined on this interface.
4195 </div></dd>
4196 <dt id="__svg__SVGFEConvolveMatrixElement__kernelUnitLengthX"><b>kernelUnitLengthX</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4197 Corresponds to attribute <a href="#feConvolveMatrixElementKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a> on the given
4198 <a href="#feConvolveMatrixElement"><span class="element-name">‘feConvolveMatrix’</span></a> element.
4199 </div></dd>
4200 <dt id="__svg__SVGFEConvolveMatrixElement__kernelUnitLengthY"><b>kernelUnitLengthY</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4201 Corresponds to attribute <a href="#feConvolveMatrixElementKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a> on the given
4202 <a href="#feConvolveMatrixElement"><span class="element-name">‘feConvolveMatrix’</span></a> element.
4203 </div></dd>
4204 <dt id="__svg__SVGFEConvolveMatrixElement__preserveAlpha"><b>preserveAlpha</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedBoolean">SVGAnimatedBoolean</a>)</span></dt><dd><div>
4205 Corresponds to attribute <a href="#feConvolveMatrixElementPreserveAlphaAttribute"><span class="attr-name">‘preserveAlpha’</span></a> on the given
4206 <a href="#feConvolveMatrixElement"><span class="element-name">‘feConvolveMatrix’</span></a> element.
4207 </div></dd></dl></dd></dl>
4210 <h3 id="InterfaceSVGFEDiffuseLightingElement">33.14 Interface SVGFEDiffuseLightingElement</h3>
4214 The <a class="idlinterface" href="#InterfaceSVGFEDiffuseLightingElement">SVGFEDiffuseLightingElement</a> interface corresponds to the
4215 <a href="#feDiffuseLightingElement"><span class="element-name">‘feDiffuseLighting’</span></a> element.
4216 <pre class="idl">interface <b>SVGFEDiffuseLightingElement</b> : ::svg::SVGElement,
4217 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
4218 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a> <a href="#__svg__SVGFEDiffuseLightingElement__in1">in1</a>;
4219 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFEDiffuseLightingElement__surfaceScale">surfaceScale</a>;
4220 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFEDiffuseLightingElement__diffuseConstant">diffuseConstant</a>;
4221 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFEDiffuseLightingElement__kernelUnitLengthX">kernelUnitLengthX</a>;
4222 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFEDiffuseLightingElement__kernelUnitLengthY">kernelUnitLengthY</a>;
4223 };</pre><dl class="interface"><dt>Attributes:</dt><dd><dl class="attributes">
4224 <dt id="__svg__SVGFEDiffuseLightingElement__in1"><b>in1</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a>)</span></dt><dd><div>
4225 Corresponds to attribute <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a> on the given <a href="#feDiffuseLightingElement"><span class="element-name">‘feDiffuseLighting’</span></a>
4226 element.
4227 </div></dd>
4228 <dt id="__svg__SVGFEDiffuseLightingElement__surfaceScale"><b>surfaceScale</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4229 Corresponds to attribute <a href="#feDiffuseLightingSurfaceScaleAttribute"><span class="attr-name">‘surfaceScale’</span></a> on the given
4230 <a href="#feDiffuseLightingElement"><span class="element-name">‘feDiffuseLighting’</span></a> element.
4231 </div></dd>
4232 <dt id="__svg__SVGFEDiffuseLightingElement__diffuseConstant"><b>diffuseConstant</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4233 Corresponds to attribute <a href="#feDiffuseLightingDiffuseConstantAttribute"><span class="attr-name">‘diffuseConstant’</span></a> on the given
4234 <a href="#feDiffuseLightingElement"><span class="element-name">‘feDiffuseLighting’</span></a> element.
4235 </div></dd>
4236 <dt id="__svg__SVGFEDiffuseLightingElement__kernelUnitLengthX"><b>kernelUnitLengthX</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4237 Corresponds to attribute <a href="#feDiffuseLightingKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a> on the given
4238 <a href="#feDiffuseLightingElement"><span class="element-name">‘feDiffuseLighting’</span></a> element.
4239 </div></dd>
4240 <dt id="__svg__SVGFEDiffuseLightingElement__kernelUnitLengthY"><b>kernelUnitLengthY</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4241 Corresponds to attribute <a href="#feDiffuseLightingKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a> on the given
4242 <a href="#feDiffuseLightingElement"><span class="element-name">‘feDiffuseLighting’</span></a> element.
4243 </div></dd></dl></dd></dl>
4246 <h3 id="InterfaceSVGFEDistantLightElement">33.15 Interface SVGFEDistantLightElement</h3>
4250 The <a class="idlinterface" href="#InterfaceSVGFEDistantLightElement">SVGFEDistantLightElement</a> interface corresponds to the
4251 <a href="#feDistantLightElement"><span class="element-name">‘feDistantLight’</span></a> element.
4252 <pre class="idl">interface <b>SVGFEDistantLightElement</b> : ::svg::SVGElement {
4253 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFEDistantLightElement__azimuth">azimuth</a>;
4254 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFEDistantLightElement__elevation">elevation</a>;
4255 };</pre><dl class="interface"><dt>Attributes:</dt><dd><dl class="attributes">
4256 <dt id="__svg__SVGFEDistantLightElement__azimuth"><b>azimuth</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4257 Corresponds to attribute <a href="#feDistantLightAzimuthAttribute"><span class="attr-name">‘azimuth’</span></a> on the given
4258 <a href="#feDistantLightElement"><span class="element-name">‘feDistantLight’</span></a> element.
4259 </div></dd>
4260 <dt id="__svg__SVGFEDistantLightElement__elevation"><b>elevation</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4261 Corresponds to attribute <a href="#feDistantLightElevationAttribute"><span class="attr-name">‘elevation’</span></a> on the given
4262 <a href="#feDistantLightElement"><span class="element-name">‘feDistantLight’</span></a> element.
4263 </div></dd></dl></dd></dl>
4266 <h3 id="InterfaceSVGFEPointLightElement">33.16 Interface SVGFEPointLightElement</h3>
4270 The <a class="idlinterface" href="#InterfaceSVGFEPointLightElement">SVGFEPointLightElement</a> interface corresponds to the
4271 <a href="#fePointLightElement"><span class="element-name">‘fePointLight’</span></a> element.
4272 <pre class="idl">interface <b>SVGFEPointLightElement</b> : ::svg::SVGElement {
4273 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFEPointLightElement__x">x</a>;
4274 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFEPointLightElement__y">y</a>;
4275 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFEPointLightElement__z">z</a>;
4276 };</pre><dl class="interface"><dt>Attributes:</dt><dd><dl class="attributes">
4277 <dt id="__svg__SVGFEPointLightElement__x"><b>x</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4278 Corresponds to attribute <a href="#fePointLightXAttribute"><span class="attr-name">‘x’</span></a> on the given
4279 <a href="#fePointLightElement"><span class="element-name">‘fePointLight’</span></a> element.
4280 </div></dd>
4281 <dt id="__svg__SVGFEPointLightElement__y"><b>y</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4282 Corresponds to attribute <a href="#fePointLightYAttribute"><span class="attr-name">‘y’</span></a> on the given
4283 <a href="#fePointLightElement"><span class="element-name">‘fePointLight’</span></a> element.
4284 </div></dd>
4285 <dt id="__svg__SVGFEPointLightElement__z"><b>z</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4286 Corresponds to attribute <a href="#fePointLightZAttribute"><span class="attr-name">‘z’</span></a> on the given
4287 <a href="#fePointLightElement"><span class="element-name">‘fePointLight’</span></a> element.
4288 </div></dd></dl></dd></dl>
4291 <h3 id="InterfaceSVGFESpotLightElement">33.17 Interface SVGFESpotLightElement</h3>
4295 The <a class="idlinterface" href="#InterfaceSVGFESpotLightElement">SVGFESpotLightElement</a> interface corresponds to the
4296 <a href="#feSpotLightElement"><span class="element-name">‘feSpotLight’</span></a> element.
4297 <pre class="idl">interface <b>SVGFESpotLightElement</b> : ::svg::SVGElement {
4298 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFESpotLightElement__x">x</a>;
4299 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFESpotLightElement__y">y</a>;
4300 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFESpotLightElement__z">z</a>;
4301 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFESpotLightElement__pointsAtX">pointsAtX</a>;
4302 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFESpotLightElement__pointsAtY">pointsAtY</a>;
4303 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFESpotLightElement__pointsAtZ">pointsAtZ</a>;
4304 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFESpotLightElement__specularExponent">specularExponent</a>;
4305 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFESpotLightElement__limitingConeAngle">limitingConeAngle</a>;
4306 };</pre><dl class="interface"><dt>Attributes:</dt><dd><dl class="attributes">
4307 <dt id="__svg__SVGFESpotLightElement__x"><b>x</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4308 Corresponds to attribute <a href="#feSpotLightXAttribute"><span class="attr-name">‘x’</span></a> on the given
4309 <a href="#feSpotLightElement"><span class="element-name">‘feSpotLight’</span></a> element.
4310 </div></dd>
4311 <dt id="__svg__SVGFESpotLightElement__y"><b>y</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4312 Corresponds to attribute <a href="#feSpotLightYAttribute"><span class="attr-name">‘y’</span></a> on the given
4313 <a href="#feSpotLightElement"><span class="element-name">‘feSpotLight’</span></a> element.
4314 </div></dd>
4315 <dt id="__svg__SVGFESpotLightElement__z"><b>z</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4316 Corresponds to attribute <a href="#feSpotLightZAttribute"><span class="attr-name">‘z’</span></a> on the given
4317 <a href="#feSpotLightElement"><span class="element-name">‘feSpotLight’</span></a> element.
4318 </div></dd>
4319 <dt id="__svg__SVGFESpotLightElement__pointsAtX"><b>pointsAtX</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4320 Corresponds to attribute <a href="#feSpotLightPointsAtXAttribute"><span class="attr-name">‘pointsAtX’</span></a> on the given
4321 <a href="#feSpotLightElement"><span class="element-name">‘feSpotLight’</span></a> element.
4322 </div></dd>
4323 <dt id="__svg__SVGFESpotLightElement__pointsAtY"><b>pointsAtY</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4324 Corresponds to attribute <a href="#feSpotLightPointsAtYAttribute"><span class="attr-name">‘pointsAtY’</span></a> on the given
4325 <a href="#feSpotLightElement"><span class="element-name">‘feSpotLight’</span></a> element.
4326 </div></dd>
4327 <dt id="__svg__SVGFESpotLightElement__pointsAtZ"><b>pointsAtZ</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4328 Corresponds to attribute <a href="#feSpotLightPointsAtZAttribute"><span class="attr-name">‘pointsAtZ’</span></a> on the given
4329 <a href="#feSpotLightElement"><span class="element-name">‘feSpotLight’</span></a> element.
4330 </div></dd>
4331 <dt id="__svg__SVGFESpotLightElement__specularExponent"><b>specularExponent</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4332 Corresponds to attribute <a href="#feSpotLightSpecularExponentAttribute"><span class="attr-name">‘specularExponent’</span></a> on the given
4333 <a href="#feSpotLightElement"><span class="element-name">‘feSpotLight’</span></a> element.
4334 </div></dd>
4335 <dt id="__svg__SVGFESpotLightElement__limitingConeAngle"><b>limitingConeAngle</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4336 Corresponds to attribute <a href="#feSpotLightLimitingConeAngleAttribute"><span class="attr-name">‘limitingConeAngle’</span></a> on the given
4337 <a href="#feSpotLightElement"><span class="element-name">‘feSpotLight’</span></a> element.
4338 </div></dd></dl></dd></dl>
4341 <h3 id="InterfaceSVGFEDisplacementMapElement">33.18 Interface SVGFEDisplacementMapElement</h3>
4345 The <a class="idlinterface" href="#InterfaceSVGFEDisplacementMapElement">SVGFEDisplacementMapElement</a> interface corresponds to the
4346 <a href="#feDisplacementMapElement"><span class="element-name">‘feDisplacementMap’</span></a> element.
4347 <pre class="idl">interface <b>SVGFEDisplacementMapElement</b> : ::svg::SVGElement,
4348 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
4350 // Channel Selectors
4351 const unsigned short <a href="#__svg__SVGFEDisplacementMapElement__SVG_CHANNEL_UNKNOWN">SVG_CHANNEL_UNKNOWN</a> = 0;
4352 const unsigned short <a href="#__svg__SVGFEDisplacementMapElement__SVG_CHANNEL_R">SVG_CHANNEL_R</a> = 1;
4353 const unsigned short <a href="#__svg__SVGFEDisplacementMapElement__SVG_CHANNEL_G">SVG_CHANNEL_G</a> = 2;
4354 const unsigned short <a href="#__svg__SVGFEDisplacementMapElement__SVG_CHANNEL_B">SVG_CHANNEL_B</a> = 3;
4355 const unsigned short <a href="#__svg__SVGFEDisplacementMapElement__SVG_CHANNEL_A">SVG_CHANNEL_A</a> = 4;
4357 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a> <a href="#__svg__SVGFEDisplacementMapElement__in1">in1</a>;
4358 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a> <a href="#__svg__SVGFEDisplacementMapElement__in2">in2</a>;
4359 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFEDisplacementMapElement__scale">scale</a>;
4360 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a> <a href="#__svg__SVGFEDisplacementMapElement__xChannelSelector">xChannelSelector</a>;
4361 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a> <a href="#__svg__SVGFEDisplacementMapElement__yChannelSelector">yChannelSelector</a>;
4362 };</pre><dl class="interface"><dt>Constants in group “Channel Selectors”:</dt><dd><dl class="constants">
4363 <dt id="__svg__SVGFEDisplacementMapElement__SVG_CHANNEL_UNKNOWN"><b>SVG_CHANNEL_UNKNOWN</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
4364 The type is not one of predefined types. It is invalid to attempt to
4365 define a new value of this type or to attempt to switch an existing
4366 value to this type.
4368 </div></dd>
4369 <dt id="__svg__SVGFEDisplacementMapElement__SVG_CHANNEL_R"><b>SVG_CHANNEL_R</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
4370 Corresponds to value <span class="attr-value">'R'</span>.
4372 </div></dd>
4373 <dt id="__svg__SVGFEDisplacementMapElement__SVG_CHANNEL_G"><b>SVG_CHANNEL_G</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
4374 Corresponds to value <span class="attr-value">'G'</span>.
4376 </div></dd>
4377 <dt id="__svg__SVGFEDisplacementMapElement__SVG_CHANNEL_B"><b>SVG_CHANNEL_B</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
4378 Corresponds to value <span class="attr-value">'B'</span>.
4380 </div></dd>
4381 <dt id="__svg__SVGFEDisplacementMapElement__SVG_CHANNEL_A"><b>SVG_CHANNEL_A</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
4382 Corresponds to value <span class="attr-value">'A'</span>.
4384 </div></dd></dl></dd><dt>Attributes:</dt><dd><dl class="attributes">
4385 <dt id="__svg__SVGFEDisplacementMapElement__in1"><b>in1</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a>)</span></dt><dd><div>
4386 Corresponds to attribute <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a> on the given <a href="#feDisplacementMapElement"><span class="element-name">‘feDisplacementMap’</span></a>
4387 element.
4388 </div></dd>
4389 <dt id="__svg__SVGFEDisplacementMapElement__in2"><b>in2</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a>)</span></dt><dd><div>
4390 Corresponds to attribute <a href="#feDisplacementMapIn2Attribute"><span class="attr-name">‘in2’</span></a> on the given <a href="#feDisplacementMapElement"><span class="element-name">‘feDisplacementMap’</span></a>
4391 element.
4392 </div></dd>
4393 <dt id="__svg__SVGFEDisplacementMapElement__scale"><b>scale</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4394 Corresponds to attribute <a href="#feDisplacementMapScaleAttribute"><span class="attr-name">‘scale’</span></a> on the given <a href="#feDisplacementMapElement"><span class="element-name">‘feDisplacementMap’</span></a>
4395 element.
4396 </div></dd>
4397 <dt id="__svg__SVGFEDisplacementMapElement__xChannelSelector"><b>xChannelSelector</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a>)</span></dt><dd><div>
4398 Corresponds to attribute <a href="#feDisplacementMapXChannelSelectorAttribute"><span class="attr-name">‘xChannelSelector’</span></a> on the given
4399 <a href="#feDisplacementMapElement"><span class="element-name">‘feDisplacementMap’</span></a> element. Takes one of the SVG_CHANNEL_*
4400 constants defined on this interface.
4401 </div></dd>
4402 <dt id="__svg__SVGFEDisplacementMapElement__yChannelSelector"><b>yChannelSelector</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a>)</span></dt><dd><div>
4403 Corresponds to attribute <a href="#feDisplacementMapYChannelSelectorAttribute"><span class="attr-name">‘yChannelSelector’</span></a> on the given
4404 <a href="#feDisplacementMapElement"><span class="element-name">‘feDisplacementMap’</span></a> element. Takes one of the SVG_CHANNEL_*
4405 constants defined on this interface.
4406 </div></dd></dl></dd></dl>
4409 <h3 id="InterfaceSVGFEFloodElement">33.19 Interface SVGFEFloodElement</h3>
4413 The <a class="idlinterface" href="#InterfaceSVGFEFloodElement">SVGFEFloodElement</a> interface corresponds to the
4414 <a href="#feFloodElement"><span class="element-name">‘feFlood’</span></a> element.
4415 <pre class="idl">interface <b>SVGFEFloodElement</b> : ::svg::SVGElement,
4416 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
4417 };</pre>
4420 <h3 id="InterfaceSVGFEGaussianBlurElement">33.20 Interface SVGFEGaussianBlurElement</h3>
4424 The <a class="idlinterface" href="#InterfaceSVGFEGaussianBlurElement">SVGFEGaussianBlurElement</a> interface corresponds to the
4425 <a href="#feGaussianBlurElement"><span class="element-name">‘feGaussianBlur’</span></a> element.
4426 <pre class="idl">interface <b>SVGFEGaussianBlurElement</b> : ::svg::SVGElement,
4427 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
4429 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a> <a href="#__svg__SVGFEGaussianBlurElement__in1">in1</a>;
4430 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFEGaussianBlurElement__stdDeviationX">stdDeviationX</a>;
4431 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFEGaussianBlurElement__stdDeviationY">stdDeviationY</a>;
4433 void <a href="#__svg__SVGFEGaussianBlurElement__setStdDeviation">setStdDeviation</a>(in float stdDeviationX, in float stdDeviationY) raises(<a class="idlinterface" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187">DOMException</a>);
4434 };</pre><dl class="interface"><dt>Attributes:</dt><dd><dl class="attributes">
4435 <dt id="__svg__SVGFEGaussianBlurElement__in1"><b>in1</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a>)</span></dt><dd><div>
4436 Corresponds to attribute <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a> on the given
4437 <a href="#feGaussianBlurElement"><span class="element-name">‘feGaussianBlur’</span></a> element.
4438 </div></dd>
4439 <dt id="__svg__SVGFEGaussianBlurElement__stdDeviationX"><b>stdDeviationX</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4440 Corresponds to attribute <a href="#feGaussianBlurStdDeviationAttribute"><span class="attr-name">‘stdDeviation’</span></a> on the given
4441 <a href="#feGaussianBlurElement"><span class="element-name">‘feGaussianBlur’</span></a> element. Contains the X component
4442 of attribute <a href="#feGaussianBlurStdDeviationAttribute"><span class="attr-name">‘stdDeviation’</span></a>.
4443 </div></dd>
4444 <dt id="__svg__SVGFEGaussianBlurElement__stdDeviationY"><b>stdDeviationY</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4445 Corresponds to attribute <a href="#feGaussianBlurStdDeviationAttribute"><span class="attr-name">‘stdDeviation’</span></a> on the given
4446 <a href="#feGaussianBlurElement"><span class="element-name">‘feGaussianBlur’</span></a> element. Contains the Y component
4447 (possibly computed automatically) of attribute <a href="#feGaussianBlurStdDeviationAttribute"><span class="attr-name">‘stdDeviation’</span></a>.
4448 </div></dd></dl></dd><dt>Operations:</dt><dd><dl class="attributes">
4449 <dt id="__svg__SVGFEGaussianBlurElement__setStdDeviation">void <b>setStdDeviation</b>(in float <var>stdDeviationX</var>, in float <var>stdDeviationY</var>)</dt><dd><div>
4450 Sets the values for attribute <a href="#feGaussianBlurStdDeviationAttribute"><span class="attr-name">‘stdDeviation’</span></a>.
4452 </div><dl class="operation"><dt>Parameters</dt><dd><ol class="parameters"><li><div class="parameter">float <var>stdDeviationX</var></div> <div> The X component of attribute <a href="#feGaussianBlurStdDeviationAttribute"><span class="attr-name">‘stdDeviation’</span></a>.
4453 </div></li><li><div class="parameter">float <var>stdDeviationY</var></div> <div> The Y component of attribute <a href="#feGaussianBlurStdDeviationAttribute"><span class="attr-name">‘stdDeviation’</span></a>.
4454 </div></li></ol></dd><dt>Exceptions</dt><dd><dl class="exceptions"><dt><a class="idlinterface" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-17189187">DOMException</a>, code NO_MODIFICATION_ALLOWED_ERR</dt><dd> Raised on an attempt
4455 to change the value of a readonly attribute.
4456 </dd></dl></dd></dl></dd></dl></dd></dl>
4459 <h3 id="InterfaceSVGFEImageElement">33.21 Interface SVGFEImageElement</h3>
4463 The <a class="idlinterface" href="#InterfaceSVGFEImageElement">SVGFEImageElement</a> interface corresponds to the
4464 <a href="#feImageElement"><span class="element-name">‘feImage’</span></a> element.
4465 <pre class="idl">interface <b>SVGFEImageElement</b> : ::svg::SVGElement,
4466 ::svg::SVGURIReference,
4467 ::svg::SVGLangSpace,
4468 ::svg::SVGExternalResourcesRequired,
4469 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
4470 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/coords.html#InterfaceSVGAnimatedPreserveAspectRatio">SVGAnimatedPreserveAspectRatio</a> <a href="#__svg__SVGFEImageElement__preserveAspectRatio">preserveAspectRatio</a>;
4471 };</pre><dl class="interface"><dt>Attributes:</dt><dd><dl class="attributes">
4472 <dt id="__svg__SVGFEImageElement__preserveAspectRatio"><b>preserveAspectRatio</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/coords.html#InterfaceSVGAnimatedPreserveAspectRatio">SVGAnimatedPreserveAspectRatio</a>)</span></dt><dd><div>
4473 Corresponds to attribute <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/coords.html#PreserveAspectRatioAttribute"><span class="attr-name">‘preserveAspectRatio’</span></a> on the given
4474 <a href="#feImageElement"><span class="element-name">‘feImage’</span></a> element.
4475 </div></dd></dl></dd></dl>
4478 <h3 id="InterfaceSVGFEMergeElement">33.22 Interface SVGFEMergeElement</h3>
4482 The <a class="idlinterface" href="#InterfaceSVGFEMergeElement">SVGFEMergeElement</a> interface corresponds to the
4483 <a href="#feMergeElement"><span class="element-name">‘feMerge’</span></a> element.
4484 <pre class="idl">interface <b>SVGFEMergeElement</b> : ::svg::SVGElement,
4485 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
4486 };</pre>
4489 <h3 id="InterfaceSVGFEMergeNodeElement">33.23 Interface SVGFEMergeNodeElement</h3>
4493 The <a class="idlinterface" href="#InterfaceSVGFEMergeNodeElement">SVGFEMergeNodeElement</a> interface corresponds to the
4494 <a href="#feMergeNodeElement"><span class="element-name">‘feMergeNode’</span></a> element.
4495 <pre class="idl">interface <b>SVGFEMergeNodeElement</b> : ::svg::SVGElement {
4496 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a> <a href="#__svg__SVGFEMergeNodeElement__in1">in1</a>;
4497 };</pre><dl class="interface"><dt>Attributes:</dt><dd><dl class="attributes">
4498 <dt id="__svg__SVGFEMergeNodeElement__in1"><b>in1</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a>)</span></dt><dd><div>
4499 Corresponds to attribute <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a> on the given <a href="#feMergeNodeElement"><span class="element-name">‘feMergeNode’</span></a>
4500 element.
4501 </div></dd></dl></dd></dl>
4504 <h3 id="InterfaceSVGFEMorphologyElement">33.24 Interface SVGFEMorphologyElement</h3>
4508 The <a class="idlinterface" href="#InterfaceSVGFEMorphologyElement">SVGFEMorphologyElement</a> interface corresponds to the
4509 <a href="#feMorphologyElement"><span class="element-name">‘feMorphology’</span></a> element.
4510 <pre class="idl">interface <b>SVGFEMorphologyElement</b> : ::svg::SVGElement,
4511 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
4513 // Morphology Operators
4514 const unsigned short <a href="#__svg__SVGFEMorphologyElement__SVG_MORPHOLOGY_OPERATOR_UNKNOWN">SVG_MORPHOLOGY_OPERATOR_UNKNOWN</a> = 0;
4515 const unsigned short <a href="#__svg__SVGFEMorphologyElement__SVG_MORPHOLOGY_OPERATOR_ERODE">SVG_MORPHOLOGY_OPERATOR_ERODE</a> = 1;
4516 const unsigned short <a href="#__svg__SVGFEMorphologyElement__SVG_MORPHOLOGY_OPERATOR_DILATE">SVG_MORPHOLOGY_OPERATOR_DILATE</a> = 2;
4518 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a> <a href="#__svg__SVGFEMorphologyElement__in1">in1</a>;
4519 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a> <a href="#__svg__SVGFEMorphologyElement__operator">operator</a>;
4520 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFEMorphologyElement__radiusX">radiusX</a>;
4521 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFEMorphologyElement__radiusY">radiusY</a>;
4522 };</pre><dl class="interface"><dt>Constants in group “Morphology Operators”:</dt><dd><dl class="constants">
4523 <dt id="__svg__SVGFEMorphologyElement__SVG_MORPHOLOGY_OPERATOR_UNKNOWN"><b>SVG_MORPHOLOGY_OPERATOR_UNKNOWN</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
4524 The type is not one of predefined types. It is invalid to attempt to
4525 define a new value of this type or to attempt to switch an existing
4526 value to this type.
4528 </div></dd>
4529 <dt id="__svg__SVGFEMorphologyElement__SVG_MORPHOLOGY_OPERATOR_ERODE"><b>SVG_MORPHOLOGY_OPERATOR_ERODE</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
4530 Corresponds to value <span class="attr-value">'erode'</span>.
4532 </div></dd>
4533 <dt id="__svg__SVGFEMorphologyElement__SVG_MORPHOLOGY_OPERATOR_DILATE"><b>SVG_MORPHOLOGY_OPERATOR_DILATE</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
4534 Corresponds to value <span class="attr-value">'dilate'</span>.
4536 </div></dd></dl></dd><dt>Attributes:</dt><dd><dl class="attributes">
4537 <dt id="__svg__SVGFEMorphologyElement__in1"><b>in1</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a>)</span></dt><dd><div>
4538 Corresponds to attribute <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a> on the given <a href="#feMorphologyElement"><span class="element-name">‘feMorphology’</span></a>
4539 element.
4540 </div></dd>
4541 <dt id="__svg__SVGFEMorphologyElement__operator"><b>operator</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a>)</span></dt><dd><div>
4542 Corresponds to attribute <a href="#feMorphologyOperatorAttribute"><span class="attr-name">‘operator’</span></a> on the given <a href="#feMorphologyElement"><span class="element-name">‘feMorphology’</span></a>
4543 element. Takes one of the SVG_MORPHOLOGY_OPERATOR_* constants
4544 defined on this interface.
4545 </div></dd>
4546 <dt id="__svg__SVGFEMorphologyElement__radiusX"><b>radiusX</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4547 Corresponds to attribute <a href="#feMorphologyRadiusAttribute"><span class="attr-name">‘radius’</span></a> on the given <a href="#feMorphologyElement"><span class="element-name">‘feMorphology’</span></a>
4548 element.
4549 </div></dd>
4550 <dt id="__svg__SVGFEMorphologyElement__radiusY"><b>radiusY</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4551 Corresponds to attribute <a href="#feMorphologyRadiusAttribute"><span class="attr-name">‘radius’</span></a> on the given <a href="#feMorphologyElement"><span class="element-name">‘feMorphology’</span></a>
4552 element.
4553 </div></dd></dl></dd></dl>
4556 <h3 id="InterfaceSVGFEOffsetElement">33.25 Interface SVGFEOffsetElement</h3>
4560 The <a class="idlinterface" href="#InterfaceSVGFEOffsetElement">SVGFEOffsetElement</a> interface corresponds to the
4561 <a href="#feOffsetElement"><span class="element-name">‘feOffset’</span></a> element.
4562 <pre class="idl">interface <b>SVGFEOffsetElement</b> : ::svg::SVGElement,
4563 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
4564 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a> <a href="#__svg__SVGFEOffsetElement__in1">in1</a>;
4565 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFEOffsetElement__dx">dx</a>;
4566 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFEOffsetElement__dy">dy</a>;
4567 };</pre><dl class="interface"><dt>Attributes:</dt><dd><dl class="attributes">
4568 <dt id="__svg__SVGFEOffsetElement__in1"><b>in1</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a>)</span></dt><dd><div>
4569 Corresponds to attribute <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a> on the given <a href="#feOffsetElement"><span class="element-name">‘feOffset’</span></a>
4570 element.
4571 </div></dd>
4572 <dt id="__svg__SVGFEOffsetElement__dx"><b>dx</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4573 Corresponds to attribute <a href="#feOffsetDxAttribute"><span class="attr-name">‘dx’</span></a> on the given <a href="#feOffsetElement"><span class="element-name">‘feOffset’</span></a>
4574 element.
4575 </div></dd>
4576 <dt id="__svg__SVGFEOffsetElement__dy"><b>dy</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4577 Corresponds to attribute <a href="#feOffsetDyAttribute"><span class="attr-name">‘dy’</span></a> on the given <a href="#feOffsetElement"><span class="element-name">‘feOffset’</span></a>
4578 element.
4579 </div></dd></dl></dd></dl>
4582 <h3 id="InterfaceSVGFESpecularLightingElement">33.26 Interface SVGFESpecularLightingElement</h3>
4586 The <a class="idlinterface" href="#InterfaceSVGFESpecularLightingElement">SVGFESpecularLightingElement</a> interface corresponds to the
4587 <a href="#feSpecularLightingElement"><span class="element-name">‘feSpecularLighting’</span></a> element.
4588 <pre class="idl">interface <b>SVGFESpecularLightingElement</b> : ::svg::SVGElement,
4589 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
4590 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a> <a href="#__svg__SVGFESpecularLightingElement__in1">in1</a>;
4591 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFESpecularLightingElement__surfaceScale">surfaceScale</a>;
4592 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFESpecularLightingElement__specularConstant">specularConstant</a>;
4593 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFESpecularLightingElement__specularExponent">specularExponent</a>;
4594 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFESpecularLightingElement__kernelUnitLengthX">kernelUnitLengthX</a>;
4595 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFESpecularLightingElement__kernelUnitLengthY">kernelUnitLengthY</a>;
4596 };</pre><dl class="interface"><dt>Attributes:</dt><dd><dl class="attributes">
4597 <dt id="__svg__SVGFESpecularLightingElement__in1"><b>in1</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a>)</span></dt><dd><div>
4598 Corresponds to attribute <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a> on the given <a href="#feSpecularLightingElement"><span class="element-name">‘feSpecularLighting’</span></a>
4599 element.
4600 </div></dd>
4601 <dt id="__svg__SVGFESpecularLightingElement__surfaceScale"><b>surfaceScale</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4602 Corresponds to attribute <a href="#feSpecularLightingSurfaceScaleAttribute"><span class="attr-name">‘surfaceScale’</span></a> on the given
4603 <a href="#feSpecularLightingElement"><span class="element-name">‘feSpecularLighting’</span></a> element.
4604 </div></dd>
4605 <dt id="__svg__SVGFESpecularLightingElement__specularConstant"><b>specularConstant</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4606 Corresponds to attribute <a href="#feSpecularLightingSpecularConstantAttribute"><span class="attr-name">‘specularConstant’</span></a> on the given
4607 <a href="#feSpecularLightingElement"><span class="element-name">‘feSpecularLighting’</span></a> element.
4608 </div></dd>
4609 <dt id="__svg__SVGFESpecularLightingElement__specularExponent"><b>specularExponent</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4610 Corresponds to attribute <a href="#feSpecularLightingSpecularExponentAttribute"><span class="attr-name">‘specularExponent’</span></a> on the given
4611 <a href="#feSpecularLightingElement"><span class="element-name">‘feSpecularLighting’</span></a> element.
4612 </div></dd>
4613 <dt id="__svg__SVGFESpecularLightingElement__kernelUnitLengthX"><b>kernelUnitLengthX</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4614 Corresponds to attribute <a href="#feSpecularLightingKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a> on the given
4615 <a href="#feSpecularLightingElement"><span class="element-name">‘feSpecularLighting’</span></a> element.
4616 </div></dd>
4617 <dt id="__svg__SVGFESpecularLightingElement__kernelUnitLengthY"><b>kernelUnitLengthY</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4618 Corresponds to attribute <a href="#feSpecularLightingKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a> on the given
4619 <a href="#feSpecularLightingElement"><span class="element-name">‘feSpecularLighting’</span></a> element.
4620 </div></dd></dl></dd></dl>
4623 <h3 id="InterfaceSVGFETileElement">33.27 Interface SVGFETileElement</h3>
4627 The <a class="idlinterface" href="#InterfaceSVGFETileElement">SVGFETileElement</a> interface corresponds to the
4628 <a href="#feTileElement"><span class="element-name">‘feTile’</span></a> element.
4629 <pre class="idl">interface <b>SVGFETileElement</b> : ::svg::SVGElement,
4630 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
4631 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a> <a href="#__svg__SVGFETileElement__in1">in1</a>;
4632 };</pre><dl class="interface"><dt>Attributes:</dt><dd><dl class="attributes">
4633 <dt id="__svg__SVGFETileElement__in1"><b>in1</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a>)</span></dt><dd><div>
4634 Corresponds to attribute <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a> on the given <a href="#feTileElement"><span class="element-name">‘feTile’</span></a>
4635 element.
4636 </div></dd></dl></dd></dl>
4639 <h3 id="InterfaceSVGFETurbulenceElement">33.28 Interface SVGFETurbulenceElement</h3>
4643 The <a class="idlinterface" href="#InterfaceSVGFETurbulenceElement">SVGFETurbulenceElement</a> interface corresponds to the
4644 <a href="#feTurbulenceElement"><span class="element-name">‘feTurbulence’</span></a> element.
4645 <pre class="idl">interface <b>SVGFETurbulenceElement</b> : ::svg::SVGElement,
4646 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
4648 // Turbulence Types
4649 const unsigned short <a href="#__svg__SVGFETurbulenceElement__SVG_TURBULENCE_TYPE_UNKNOWN">SVG_TURBULENCE_TYPE_UNKNOWN</a> = 0;
4650 const unsigned short <a href="#__svg__SVGFETurbulenceElement__SVG_TURBULENCE_TYPE_FRACTALNOISE">SVG_TURBULENCE_TYPE_FRACTALNOISE</a> = 1;
4651 const unsigned short <a href="#__svg__SVGFETurbulenceElement__SVG_TURBULENCE_TYPE_TURBULENCE">SVG_TURBULENCE_TYPE_TURBULENCE</a> = 2;
4653 // Stitch Options
4654 const unsigned short <a href="#__svg__SVGFETurbulenceElement__SVG_STITCHTYPE_UNKNOWN">SVG_STITCHTYPE_UNKNOWN</a> = 0;
4655 const unsigned short <a href="#__svg__SVGFETurbulenceElement__SVG_STITCHTYPE_STITCH">SVG_STITCHTYPE_STITCH</a> = 1;
4656 const unsigned short <a href="#__svg__SVGFETurbulenceElement__SVG_STITCHTYPE_NOSTITCH">SVG_STITCHTYPE_NOSTITCH</a> = 2;
4658 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFETurbulenceElement__baseFrequencyX">baseFrequencyX</a>;
4659 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFETurbulenceElement__baseFrequencyY">baseFrequencyY</a>;
4660 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedInteger">SVGAnimatedInteger</a> <a href="#__svg__SVGFETurbulenceElement__numOctaves">numOctaves</a>;
4661 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFETurbulenceElement__seed">seed</a>;
4662 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a> <a href="#__svg__SVGFETurbulenceElement__stitchTiles">stitchTiles</a>;
4663 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a> <a href="#__svg__SVGFETurbulenceElement__type">type</a>;
4664 };</pre><dl class="interface"><dt>Constants in group “Turbulence Types”:</dt><dd><dl class="constants">
4665 <dt id="__svg__SVGFETurbulenceElement__SVG_TURBULENCE_TYPE_UNKNOWN"><b>SVG_TURBULENCE_TYPE_UNKNOWN</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
4666 The type is not one of predefined types. It is invalid to attempt to
4667 define a new value of this type or to attempt to switch an existing
4668 value to this type.
4670 </div></dd>
4671 <dt id="__svg__SVGFETurbulenceElement__SVG_TURBULENCE_TYPE_FRACTALNOISE"><b>SVG_TURBULENCE_TYPE_FRACTALNOISE</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
4672 Corresponds to value <span class="attr-value">'fractalNoise'</span>.
4674 </div></dd>
4675 <dt id="__svg__SVGFETurbulenceElement__SVG_TURBULENCE_TYPE_TURBULENCE"><b>SVG_TURBULENCE_TYPE_TURBULENCE</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
4676 Corresponds to value <span class="attr-value">'turbulence'</span>.
4678 </div></dd></dl></dd><dt>Constants in group “Stitch Options”:</dt><dd><dl class="constants">
4679 <dt id="__svg__SVGFETurbulenceElement__SVG_STITCHTYPE_UNKNOWN"><b>SVG_STITCHTYPE_UNKNOWN</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
4680 The type is not one of predefined types. It is invalid to attempt to
4681 define a new value of this type or to attempt to switch an existing
4682 value to this type.
4684 </div></dd>
4685 <dt id="__svg__SVGFETurbulenceElement__SVG_STITCHTYPE_STITCH"><b>SVG_STITCHTYPE_STITCH</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
4686 Corresponds to value <span class="attr-value">'stitch'</span>.
4688 </div></dd>
4689 <dt id="__svg__SVGFETurbulenceElement__SVG_STITCHTYPE_NOSTITCH"><b>SVG_STITCHTYPE_NOSTITCH</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
4690 Corresponds to value <span class="attr-value">'noStitch'</span>.
4692 </div></dd></dl></dd><dt>Attributes:</dt><dd><dl class="attributes">
4693 <dt id="__svg__SVGFETurbulenceElement__baseFrequencyX"><b>baseFrequencyX</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4694 Corresponds to attribute <a href="#feTurbulenceBaseFrequencyAttribute"><span class="attr-name">‘baseFrequency’</span></a> on the given
4695 <a href="#feTurbulenceElement"><span class="element-name">‘feTurbulence’</span></a> element. Contains the X component of the
4696 <a href="#feTurbulenceBaseFrequencyAttribute"><span class="attr-name">‘baseFrequency’</span></a> attribute.
4697 </div></dd>
4698 <dt id="__svg__SVGFETurbulenceElement__baseFrequencyY"><b>baseFrequencyY</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4699 Corresponds to attribute <a href="#feTurbulenceBaseFrequencyAttribute"><span class="attr-name">‘baseFrequency’</span></a> on the given
4700 <a href="#feTurbulenceElement"><span class="element-name">‘feTurbulence’</span></a> element. Contains the Y component of the
4701 (possibly computed automatically) <a href="#feTurbulenceBaseFrequencyAttribute"><span class="attr-name">‘baseFrequency’</span></a> attribute.
4702 </div></dd>
4703 <dt id="__svg__SVGFETurbulenceElement__numOctaves"><b>numOctaves</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedInteger">SVGAnimatedInteger</a>)</span></dt><dd><div>
4704 Corresponds to attribute <a href="#feTurbulenceNumOctavesAttribute"><span class="attr-name">‘numOctaves’</span></a> on the given
4705 <a href="#feTurbulenceElement"><span class="element-name">‘feTurbulence’</span></a> element.
4706 </div></dd>
4707 <dt id="__svg__SVGFETurbulenceElement__seed"><b>seed</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd><div>
4708 Corresponds to attribute <a href="#feTurbulenceSeedAttribute"><span class="attr-name">‘seed’</span></a> on the given
4709 <a href="#feTurbulenceElement"><span class="element-name">‘feTurbulence’</span></a> element.
4710 </div></dd>
4711 <dt id="__svg__SVGFETurbulenceElement__stitchTiles"><b>stitchTiles</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a>)</span></dt><dd><div>
4712 Corresponds to attribute <a href="#feTurbulenceStitchTilesAttribute"><span class="attr-name">‘stitchTiles’</span></a> on the given
4713 <a href="#feTurbulenceElement"><span class="element-name">‘feTurbulence’</span></a> element. Takes one of the SVG_STITCHTYPE_*
4714 constants defined on this interface.
4715 </div></dd>
4716 <dt id="__svg__SVGFETurbulenceElement__type"><b>type</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a>)</span></dt><dd><div>
4717 Corresponds to attribute <a href="#feTurbulenceTypeAttribute"><span class="attr-name">‘type’</span></a> on the given
4718 <a href="#feTurbulenceElement"><span class="element-name">‘feTurbulence’</span></a> element. Takes one of the SVG_TURBULENCE_TYPE_*
4719 constants defined on this interface.
4720 </div></dd></dl></dd></dl>
4723 <h3 id="InterfaceSVGFEDropShadowElement">33.29 Interface SVGFEDropShadowElement</h3>
4727 The <a class="idlinterface" href="#InterfaceSVGFEDropShadowElement">SVGFEDropShadowElement</a> interface corresponds to the
4728 <a href="#feDropShadowElement"><span class="element-name">‘feDropShadow’</span></a> element.
4729 <pre class="idl">interface <b>SVGFEDropShadowElement</b> : ::svg::SVGElement,
4730 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
4731 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a> <a href="#__svg__SVGFEDropShadowElement__in1">in1</a>;
4732 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFEDropShadowElement__dx">dx</a>;
4733 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFEDropShadowElement__dy">dy</a>;
4734 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFEDropShadowElement__stdDeviationX">stdDeviationX</a>;
4735 readonly attribute <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a> <a href="#__svg__SVGFEDropShadowElement__stdDeviationY">stdDeviationY</a>;
4736 };</pre><dl class="interface"><dt>Attributes:</dt><dd><dl class="attributes">
4737 <dt id="__svg__SVGFEDropShadowElement__in1"><b>in1</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedString">SVGAnimatedString</a>)</span></dt><dd> </dd>
4738 <dt id="__svg__SVGFEDropShadowElement__dx"><b>dx</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd> </dd>
4739 <dt id="__svg__SVGFEDropShadowElement__dy"><b>dy</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd> </dd>
4740 <dt id="__svg__SVGFEDropShadowElement__stdDeviationX"><b>stdDeviationX</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd> </dd>
4741 <dt id="__svg__SVGFEDropShadowElement__stdDeviationY"><b>stdDeviationY</b><span class="idl-type-parenthetical"> (readonly <a class="idlinterface" href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#InterfaceSVGAnimatedNumber">SVGAnimatedNumber</a>)</span></dt><dd> </dd></dl></dd></dl>
4744 <h2 id="references1">34 References</h2>
4745 <h3 id="normref">34.1 Normative References</h3>
4746 <dl><dt id="ref-CSS21"><strong class="normref">[CSS21]</strong></dt><dd><strong>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</strong>,
4747 Bert Bos, Tantek Çelik, Ian Hickson, Håkon Wium Lie, eds.,
4748 W3C, 23 April 2009, (Candidate Recommendation) </dd><dt id="ref-NVDL"><strong class="normref">[NVDL]</strong></dt><dd><strong>Document Schema Definition Languages (DSDL) — Part 4:
4749 Namespace-based Validation Dispatching Language — NVDL. ISO/IEC FCD
4750 19757-4</strong>, See <a href="http://www.asahi-net.or.jp/~eb2m-mrt/dsdl/">http://www.asahi-net.or.jp/~eb2m-mrt/dsdl/</a>
4751 </dd><dt id="ref-PORTERDUFF"><strong class="normref">[PORTERDUFF]</strong></dt><dd><strong>Compositing Digital Images</strong>, T. Porter, T. Duff,
4752 SIGGRAPH '84 Conference Proceedings, Association for Computing
4753 Machinery, Volume 18, Number 3, July 1984. </dd><dt id="ref-SVG-COMPOSITING"><strong class="normref">[SVG-COMPOSITING]</strong></dt><dd>
4754 <cite class="w3cwd"><a href="http://www.w3.org/TR/2009/WD-SVGCompositing-20090430/">SVG Compositing Specification</a></cite>,
4755 A. Grasso, ed.
4756 World Wide Web Consortium, 30 April 2009.
4757 <br/>This edition of SVG Compositing is http://www.w3.org/TR/2009/WD-SVGCompositing-20090430/.
4758 <br/>The <a href="http://www.w3.org/TR/SVGCompositing/">latest edition of SVG Compositing</a> is available at
4759 http://www.w3.org/TR/SVGCompositing/.
4760 </dd><dt id="ref-RNG"><strong class="normref">[RelaxNG]</strong></dt><dd><strong>Document Schema Definition Languages (DSDL) — Part 2:
4761 Regular grammar- based validation — RELAX NG. ISO/IEC FDIS
4762 19757-2:2002(E)</strong>, J. Clark, <span class="ruby"><span lang="ja" class="rb">村田 真</span> <span class="rp">(</span><span class="rt"><span class="familyname">Murata</span> M.</span><span class="rp">)</span></span>, eds., 12 December 2002. See <a href="http://www.y12.doe.gov/sgml/sc34/document/0362_files/relaxng-is.pdf">http://www.y12.doe.gov/sgml/sc34/document/0362_files/relaxng-is.pdf</a>
4763 </dd><dt id="ref-Schema2"><strong class="normref">[Schema2]</strong></dt><dd><strong>XML Schema Part 2: Datatypes Second Edition</strong>, P.
4764 Biron, A. Malhotra, eds. W3C, 28 October 2004 (Recommendation). Latest
4765 version available at <a href="http://www.w3.org/TR/xmlschema-2/">http://www.w3.org/TR/xmlschema-2/</a>.
4766 See also <a href="http://www.w3.org/TR/2005/NOTE-xml11schema10-20050511/">Processing
4767 XML 1.1 documents with XML Schema 1.0 processors</a>. </dd><dt id="ref-svg11"><strong class="normref">[SVG11]</strong></dt><dd><strong>Scalable Vector Graphics (SVG) 1.1 Specification</strong>,
4768 Dean Jackson editor, W3C, 14 January 2003 (Recommendation). See <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/">http://www.w3.org/TR/2003/REC-SVG11-20030114/</a>
4769 </dd><dt id="ref-svgt12"><strong class="normref">[SVGT12]</strong></dt><dd><strong>Scalable Vector Graphics (SVG) Tiny 1.2 Specification</strong>,
4770 Dean Jackson editor, W3C, 22 December 2008 (Recommendation). See <a href="http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/">http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/</a>
4771 </dd></dl>
4773 <h3 id="informref">34.2 Informative References</h3>
4774 <dl><dt id="ref-html5"><strong class="informref">[HTML5]</strong></dt><dd><strong>HTML5</strong>, Ian Hickson editor, Google,
4775 10 June 2008 (Working Draft). See <a href="http://www.w3.org/TR/2008/WD-html5-20080610/">http://www.w3.org/TR/2008/WD-html5-20080610/</a>
4776 </dd></dl>
4778 <h2 id="changes">35 Changes</h2>
4779 <p>For changes since the last published draft, see the public <a href="http://dev.w3.org/cvsweb/SVG/modules/filters/publish/">cvs log</a>.</p>
4780 <script src="style/expanders.js" type="text/javascript"> </script></body></html>
