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

dino@11 1 <!--
dino@11 2 Filter Effects 1.0
dino@11 3
dino@11 4 $Id$
dino@11 5
dino@11 6 Note: This document is generated from ../master/Filters.html.
dino@11 7 Run "make" from ../master/ to regenerate it.
dino@11 8 -->
dino@11 9
dino@11 10 <!DOCTYPE html
dino@11 11 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
dino@11 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>
dino@11 13
dino@11 14 <div class="head">
dino@11 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>
dino@11 16 <h1 id="pagetitle">Filter Effects 1.0: Language</h1>
dino@36 17 <h2 id="pagesubtitle">W3C Editor’s Draft <em>07 September 2011</em></h2>
dino@11 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>
dino@11 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>
dino@11 20 </div>
dino@11 21
dino@11 22 <hr/>
dino@11 23
dino@11 24 <h2 id="abstract">Abstract</h2>
dino@11 25
dino@11 26 <p>
dino@13 27 Filter effects are a way of processing an element's display before it is
dino@13 28 displayed in the document. Typically, rendering an element via CSS or SVG
dino@13 29 can conceptually described as if the element, including its children, are
dino@13 30 drawn into a buffer (such as a raster image) and then that buffer is
dino@13 31 composited into the elements parent. Filters apply an effect before the
dino@13 32 compositing stage. Examples of such effects are blurring, changing color
dino@13 33 intensity and warping the image.
dino@11 34 </p>
dino@13 35
dino@11 36 <p>
dino@13 37 Although originally designed for use in SVG, filter effects simply define
dino@13 38 a set of operations to apply on an image buffer. In SVG they are triggered
dino@13 39 by a style instruction (the 'filter property' property), and have very little
dino@13 40 specific to an SVG environment. This specification describes filters in
dino@13 41 a manner that allow them to be used in other presentational environments,
dino@33 42 such as HTML styled by CSS and XSL:FO. It also defines a CSS property
dino@33 43 value function that allows a filter chain to produce a CSS &lt;image&gt; value.
dino@11 44 </p>
dino@11 45
dino@11 46 <h2 id="status">Status of This Document</h2>
dino@11 47
dino@11 48 <p><em>This section describes the status of this document at the time of its
dino@11 49 publication. Other documents may supersede this document. The latest status
dino@11 50 of this document series is maintained at the W3C. </em> </p>
dino@11 51
dino@13 52 <p>
dino@13 53 This document is the first public working draft of this specification. There
dino@13 54 is an accompanying <a href="http://dev.w3.org/SVG/modules/filters/publish/SVGFilterPrimer.html">Filter Effects 1.0, Part 1:
dino@13 55 Primer</a> that lists the ways SVG filters may be used.
dino@11 56 </p>
dino@11 57
dino@11 58 <p>
dino@13 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
dino@13 60 <a href="http://www.w3.org/Interaction/">W3C Interaction Domain</a>.
dino@11 61 </p>
dino@11 62
dino@13 63 <p>
dino@13 64 The (<a href="http://lists.w3.org/Archives/Public/public-fx/">archived</a>)
dino@13 65 public mailing list <a href="mailto:www-style@w3.org?Subject=%5Bfilters%5D%20PUT%20SUBJECT%20HERE">
dino@13 66 public-fx@w3.org</a> (see <a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
dino@13 67 discussion of this specification. Acceptance of the archiving policy is
dino@13 68 requested automatically upon first post to the list. When sending e-mail,
dino@13 69 please put the text “filters” in the subject, preferably like
dino@13 70 this: “[filters] <em>summary of
dino@13 71 comment</em>”
dino@13 72 </p>
dino@13 73
dino@13 74 <p>
dino@13 75 The latest information regarding <a href="http://www.w3.org/Graphics/SVG/Disclosures">patent disclosures</a>
dino@13 76 related to this document is available on the Web. As of this publication,
dino@13 77 the SVG Working Group are not aware of any royalty-bearing patents they
dino@13 78 believe to be essential to SVG. <span class="note">[@@ Add patent link for CSS WG]</span>
dino@13 79 </p>
dino@13 80
dino@13 81 <p>
dino@13 82 Publication of this document does not imply endorsement by the W3C
dino@13 83 membership. A list of current W3C Recommendations and other technical
dino@13 84 documents can be found at <a href="http://www.w3.org/TR/">http://www.w3.org/TR/</a>. W3C publications may
dino@13 85 be updated, replaced, or obsoleted by other documents at any time. It is
dino@13 86 inappropriate to cite a W3C Working Draft as anything other than a <em>work
dino@13 87 in progress</em>."
dino@13 88 </p>
dino@11 89
dino@11 90 <p>
dino@11 91 The <a href="ChangeLog">list of changes made to this specification</a> is
dino@11 92 available.
dino@11 93 </p>
dino@11 94
dino@11 95 <ul class="toc">
dino@11 96 <li><a href="#introduction">1 Introduction</a></li>
dino@11 97 <li><a href="#FilterDefinitions">2 Definitions</a></li>
dino@13 98 <li><a href="#FilterProperty">3 The <span class="prop-name">‘filter’</span>
dino@13 99 property</a><ul class="toc">
dino@13 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>
dino@13 101 <li><a href="#FilterFunction">4 Filter Functions</a></li>
dino@13 102 <li><a href="#FilterElement">5 The <span class="element-name">‘filter’</span>
dino@11 103 element</a></li>
ed@14 104 <li><a href="#FilterEffectsRegion">6 Filter effects region</a></li>
dino@13 105 <li><a href="#AccessBackgroundImage">7 Accessing the background image</a><ul class="toc">
dino@13 106 <li><a href="#AccessBackgroundImageSVG">7.1 Accessing the background image in SVG</a></li></ul></li>
dino@13 107 <li><a href="#FilterPrimitivesOverview">8 Filter primitives overview</a><ul class="toc">
dino@13 108 <li><a href="#FilterPrimitivesOverviewIntro">8.1 Overview</a></li>
dino@13 109 <li><a href="#CommonAttributes">8.2 Common attributes</a></li>
dino@13 110 <li><a href="#FilterPrimitiveSubRegion">8.3 Filter primitive subregion</a></li></ul></li>
dino@13 111 <li><a href="#LightSourceDefinitions">9 Light source elements and properties</a><ul class="toc">
dino@13 112 <li><a href="#LightSourceIntro">9.1 Introduction</a></li>
dino@13 113 <li><a href="#feDistantLightElement">9.2 Light source <span class="element-name">‘feDistantLight’</span></a></li>
dino@13 114 <li><a href="#fePointLightElement">9.3 Light source <span class="element-name">‘fePointLight’</span></a></li>
dino@13 115 <li><a href="#feSpotLightElement">9.4 Light source <span class="element-name">‘feSpotLight’</span></a></li>
dino@13 116 <li><a href="#LightingColorProperty">9.5 The <span class="prop-name">‘lighting-color’</span> property</a></li></ul></li>
dino@13 117 <li><a href="#feBlendElement">10 Filter primitive <span class="element-name">‘feBlend’</span></a></li>
dino@13 118 <li><a href="#feColorMatrixElement">11 Filter primitive <span class="element-name">‘feColorMatrix’</span></a></li>
dino@13 119 <li><a href="#feComponentTransferElement">12 Filter primitive <span class="element-name">‘feComponentTransfer’</span></a></li>
dino@13 120 <li><a href="#feCompositeElement">13 Filter primitive <span class="element-name">‘feComposite’</span></a></li>
dino@13 121 <li><a href="#feConvolveMatrixElement">14 Filter primitive <span class="element-name">‘feConvolveMatrix’</span></a></li>
dino@13 122 <li><a href="#feDiffuseLightingElement">15 Filter primitive <span class="element-name">‘feDiffuseLighting’</span></a></li>
dino@13 123 <li><a href="#feDisplacementMapElement">16 Filter primitive <span class="element-name">‘feDisplacementMap’</span></a></li>
dino@13 124 <li><a href="#feFloodElement">17 Filter primitive <span class="element-name">‘feFlood’</span></a></li>
dino@13 125 <li><a href="#feGaussianBlurElement">18 Filter primitive <span class="element-name">‘feGaussianBlur’</span></a></li>
dino@13 126 <li><a href="#feUnsharpMaskElement">19 Filter primitive <span class="element-name">‘feUnsharpMask’</span></a></li>
dino@13 127 <li><a href="#feImageElement">20 Filter primitive <span class="element-name">‘feImage’</span></a></li>
dino@13 128 <li><a href="#feMergeElement">21 Filter primitive <span class="element-name">‘feMerge’</span></a></li>
dino@13 129 <li><a href="#feMorphologyElement">22 Filter primitive <span class="element-name">‘feMorphology’</span></a></li>
dino@13 130 <li><a href="#feOffsetElement">23 Filter primitive <span class="element-name">‘feOffset’</span></a></li>
dino@13 131 <li><a href="#feSpecularLightingElement">24 Filter primitive <span class="element-name">‘feSpecularLighting’</span></a></li>
dino@13 132 <li><a href="#feTileElement">25 Filter primitive <span class="element-name">‘feTile’</span></a></li>
dino@13 133 <li><a href="#feTurbulenceElement">26 Filter primitive <span class="element-name">‘feTurbulence’</span></a></li>
dino@13 134 <li><a href="#feDropShadowElement">27 Filter primitive <span class="element-name">‘feDropShadow’</span></a></li>
dino@13 135 <li><a href="#feDiffuseSpecularElement">28 Filter primitive <span class="element-name">‘feDiffuseSpecular’</span></a></li>
dino@13 136 <li><a href="#feCustomElement">29 Filter primitive <span class="element-name">‘feCustom’</span></a></li>
dino@33 137 <li><a href="#FilterCSSImageValue">30 The filter CSS &lt;image&gt; value</a></li>
dino@33 138 <li><a href="#RelaxNG">31 RelaxNG Schema for Filter Effects 1.0</a></li>
dino@33 139 <li><a href="#ShorthandEquivalents">32 Shorthands defined in terms of the <span class="element-name">‘filter’</span> element</a><ul class="toc">
dino@33 140 <li><a href="#grayscaleEquivalent">32.1 grayscale</a></li>
dino@33 141 <li><a href="#sepiaEquivalent">32.2 sepia</a></li>
dino@33 142 <li><a href="#saturateEquivalent">32.3 saturate</a></li>
dino@33 143 <li><a href="#huerotateEquivalent">32.4 hue-rotate</a></li>
dino@33 144 <li><a href="#invertEquivalent">32.5 invert</a></li>
dino@36 145 <li><a href="#opacityEquivalent">32.6 opacity</a></li>
dino@36 146 <li><a href="#gammaEquivalent">32.7 gamma</a></li>
dino@36 147 <li><a href="#blurEquivalent">32.8 blur</a></li>
dino@36 148 <li><a href="#sharpenEquivalent">32.9 sharpen</a></li>
dino@36 149 <li><a href="#dropshadowEquivalent">32.10 drop-shadow</a></li></ul></li>
dino@33 150 <li><a href="#DOMInterfaces">33 DOM interfaces</a><ul class="toc">
dino@33 151 <li><a href="#InterfaceImageData">33.1 Interface ImageData</a></li>
dino@33 152 <li><a href="#InterfaceSVGFilterElement">33.2 Interface SVGFilterElement</a></li>
dino@33 153 <li><a href="#InterfaceSVGFilterPrimitiveStandardAttributes">33.3 Interface SVGFilterPrimitiveStandardAttributes</a></li>
dino@33 154 <li><a href="#InterfaceSVGFEBlendElement">33.4 Interface SVGFEBlendElement</a></li>
dino@33 155 <li><a href="#InterfaceSVGFEColorMatrixElement">33.5 Interface SVGFEColorMatrixElement</a></li>
dino@33 156 <li><a href="#InterfaceSVGFEComponentTransferElement">33.6 Interface SVGFEComponentTransferElement</a></li>
dino@33 157 <li><a href="#InterfaceSVGComponentTransferFunctionElement">33.7 Interface SVGComponentTransferFunctionElement</a></li>
dino@33 158 <li><a href="#InterfaceSVGFEFuncRElement">33.8 Interface SVGFEFuncRElement</a></li>
dino@33 159 <li><a href="#InterfaceSVGFEFuncGElement">33.9 Interface SVGFEFuncGElement</a></li>
dino@33 160 <li><a href="#InterfaceSVGFEFuncBElement">33.10 Interface SVGFEFuncBElement</a></li>
dino@33 161 <li><a href="#InterfaceSVGFEFuncAElement">33.11 Interface SVGFEFuncAElement</a></li>
dino@33 162 <li><a href="#InterfaceSVGFECompositeElement">33.12 Interface SVGFECompositeElement</a></li>
dino@33 163 <li><a href="#InterfaceSVGFEConvolveMatrixElement">33.13 Interface SVGFEConvolveMatrixElement</a></li>
dino@33 164 <li><a href="#InterfaceSVGFEDiffuseLightingElement">33.14 Interface SVGFEDiffuseLightingElement</a></li>
dino@33 165 <li><a href="#InterfaceSVGFEDistantLightElement">33.15 Interface SVGFEDistantLightElement</a></li>
dino@33 166 <li><a href="#InterfaceSVGFEPointLightElement">33.16 Interface SVGFEPointLightElement</a></li>
dino@33 167 <li><a href="#InterfaceSVGFESpotLightElement">33.17 Interface SVGFESpotLightElement</a></li>
dino@33 168 <li><a href="#InterfaceSVGFEDisplacementMapElement">33.18 Interface SVGFEDisplacementMapElement</a></li>
dino@33 169 <li><a href="#InterfaceSVGFEFloodElement">33.19 Interface SVGFEFloodElement</a></li>
dino@33 170 <li><a href="#InterfaceSVGFEGaussianBlurElement">33.20 Interface SVGFEGaussianBlurElement</a></li>
dino@33 171 <li><a href="#InterfaceSVGFEImageElement">33.21 Interface SVGFEImageElement</a></li>
dino@33 172 <li><a href="#InterfaceSVGFEMergeElement">33.22 Interface SVGFEMergeElement</a></li>
dino@33 173 <li><a href="#InterfaceSVGFEMergeNodeElement">33.23 Interface SVGFEMergeNodeElement</a></li>
dino@33 174 <li><a href="#InterfaceSVGFEMorphologyElement">33.24 Interface SVGFEMorphologyElement</a></li>
dino@33 175 <li><a href="#InterfaceSVGFEOffsetElement">33.25 Interface SVGFEOffsetElement</a></li>
dino@33 176 <li><a href="#InterfaceSVGFESpecularLightingElement">33.26 Interface SVGFESpecularLightingElement</a></li>
dino@33 177 <li><a href="#InterfaceSVGFETileElement">33.27 Interface SVGFETileElement</a></li>
dino@33 178 <li><a href="#InterfaceSVGFETurbulenceElement">33.28 Interface SVGFETurbulenceElement</a></li>
dino@33 179 <li><a href="#InterfaceSVGFEDropShadowElement">33.29 Interface SVGFEDropShadowElement</a></li></ul></li>
dino@33 180 <li><a href="#references1">34 References</a><ul class="toc">
dino@33 181 <li><a href="#normref">34.1 Normative References</a></li>
dino@33 182 <li><a href="#informref">34.2 Informative References</a></li></ul></li>
dino@33 183 <li><a href="#changes">35 Changes</a></li></ul>
dino@11 184
dino@11 185 <h2 id="introduction">1 Introduction</h2>
dino@11 186
dino@13 187 <p>
dino@13 188 This chapter describes a declarative filter effects feature set, which when
dino@13 189 combined with the other web technologies, such as SVG or HTML, can describe
dino@13 190 much of the common artwork on the Web in such a way that client-side
dino@13 191 generation and alteration can be performed easily. In addition, the ability
dino@13 192 to apply filter effects to elements helps to maintain the semantic
dino@13 193 structure of the document, instead of resorting to images which aside from
dino@13 194 generally being a fixed resolution tend to obscure the original semantics of
dino@13 195 the elements they replace. This is especially true for effects applied to
dino@13 196 text.
dino@11 197 </p>
dino@11 198
dino@11 199 <p>
dino@11 200
dino@11 201 </p>
dino@11 202
dino@13 203 <p>
dino@13 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
dino@13 205 implementation. <span class="note">Add link to conformance classes
dino@13 206 here.</span>
dino@11 207 </p>
dino@11 208
dino@13 209 <p>This document is normative.</p>
dino@11 210
dino@11 211 <p>This document contains explicit conformance criteria that overlap with
dino@13 212 some RelaxNG definitions in requirements. If there is any conflict between the
dino@11 213 two, the explicit conformance criteria are the definitive reference. </p>
dino@11 214
dino@11 215 <p>A filter effect consists of a series of graphics operations that are
dino@11 216 applied to a given <span id="TermSourceGraphic" class="SVG-Term">source graphic</span> to produce a modified graphical
dino@11 217 result. The result of the filter effect is rendered to the target device
dino@11 218 instead of the original source graphic. The following illustrates the
dino@11 219 process:</p>
dino@11 220
dino@11 221 <p><object data="examples/filters00.svg" type="image/svg+xml" height="78" width="400">
dino@13 222 <img alt="Image showing source graphic transformed by filter effect" src="examples/filters00.png" width="401" height="78"/>
dino@11 223 </object></p>
dino@11 224 <p class="view-as-svg"><a href="examples/filters00.svg">View this example as
dino@11 225 SVG (SVG-enabled browsers only)</a><br/>
dino@13 226 </p>
dino@11 227
dino@11 228 <h2 id="FilterDefinitions">2 Definitions</h2>
dino@11 229 <p>When used in this specification, terms have the meanings assigned in this section.</p>
dino@11 230 <dl><dt id="TermNullFilter"><span class="SVG-TermDefine">null filter</span></dt><dd>
dino@11 231 <p>
dino@11 232 The null filter output is all transparent black pixels. If applied to an element it means
dino@11 233 that the element (and children if any) becomes invisible. Note that it does not affect event processing.
dino@11 234 </p>
dino@11 235 </dd><dt id="TermTransferFunctionElements"><span class="SVG-TermDefine">transfer function elements</span></dt><dd>
dino@11 236 <p>
dino@11 237 The set of elements,
dino@11 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.
dino@11 239 </p>
dino@11 240 </dd><dt id="TermClientBoundingRect"><span class="SVG-TermDefine">bounding client rect</span></dt><dd>
dino@11 241 <p>
dino@11 242 The union of all CSS border-boxes for the element if formatted by CSS, as defined by the CSS OM method
dino@11 243 <a href="http://www.w3.org/TR/cssom-view/#dom-element-getboundingclientrect">getBoundingClientRect</a> [<a href="#ref-CSSOM">CSSOM</a>].
dino@11 244 </p>
dino@13 245 </dd><dt id="TermCSSBoundingBox"><span class="SVG-TermDefine">CSS bounding box</span></dt><dd>
dino@11 246 <p>
dino@11 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>].
dino@11 248 </p>
dino@13 249 </dd><dt id="TermCurrentUserCoordinateSystem"><span class="SVG-TermDefine">current user coordinate system</span></dt><dd>
dino@11 250 <p>
dino@11 251 For elements formatted by CSS: the current user coordinate system has its origin at the top-left corner of the
dino@11 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
dino@11 253 <a href="#TermClientBoundingRect">bounding client rect</a>.
dino@11 254 </p>
dino@11 255 <p>
dino@11 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>.
dino@11 257 </p>
dino@13 258 </dd><dt id="TermObjectBoundingBoxUnits"><span class="SVG-TermDefine">object bounding box units</span></dt><dd>
dino@11 259 For elements formatted by CSS: the bounding box is defined by <a href="#TermCSSBoundingBox">the CSS bounding box.</a>
dino@11 260 <p>
dino@11 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>.
dino@11 262 </p>
dino@11 263 <p>
dino@11 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>.
dino@11 265 </p>
dino@13 266 </dd><dt id="TermFilterPrimitiveReference"><span class="SVG-TermDefine">&lt;filter-primitive-reference&gt;</span></dt><dd>
dino@13 267 <p>
dino@11 268 A string that identifies a particular filter primitive's output.
dino@11 269 </p>
dino@13 270 </dd><dt id="TermFilterPrimitiveElements"><span class="SVG-TermDefine">filter primitives, filter primitive elements</span></dt><dd>
dino@11 271 <p>
dino@13 272 The set of elements that control the output of a <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element, particularly:
dino@13 273 <a href="#feDistantLightElement"><span class="element-name">‘feDistantLight’</span></a>,
dino@13 274 <a href="#fePointLightElement"><span class="element-name">‘fePointLight’</span></a>,
dino@13 275 <a href="#feSpotLightElement"><span class="element-name">‘feSpotLight’</span></a>,
dino@13 276 <a href="#feBlendElement"><span class="element-name">‘feBlend’</span></a>,
dino@13 277 <a href="#feColorMatrixElement"><span class="element-name">‘feColorMatrix’</span></a>,
dino@13 278 <a href="#feComponentTransferElement"><span class="element-name">‘feComponentTransfer’</span></a>,
dino@13 279 <a href="#feCompositeElement"><span class="element-name">‘feComposite’</span></a>,
dino@13 280 <a href="#feConvolveMatrixElement"><span class="element-name">‘feConvolveMatrix’</span></a>,
dino@13 281 <a href="#feDiffuseLightingElement"><span class="element-name">‘feDiffuseLighting’</span></a>,
dino@13 282 <a href="#feDisplacementMapElement"><span class="element-name">‘feDisplacementMap’</span></a>,
dino@13 283 <a href="#feFloodElement"><span class="element-name">‘feFlood’</span></a>,
dino@13 284 <a href="#feGaussianBlurElement"><span class="element-name">‘feGaussianBlur’</span></a>,
dino@13 285 <a href="#feImageElement"><span class="element-name">‘feImage’</span></a>,
dino@13 286 <a href="#feMergeElement"><span class="element-name">‘feMerge’</span></a>,
dino@13 287 <a href="#feMorphologyElement"><span class="element-name">‘feMorphology’</span></a>,
dino@13 288 <a href="#feOffsetElement"><span class="element-name">‘feOffset’</span></a>,
dino@13 289 <a href="#feSpecularLightingElement"><span class="element-name">‘feSpecularLighting’</span></a>,
dino@13 290 <a href="#feTileElement"><span class="element-name">‘feTile’</span></a>,
dino@13 291 <a href="#feTurbulenceElement"><span class="element-name">‘feTurbulence’</span></a>,
dino@13 292 <a href="#feDropShadowElement"><span class="element-name">‘feDropShadow’</span></a>,
dino@13 293 <a href="#feDiffuseSpecular"><span class="element-name">‘feDiffuseSpecular’</span></a>,
dino@11 294 <a href="#feUnsharpMaskElement"><span class="element-name">‘feUnsharpMask’</span></a>,
dino@13 295 <a href="#feCustom"><span class="element-name">‘feCustom’</span></a>.
dino@11 296 </p>
dino@13 297 </dd></dl>
dino@11 298 <br/>
dino@11 299
dino@13 300 <h2 id="FilterProperty">3 The <span class="prop-name">‘filter’</span>
dino@13 301 property</h2>
dino@13 302
dino@13 303 <p>The description of the <span class="prop-name">‘filter’</span> property is
dino@13 304 as follows:</p>
dino@13 305
dino@13 306 <div class="propdef">
dino@13 307 <dl><dt id="propdef-filter"><span class="propdef-title prop-name">‘filter’</span></dt><dd>
dino@13 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">&lt;filter-function&gt;</a> [ <a href="#FilterFunction">&lt;filter-function&gt;</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>
dino@13 309 </dd></dl>
dino@13 310 </div>
dino@13 311
dino@13 312 <p>
dino@13 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
dino@13 314 is no filter effect applied. Otherwise, the list of functions (described <a href="#FilterFunction">below</a>)
dino@13 315 are applied in order.
dino@13 316 </p>
dino@13 317
dino@13 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>
dino@13 319 <p>
dino@13 320 The application of the <a href="#FilterProperty"><span class="prop-name">‘filter’</span></a> property to an element
dino@13 321 formatted by CSS establishes a pseudo-stacking-context the same way that CSS
dino@13 322 <a href="http://www.w3.org/TR/css3-color/#transparency">'opacity'</a> does,
dino@13 323 and all the element's boxes are rendered together as a group with the filter
dino@13 324 effect applied to the group as a whole.
dino@13 325 </p>
dino@13 326 <p>
dino@13 327 The <a href="#FilterProperty"><span class="prop-name">‘filter’</span></a> property has no effect on the geometry of the
dino@13 328 target element's CSS boxes, even though <a href="#FilterProperty"><span class="prop-name">‘filter’</span></a> can cause
dino@13 329 painting outside of an element's border-box.
dino@13 330 </p>
dino@13 331 <p>
dino@13 332 The compositing model follows the <a href="http://www.w3.org/TR/SVG11/render.html#Introduction">SVG compositing
dino@13 333 model</a>: first any filter effect is applied, then any clipping, masking
dino@13 334 and opacity. These effects all apply after any other CSS effects such as
dino@13 335 'border'. As per SVG, the application of <a href="#FilterProperty"><span class="prop-name">‘filter’</span></a> has no
dino@13 336 effect on hit-testing.
dino@13 337 </p>
dino@13 338
dino@13 339 <br/>
dino@13 340
dino@13 341 <h2 id="FilterFunction">4 Filter Functions</h2>
dino@13 342
dino@13 343 <p>
dino@13 344 The value of the <a href="#FilterProperty"><span class="prop-name">‘filter’</span></a> property is a list of &lt;filter-functions&gt;
dino@13 345 applied in the order provided. The individual filter functions are
dino@13 346 separated by whitespace. The set of allowed filter functions is given
dino@13 347 below.
dino@13 348 </p>
dino@13 349
dino@13 350 <dl><dt>
ed@21 351 <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeFuncIRI">&lt;FuncIRI&gt;</a>
dino@13 352 </dt><dd>
ed@21 353 An <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermIRIReference"><span class="svg-term">IRI reference</span></a>
dino@13 354 to a <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element that defines the
dino@13 355 filter effect. For example "url(commonfilters.xml#large-blur)". If the IRI references a non-existent object or the referenced
dino@13 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.
dino@13 357 </dd><dt>
dino@13 358 grayscale(amount)
dino@13 359 </dt><dd>
dino@13 360 Converts the input image to grayscale. The value of 'amount' defines the proportion
dino@13 361 of the conversion. A value of 1 is completely grayscale. A value of 0 leaves the
dino@13 362 input unchanged. Values between 0 and 1 are linear multipliers on the effect.
dino@13 363 If the 'amount' parameter is missing, a value of 1 is used.
dino@13 364 The markup equivalent of this function is <a href="#grayscaleEquivalent">given below</a>.
dino@13 365 </dd><dt>
dino@13 366 sepia(amount)
dino@13 367 </dt><dd>
dino@13 368 Converts the input image to sepia. The value of 'amount' defines the proportion
dino@13 369 of the conversion. A value of 1 is completely sepia. A value of 0 leaves the
dino@13 370 input unchanged. Values between 0 and 1 are linear multipliers on the effect.
dino@13 371 If the 'amount' parameter is missing, a value of 1 is used.
dino@13 372 The markup equivalent of this function is <a href="#sepiaEquivalent">given below</a>.
dino@13 373 </dd><dt>
dino@13 374 saturate(amount)
dino@13 375 </dt><dd>
dino@13 376 Saturates the input image. The value of 'amount' defines the proportion
dino@13 377 of the conversion. A value of 1 is completely saturated. A value of 0 leaves the
dino@13 378 input unchanged. Values between 0 and 1 are linear multipliers on the effect.
dino@13 379 If the 'amount' parameter is missing, a value of 1 is used.
dino@13 380 The markup equivalent of this function is <a href="#saturateEquivalent">given below</a>.
dino@13 381 </dd><dt>
dino@13 382 hue-rotate(angle)
dino@13 383 </dt><dd>
dino@13 384 Applies a hue rotation on the input image. The value of 'angle' defines the
dino@13 385 number of degrees around the color circle the input samples will be adjusted.
dino@13 386 A value of 0 leaves the input unchanged. If the 'angle' parameter is missing,
dino@13 387 a value of 0 is used.
dino@13 388 The markup equivalent of this function is <a href="#huerotateEquivalent">given below</a>.
dino@13 389 </dd><dt>
dino@13 390 invert(amount)
dino@13 391 </dt><dd>
dino@13 392 Inverts the samples in the input image. The value of 'amount' defines the proportion
dino@13 393 of the conversion. A value of 1 is completely inverted. A value of 0 leaves the
dino@13 394 input unchanged. Values between 0 and 1 are linear multipliers on the effect.
dino@13 395 If the 'amount' parameter is missing, a value of 1 is used.
dino@13 396 The markup equivalent of this function is <a href="#invertEquivalent">given below</a>.
dino@13 397 </dd><dt>
dino@36 398 opacity(amount)
dino@36 399 </dt><dd>
dino@36 400 Applies transparency to the samples in the input image. The value of 'amount' defines the proportion
dino@36 401 of the conversion. A value of 1 is completely transparent. A value of 0 leaves the
dino@36 402 input unchanged. Values between 0 and 1 are linear multipliers on the effect.
dino@36 403 This is equivalent to multiplying the input image samples by (1 - amount).
dino@36 404 If the 'amount' parameter is missing, a value of 1 is used.
dino@36 405 The markup equivalent of this function is <a href="#opacityEquivalent">given below</a>.
dino@36 406 </dd><dt>
dino@35 407 gamma(amplitude exponent offset)
dino@13 408 </dt><dd>
dino@13 409 Applies a gamma function to the input image.
dino@13 410 The value of 'amplitude' defines the multiplier to the gamma function.
dino@13 411 The value of 'exponent' defines the exponent of the gamma function.
dino@13 412 The value of 'offset' defines the offset of the gamma function.
dino@13 413 If any of the parameters are missing, the default value for 'amplitude'
dino@13 414 is 1, for 'exponent' is 1, and for 'offset' is 0.
dino@13 415 The markup equivalent of this function is <a href="#gammaEquivalent">given below</a>.
dino@13 416 </dd><dt>
dino@35 417 blur(radiusX radiusY)
dino@13 418 </dt><dd>
dino@13 419 Applies a Gaussian blur to the input image.
dino@33 420 The value of 'radiusX' defines the X value of the standard deviation to the Gaussian function.
dino@33 421 The value of 'radiusY' defines the Y value of the standard deviation to the Gaussian function.
dino@13 422 If one parameter is provided, then that value is used for both 'radiusX' and 'radiusY'.
dino@13 423 If no parameters are provided, then the value for both attributes is 0.
dino@13 424 The markup equivalent of this function is <a href="#blurEquivalent">given below</a>.
dino@13 425 </dd><dt>
dino@35 426 sharpen(amount radius threshold)
dino@13 427 </dt><dd>
dino@13 428 Applies an sharpening effect to the input image. This is equivalent to subtracting the
dino@13 429 input samples from a blurred version of the image.
dino@13 430 The value of 'amount' defines the proportion of the effect (as a multiplier on the
dino@13 431 subtraction). A value of 1 applies the effect completely. A value of 0 leaves the
dino@13 432 input unchanged.
dino@33 433 The value of 'radius' defines the value of the standard deviation to the Gaussian function.
dino@13 434 The value of 'threshold' defines a point at which the function will not be applied.
dino@13 435 If the 'threshold' parameter is not provided, then its value is 1. If the 'radius' parameter
dino@13 436 is not provided, then its value is 0. If no parameters are provided, then the value for 'amount' is 0.
dino@35 437 The markup equivalent of this function is <a href="#sharpenEquivalent">given below</a>.
dino@33 438 </dd><dt>
dino@35 439 drop-shadow(&lt;shadow&gt;)
dino@33 440 </dt><dd>
dino@35 441 Applies a drop shadow effect to the input image. A drop shadow is
dino@35 442 effectively a blurred, offset version of the input image's alpha mask
dino@35 443 drawn in a particular color, composited below the image. The function
dino@35 444 accepts a parameter of type &lt;shadow&gt; (defined in CSS3 Backgrounds),
dino@35 445 with the exception that the 'inset' keyword is not allowed. The markup
dino@35 446 equivalent of this function is <a href="#dropshadowEquivalent">given
dino@35 447 below</a>.
dino@13 448 </dd></dl>
dino@13 449
dino@13 450 <div class="note">
dino@13 451 <p>
dino@13 452 The above list is a collection of effects that can be easily defined in
dino@13 453 terms of SVG filters. However, there are many more interesting effects
dino@13 454 that can be considered for inclusion. If accepted, there will have to
dino@13 455 be equivalent XML elements for the effect. Effects considered include:
dino@13 456 </p>
dino@13 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>
dino@13 458 </div>
dino@13 459
dino@13 460 <p>
dino@13 461 The first function in the list takes the element (<a href="#SourceGraphic">SourceGraphic</a>) as
dino@13 462 the input image. Subsequent operations take the output from the
dino@13 463 previous function as the input image. The exception is the function
dino@13 464 that references a 'filter element' element, which can specify an
dino@13 465 alternate input, but still uses the previous output as its
dino@13 466 <a href="#SourceGraphic">SourceGraphic</a>.
dino@13 467 </p>
dino@13 468
dino@13 469 <h2 id="FilterElement">5 The <span class="element-name">‘filter’</span>
dino@11 470 element</h2>
dino@11 471
dino@11 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:
ed@15 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>
dino@11 474
dino@11 475
dino@11 476
dino@11 477 <p>The description of the <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element
dino@11 478 follows:</p>
dino@11 479
dino@11 480 <div class="adef-list">
dino@11 481 <p><em>Attribute definitions:</em></p>
dino@11 482 <dl><dt id="FilterElementFilterUnitsAttribute"><span class="adef">filterUnits</span> = "<em>userSpaceOnUse</em> |
dino@11 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> |
dino@11 484 <em>objectBoundingBox</em>"</dt><dd>Specifies the coordinate system for the various length values within
dino@11 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/>
dino@11 486 If <span class="attr-value">primitiveUnits="userSpaceOnUse"</span>, any length values
dino@11 487 within the filter definitions represent values in the <a href="#TermCurrentUserCoordinateSystem">current user
dino@11 488 coordinate system</a> in place at the time when the <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
dino@11 489 element is referenced (i.e., the user coordinate system for the element
dino@11 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>
dino@11 491 property).<br/>
dino@11 492 If <span class="attr-value">primitiveUnits="objectBoundingBox"</span>, then any length
dino@11 493 values within the filter definitions represent fractions or percentages
dino@11 494 of the bounding box on the referencing element (see <a href="#TermObjectBoundingBoxUnits">object bounding box
dino@11 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">&lt;number-optional-number&gt;</a> value
dino@13 496 this number is expanded out before the <a href="#FilterElementPrimitiveUnitsAttribute"><span class="attr-name">‘primitiveUnits’</span></a> computation takes place.
dino@13 497 <br/>
ed@17 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/>
dino@11 499 <span class="anim-target">Animatable: yes.</span></dd><dt id="FilterElementXAttribute">
dino@11 500 <span class="adef">x</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeCoordinate">&lt;coordinate&gt;</a></em>"</dt><dd>See <a href="#FilterEffectsRegion"><span class="svg-term">filter effects region</span></a>.</dd><dt id="FilterElementYAttribute">
dino@11 501 <span class="adef">y</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeCoordinate">&lt;coordinate&gt;</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> =
dino@11 502 "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeLength">&lt;length&gt;</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> =
ed@14 503 "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeLength">&lt;length&gt;</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">&lt;number-optional-number&gt;</a></em>"
dino@11 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>
ed@17 505 = "<span class="attr-value">&lt;IRI&gt;</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>
dino@11 506 to another <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element within
dino@11 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
dino@11 508 the referenced <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element which
dino@11 509 are not defined on this element are inherited by this element. If this
dino@11 510 element has no defined filter nodes, and the referenced element has
dino@11 511 defined filter nodes (possibly due to its own <span class="attr-name">href</span> attribute), then this element inherits
dino@11 512 the filter nodes defined from the referenced <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element. Inheritance can be
dino@11 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
dino@11 514 filter node specification due to its own <span class="attr-name">href</span> attribute, then the current element can
ed@25 515 inherit those attributes or filter node specifications.
dino@11 516
dino@11 517 <div class="note">
dino@11 518 This attribute is deprecated and should not be used, it's included for
dino@11 519 backwards compatibility reasons only.</div>
dino@11 520 <br/>
dino@11 521 <span class="anim-target">Animatable: yes.</span></dd></dl>
dino@11 522 </div>
dino@11 523
dino@11 524 <p>Properties inherit into the <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
dino@11 525 element from its ancestors; properties do <em>not</em> inherit from the
dino@11 526 element referencing the <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
dino@11 527 element.</p>
dino@11 528
dino@11 529 <p><a href="#FilterElement"><span class="element-name">‘filter’</span></a> elements are never rendered
dino@11 530 directly; their only usage is as something that can be referenced using the
dino@11 531 <a href="#FilterProperty"><span class="prop-name">‘filter’</span></a>
dino@11 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
dino@11 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
dino@11 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
dino@11 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
dino@11 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
dino@11 537 to <span class="prop-value">none</span>.</p>
dino@11 538 <br/>
dino@11 539
dino@13 540 <h2 id="FilterEffectsRegion">6 Filter effects region</h2>
dino@11 541
dino@11 542 <p>A <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
dino@11 543 element can define a region on the canvas to which a given filter effect
dino@11 544 applies and can provide a resolution for any intermediate continuous tone
dino@11 545 images used to process any raster-based <a href="#TermFilterPrimitiveElements"><span class="svg-term">filter primitives</span></a>.
dino@11 546
dino@11 547 The <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
dino@11 548 element has the following attributes which work together to define the filter
dino@11 549 effects region:</p>
dino@11 550
dino@11 551 <dl class="definitions unemphasized-names"><dt id="FilterUnitsAttribute"><a href="#FilterElementFilterUnitsAttribute"><span class="attr-name">‘filterUnits’</span></a></dt><dd>
dino@13 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>,
dino@13 553 <a href="#FilterElementWidthAttribute"><span class="attr-name">‘width’</span></a>, <a href="#FilterElementHeightAttribute"><span class="attr-name">‘height’</span></a>.</p>
dino@11 554
dino@13 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>,
dino@13 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
dino@13 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
dino@13 558 user coordinate system for the element referencing the <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
dino@13 559 element via a <a href="#FilterProperty"><span class="prop-name">‘filter’</span></a> property).</p>
dino@13 560
dino@13 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>,
dino@13 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
dino@13 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>
dino@13 564
dino@13 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>
dino@13 566
dino@13 567 <p><span class="anim-target">Animatable: yes.</span></p>
dino@13 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>
dino@13 569 <p>These attributes define a rectangular region on the canvas to which this filter applies.</p>
dino@13 570 <p>The amount of memory and processing time required to apply the filter are
dino@13 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>
dino@13 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>
dino@13 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>
dino@13 574 included with a given <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element; thus, if the effect of
dino@13 575 a given filter primitive would extend beyond the bounds of the rectangle
dino@13 576 (this sometimes happens when using a <a href="#feGaussianBlurElement"><span class="element-name">‘feGaussianBlur’</span></a> filter primitive with a
dino@13 577 very large <a href="#feGaussianBlurStdDeviationAttribute"><span class="attr-name">‘stdDeviation’</span></a>), parts of the effect will get clipped.</p>
dino@11 578
dino@13 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>
dino@13 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>
dino@13 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
dino@13 582 referenced the filter. </p>
dino@13 583
dino@13 584 <p><span class="anim-target">Animatable: yes.</span></p>
dino@13 585 </dd><dt id="FilterRegionFilterRes"><a href="#FilterElementFilterResAttribute"><span class="attr-name">‘filterRes’</span></a></dt><dd>
dino@13 586 <p>Defines the width and height of the intermediate
ed@25 587 images in pixels. If not provided, then the user agent will use reasonable
ed@25 588 values to produce a high-quality result on the output device.</p>
ed@25 589
dino@13 590 <p>Care should be taken when assigning a non-default value to this
dino@13 591 attribute. Too small of a value may result in unwanted pixelation in the
dino@13 592 result. Too large of a value may result in slow processing and large
dino@13 593 memory usage.</p>
ed@25 594
ed@25 595 <p>Non-integer values are truncated, i.e rounded to the closest integer value towards zero.</p>
ed@25 596
dino@13 597 <p><span class="requirement" id="assert_OORFilterRegion">Negative or zero values disable rendering of the element which referenced the filter.</span></p>
dino@13 598 <p><span class="anim-target">Animatable: yes.</span></p>
dino@13 599 </dd></dl>
dino@11 600
dino@11 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
dino@11 602 coordinate system has its X-axis and Y-axis each parallel to the X-axis and
dino@11 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
dino@11 604 the filter will be applied.</p>
dino@11 605
dino@11 606 <p class="note implementation">Sometimes implementers can achieve faster performance when the filter
dino@11 607 region can be mapped directly to device pixels; thus, for best performance on
dino@11 608 display devices, it is suggested that authors define their region such that
ed@23 609 the user agent can align the <a href="#FilterEffectsRegion"><span class="svg-term">filter region</span></a> pixel-for-pixel with the
dino@11 610 background. In particular, for best filter effects performance, avoid
dino@11 611 rotating or skewing the user coordinate system. Explicit values for attribute
dino@11 612 <a href="#FilterElementFilterResAttribute"><span class="attr-name">‘filterRes’</span></a> can either help or harm performance.
dino@11 613 If <a href="#FilterElementFilterResAttribute"><span class="attr-name">‘filterRes’</span></a> is smaller than the automatic
dino@11 614 (i.e., default) filter resolution, then filter effect might have faster
dino@11 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.,
dino@11 616 default) filter resolution, then filter effects performance will usually be
dino@11 617 slower.</p>
dino@11 618
dino@11 619 <p class="note authoring">It is often necessary to provide padding space because the filter effect
dino@11 620 might impact bits slightly outside the tight-fitting on a given
dino@11 621 object. For these purposes, it is possible to provide negative percentage
dino@11 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
dino@11 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
dino@11 624 the filter effects region are <span class="attr-value">x="-10%" y="-10%" width="120%"
dino@11 625 height="120%"</span>.</p>
dino@11 626
dino@13 627 <h2 id="AccessBackgroundImage">7 Accessing the background image</h2>
dino@11 628
dino@11 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
ed@23 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
dino@11 631 is invoked. <a href="#BackgroundImage"><span class="attr-value">BackgroundImage</span></a> represents both
dino@11 632 the color values and alpha channel of the canvas (i.e., RGBA pixel values),
dino@11 633 whereas <a href="#BackgroundAlpha"><span class="attr-value">BackgroundAlpha</span></a> represents only the
dino@11 634 alpha channel.</p>
dino@11 635
dino@11 636 <p>Implementations
dino@11 637 will often need to maintain supplemental background image buffers in order to
dino@11 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,
dino@11 639 the background image buffers will contain an in-memory copy of the
dino@11 640 accumulated painting operations on the current canvas.</p>
dino@11 641
dino@11 642 <p>Because in-memory image buffers can take up significant system resources,
dino@11 643 content must explicitly indicate to the
dino@11 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.
dino@11 645 </p>
dino@11 646
dino@11 647 A background image is what's been <i>rendered before</i> the current element.
dino@11 648 For SVG, that uses the painter's algorithm, <i>rendered before</i> means
dino@11 649 all of the prior elements in pre order traversal previous to the element to
dino@11 650 which the filter is applied.
dino@11 651
dino@11 652 <p>The property which enables access to the background image is
dino@11 653 <a href="#EnableBackgroundProperty"><span class="prop-name">‘enable-background’</span></a>:</p>
dino@11 654
dino@11 655
dino@11 656 <div class="propdef">
dino@11 657 <dl><dt id="EnableBackgroundProperty"><span class="propdef-title prop-name">‘enable-background’</span></dt><dd>
dino@33 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.
dino@11 659 language is responsible for defining the applicable set of
dino@11 660 elements.
dino@11 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>
dino@11 662 </dd></dl>
dino@11 663 </div>
dino@11 664 <p><a href="#EnableBackgroundProperty"><span class="prop-name">‘enable-background’</span></a> is only
dino@11 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>
dino@11 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
dino@11 667 of the background image.</p>
dino@11 668
dino@11 669 <p>A value of <strong>new</strong> indicates two things:</p>
dino@11 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>
dino@11 671 element to access the background image.</li><li>It indicates that a new (i.e., initially transparent black) background
dino@11 672 image canvas is established and that (in effect) all children of the
dino@11 673 current <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermGraphicsElement"><span class="svg-term">container element</span></a>
dino@11 674 element shall be rendered into the new background image canvas in
dino@11 675 addition to being rendered onto the target device.</li></ul>
dino@11 676
dino@11 677 <p>A meaning of <span class="attr-value">enable-background: accumulate</span> (the
dino@11 678 initial/default value) depends on context:</p>
dino@11 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>
dino@11 680 element has a property value of <span class="attr-value">'enable-background:new'</span>, then all
dino@11 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>
dino@11 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>
dino@11 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
dino@11 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>
dino@11 685 the renderable elements onto the target device. (No need to render to the
dino@11 686 background image canvas.)</li></ul>
dino@11 687
dino@11 688 <p>If a filter effect specifies either the <a href="#BackgroundImage"><span class="attr-value">BackgroundImage</span></a> or the
dino@13 689 <a href="#BackgroundAlpha"><span class="attr-value">BackgroundAlpha</span></a> pseudo input images and no
dino@11 690 ancestor <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermGraphicsElement"><span class="svg-term">container element</span></a>
dino@11 691 element has a property value of <span class="attr-value">'enable-background:new'</span>, then the background
dino@11 692 image request is technically in error. Processing will proceed without
dino@11 693 interruption (i.e., no error message) and a transparent black image shall be
dino@11 694 provided in response to the request.</p>
dino@11 695
dino@13 696 <h3 id="AccessBackgroundImageSVG">7.1 Accessing the background image in SVG</h3>
dino@11 697 <p>This section only applies to the SVG definition of enable-background.</p>
dino@11 698
dino@11 699 <p>Assume you have an element E in the document and that E has a series of
dino@11 700 ancestors A<sub>1</sub> (its immediate parent), A<sub>2</sub>, etc. (Note:
dino@11 701 A<sub>0</sub> is E.) Each ancestor A<sub>i</sub> will have a corresponding
dino@11 702 temporary background image offscreen buffer BUF<sub>i</sub>. The contents of
dino@11 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
dino@11 704 follows:</p>
dino@11 705 <ul><li>Find the element A<sub>i</sub> with the smallest subscript i (including
dino@11 706 A<sub>0</sub>=E) for which the <a href="#EnableBackgroundProperty"><span class="prop-name">‘enable-background’</span></a> property has the value
dino@11 707 <span class="prop-value">new</span>. (Note: if there is no such ancestor
dino@11 708 element, then there is no background image available to E, in which case
dino@11 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
dino@11 710 transparent black. Render all children of A<sub>i</sub> up to but not
dino@11 711 including A<sub>i-1</sub> into BUF<sub>i</sub>. The children are painted,
dino@11 712 then filtered, clipped, masked and composited using the various painting,
dino@11 713 filtering, clipping, masking and object opacity settings on the given
dino@11 714 child. Any filter effects, masking and group opacity that might be set on
dino@11 715 A<sub>i</sub> do <em>not</em> apply when rendering the children of
dino@11 716 A<sub>i</sub> into BUF<sub>i</sub>.<br/>
dino@11 717 (Note that for the case of A<sub>0</sub>=E, the graphical contents of E
dino@11 718 are not rendered into BUF<sub>1</sub> and thus are not part of the
dino@11 719 background image available to E. Instead, the graphical contents of E are
dino@11 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
dino@11 721 BUF<sub>i</sub> into BUF<sub>i+1</sub>.</li><li>The accumulated result (i.e., BUF<sub>n</sub>) represents the
dino@11 722 background image available to E.</li></ul>
dino@11 723
dino@11 724 <pre class="xml">&lt;?xml version="1.0" standalone="no"?&gt;
dino@11 725 &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
dino@11 726 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
dino@11 727 &lt;svg width="13.5cm" height="2.7cm" viewBox="0 0 1350 270"
dino@11 728 xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
dino@11 729 &lt;title&gt;Example enable-background01&lt;/title&gt;
dino@11 730 &lt;desc&gt;This test case shows five pictures which illustrate the rules
dino@11 731 for background image processing.&lt;/desc&gt;
dino@11 732
dino@11 733 &lt;defs&gt;
dino@11 734 &lt;filter id="ShiftBGAndBlur"
dino@11 735 filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="400"&gt;
dino@11 736 &lt;desc&gt;
dino@11 737 This filter discards the SourceGraphic, if any, and just produces
dino@11 738 a result consisting of the BackgroundImage shifted down 125 units
dino@11 739 and then blurred.
dino@11 740 &lt;/desc&gt;
dino@11 741 &lt;feOffset in="BackgroundImage" dx="0" dy="125" /&gt;
dino@11 742 &lt;feGaussianBlur stdDeviation="8" /&gt;
dino@11 743 &lt;/filter&gt;
dino@11 744 &lt;filter id="ShiftBGAndBlur_WithSourceGraphic"
dino@11 745 filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="400"&gt;
dino@11 746 &lt;desc&gt;
dino@11 747 This filter takes the BackgroundImage, shifts it down 125 units, blurs it,
dino@11 748 and then renders the SourceGraphic on top of the shifted/blurred background.
dino@11 749 &lt;/desc&gt;
dino@11 750 &lt;feOffset in="BackgroundImage" dx="0" dy="125" /&gt;
dino@11 751 &lt;feGaussianBlur stdDeviation="8" result="blur" /&gt;
dino@11 752 &lt;feMerge&gt;
dino@11 753 &lt;feMergeNode in="blur"/&gt;
dino@11 754 &lt;feMergeNode in="SourceGraphic"/&gt;
dino@11 755 &lt;/feMerge&gt;
dino@11 756 &lt;/filter&gt;
dino@11 757 &lt;/defs&gt;
dino@11 758
dino@11 759 &lt;g transform="translate(0,0)"&gt;
dino@11 760 &lt;desc&gt;The first picture is our reference graphic without filters.&lt;/desc&gt;
dino@11 761 &lt;rect x="25" y="25" width="100" height="100" fill="red"/&gt;
dino@11 762 &lt;g opacity=".5"&gt;
dino@11 763 &lt;circle cx="125" cy="75" r="45" fill="green"/&gt;
dino@11 764 &lt;polygon points="160,25 160,125 240,75" fill="blue"/&gt;
dino@11 765 &lt;/g&gt;
dino@11 766 &lt;rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/&gt;
dino@11 767 &lt;/g&gt;
dino@11 768
dino@11 769 &lt;g enable-background="new" transform="translate(270,0)"&gt;
dino@11 770 &lt;desc&gt;The second adds an empty 'g' element which invokes ShiftBGAndBlur.&lt;/desc&gt;
dino@11 771 &lt;rect x="25" y="25" width="100" height="100" fill="red"/&gt;
dino@11 772 &lt;g opacity=".5"&gt;
dino@11 773 &lt;circle cx="125" cy="75" r="45" fill="green"/&gt;
dino@11 774 &lt;polygon points="160,25 160,125 240,75" fill="blue"/&gt;
dino@11 775 &lt;/g&gt;
dino@11 776 &lt;g filter="url(#ShiftBGAndBlur)"/&gt;
dino@11 777 &lt;rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/&gt;
dino@11 778 &lt;/g&gt;
dino@11 779
dino@11 780 &lt;g enable-background="new" transform="translate(540,0)"&gt;
dino@11 781 &lt;desc&gt;The third invokes ShiftBGAndBlur on the inner group.&lt;/desc&gt;
dino@11 782 &lt;rect x="25" y="25" width="100" height="100" fill="red"/&gt;
dino@11 783 &lt;g filter="url(#ShiftBGAndBlur)" opacity=".5"&gt;
dino@11 784 &lt;circle cx="125" cy="75" r="45" fill="green"/&gt;
dino@11 785 &lt;polygon points="160,25 160,125 240,75" fill="blue"/&gt;
dino@11 786 &lt;/g&gt;
dino@11 787 &lt;rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/&gt;
dino@11 788 &lt;/g&gt;
dino@11 789
dino@11 790 &lt;g enable-background="new" transform="translate(810,0)"&gt;
dino@11 791 &lt;desc&gt;The fourth invokes ShiftBGAndBlur on the triangle.&lt;/desc&gt;
dino@11 792 &lt;rect x="25" y="25" width="100" height="100" fill="red"/&gt;
dino@11 793 &lt;g opacity=".5"&gt;
dino@11 794 &lt;circle cx="125" cy="75" r="45" fill="green"/&gt;
dino@11 795 &lt;polygon points="160,25 160,125 240,75" fill="blue"
dino@11 796 filter="url(#ShiftBGAndBlur)"/&gt;
dino@11 797 &lt;/g&gt;
dino@11 798 &lt;rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/&gt;
dino@11 799 &lt;/g&gt;
dino@11 800
dino@11 801 &lt;g enable-background="new" transform="translate(1080,0)"&gt;
dino@11 802 &lt;desc&gt;The fifth invokes ShiftBGAndBlur_WithSourceGraphic on the triangle.&lt;/desc&gt;
dino@11 803 &lt;rect x="25" y="25" width="100" height="100" fill="red"/&gt;
dino@11 804 &lt;g opacity=".5"&gt;
dino@11 805 &lt;circle cx="125" cy="75" r="45" fill="green"/&gt;
dino@11 806 &lt;polygon points="160,25 160,125 240,75" fill="blue"
dino@11 807 filter="url(#ShiftBGAndBlur_WithSourceGraphic)"/&gt;
dino@11 808 &lt;/g&gt;
dino@11 809 &lt;rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/&gt;
dino@11 810 &lt;/g&gt;
dino@11 811 &lt;/svg&gt;</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>
dino@11 812
dino@11 813 <p>The example above contains five parts, described as follows:</p>
dino@11 814 <ol><li>The first set is the reference graphic. The reference graphic consists
dino@11 815 of a red rectangle followed by a 50% transparent <span class="element-name">‘g’</span>
dino@11 816 element. Inside the <span class="element-name">‘g’</span>
dino@11 817 is a green circle that partially overlaps the rectangle and a a blue
dino@11 818 triangle that partially overlaps the circle. The three objects are then
dino@11 819 outlined by a rectangle stroked with a thin blue line. No filters are
dino@11 820 applied to the reference graphic.</li><li>The second set enables background image processing and adds an empty
dino@11 821 <span class="element-name">‘g’</span>
dino@11 822 element which invokes the ShiftBGAndBlur filter. This filter takes the
dino@11 823 current accumulated background image (i.e., the entire reference graphic)
dino@11 824 as input, shifts its offscreen down, blurs it, and then writes the result
dino@11 825 to the canvas. Note that the offscreen for the filter is initialized to
dino@11 826 transparent black, which allows the already rendered rectangle, circle
dino@11 827 and triangle to show through after the filter renders its own result to
dino@11 828 the canvas.</li><li>The third set enables background image processing and instead invokes
dino@11 829 the ShiftBGAndBlur filter on the inner <span class="element-name">‘g’</span>
dino@11 830 element. The accumulated background at the time the filter is applied
dino@11 831 contains only the red rectangle. Because the children of the inner <span class="element-name">‘g’</span>
dino@11 832 (i.e., the circle and triangle) are not part of the inner <span class="element-name">‘g’</span>
dino@11 833 element's background and because ShiftBGAndBlur ignores SourceGraphic,
dino@11 834 the children of the inner <span class="element-name">‘g’</span>
dino@11 835 do not appear in the result.</li><li>The fourth set enables background image processing and invokes the
dino@11 836 ShiftBGAndBlur on the <span class="element-name">‘polygon’</span>
dino@11 837 element that draws the triangle. The accumulated background at the time
dino@11 838 the filter is applied contains the red rectangle plus the green circle
dino@11 839 ignoring the effect of the <span class="prop-name">‘opacity’</span>
dino@11 840 property on the inner <span class="element-name">‘g’</span>
dino@11 841 element. (Note that the blurred green circle at the bottom does not let
dino@11 842 the red rectangle show through on its left side. This is due to ignoring
dino@11 843 the effect of the <span class="prop-name">‘opacity’</span>
dino@11 844 property.) Because the triangle itself is not part of the accumulated
dino@11 845 background and because ShiftBGAndBlur ignores SourceGraphic, the triangle
dino@11 846 does not appear in the result.</li><li>The fifth set is the same as the fourth except that filter
dino@11 847 ShiftBGAndBlur_WithSourceGraphic is invoked instead of ShiftBGAndBlur.
dino@11 848 ShiftBGAndBlur_WithSourceGraphic performs the same effect as
dino@11 849 ShiftBGAndBlur, but then renders the SourceGraphic on top of the shifted,
dino@11 850 blurred background image. In this case, SourceGraphic is the blue
dino@11 851 triangle; thus, the result is the same as in the fourth case except that
dino@11 852 the blue triangle now appears.</li></ol>
dino@11 853
dino@11 854
dino@13 855 <h2 id="FilterPrimitivesOverview">8 Filter primitives overview</h2>
dino@13 856
dino@13 857 <h3 id="FilterPrimitivesOverviewIntro">8.1 Overview</h3>
dino@11 858
dino@11 859 <p>This section describes the various filter primtives that can be assembled
dino@11 860 to achieve a particular filter effect.</p>
dino@11 861
dino@11 862 <p>Unless otherwise stated, all image filters operate on premultiplied RGBA
dino@11 863 samples. Filters which work more naturally on non-premultiplied data
dino@11 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
dino@11 865 premultiplication as specified. All raster effect filtering operations take 1
dino@11 866 to N input RGBA images, additional attributes as parameters, and produce a
dino@11 867 single output RGBA image.</p>
dino@11 868
dino@11 869 <p>The RGBA result from each filter primitive will be clamped into the
dino@11 870 allowable ranges for colors and opacity values. Thus, for example, the result
dino@11 871 from a given <a href="#TermFilterPrimitiveElement"><span class="svg-term">filter primitive</span></a> will have any negative color values or opacity
dino@11 872 values adjusted up to color/opacity of zero.</p>
dino@11 873
dino@11 874 <p id="filtersColorSpace">The color space in which a particular <a href="#TermFilterPrimitiveElement"><span class="svg-term">filter primitive</span></a> performs its
dino@11 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
dino@11 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
dino@11 877 other color operations. Because these two properties have different initial
dino@11 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
dino@11 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
dino@11 880 (e.g., when coordinating gradient interpolation with a filtering operation)
dino@11 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
dino@11 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>
dino@11 883
dino@11 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,
dino@11 885 filter primitive <a href="#feOffsetElement"><span class="element-name">‘feOffset’</span></a> can shift an image down and to the
dino@11 886 right, leaving undefined pixels at the top and left. In these cases, the
dino@11 887 undefined pixels are set to transparent black.</span></p>
dino@11 888
dino@13 889 <h3 id="CommonAttributes">8.2 Common attributes</h3>
dino@11 890
dino@11 891 <p>The following attributes are available for most of the filter
dino@11 892 primitives:</p>
dino@11 893
dino@11 894 <div class="adef-list">
dino@11 895 <p><em>Attribute definitions:</em></p>
dino@11 896 <dl><dt id="FilterPrimitiveXAttribute">
dino@11 897 <span class="adef">x</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeCoordinate">&lt;coordinate&gt;</a></em>"</dt><dd><p>The minimum x coordinate for the subregion which restricts
dino@11 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>
dino@13 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>
dino@13 900 <p><span class="anim-target">Animatable: yes.</span></p>
dino@13 901 </dd><dt id="FilterPrimitiveYAttribute">
dino@11 902 <span class="adef">y</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeCoordinate">&lt;coordinate&gt;</a></em>"</dt><dd><p>The minimum y coordinate for the subregion which restricts
dino@11 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>
dino@13 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>
dino@13 905 <p><span class="anim-target">Animatable: yes.</span></p>
dino@13 906 </dd><dt id="FilterPrimitiveWidthAttribute">
dino@11 907 <span class="adef">width</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeLength">&lt;length&gt;</a></em>"</dt><dd><p>The width of the subregion which restricts calculation and rendering
dino@11 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>
dino@11 909 <p>A negative or zero value disables the effect of the given filter
dino@11 910 primitive (i.e., the result is a transparent black image).</p>
dino@13 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>
dino@11 912 <p><span class="anim-target">Animatable: yes.</span></p>
dino@13 913 </dd><dt id="FilterPrimitiveHeightAttribute">
dino@11 914 <span class="adef">height</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeLength">&lt;length&gt;</a></em>"</dt><dd><p>The height of the subregion which restricts calculation and rendering
dino@11 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>
dino@11 916 <p>A negative or zero value disables the effect of the given filter
dino@11 917 primitive (i.e., the result is a transparent black image).</p>
dino@13 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>
dino@11 919 <p><span class="anim-target">Animatable: yes.</span></p>
dino@13 920 </dd><dt id="FilterPrimitiveResultAttribute">
dino@11 921 <span class="adef">result</span> =
dino@11 922 "<em><a href="#TermFilterPrimitiveReference">&lt;filter-primitive-reference&gt;</a></em>"</dt><dd><p>Assigned name for this <a href="#TermFilterPrimitiveElement"><span class="svg-term">filter primitive</span></a>. If supplied, then graphics
dino@11 923 that result from processing this <a href="#TermFilterPrimitiveElement"><span class="svg-term">filter primitive</span></a> can be referenced by
dino@11 924 an <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a> attribute on a subsequent filter
dino@11 925 primitive within the same <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element. If no value is
dino@11 926 provided, the output will only be available for re-use as the implicit
dino@11 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
dino@11 928 no value for its <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a> attribute.</p>
dino@11 929 <p>Note that a <a href="#TermFilterPrimitiveReference">&lt;filter-primitive-reference&gt;</a> is not an XML
dino@11 930 ID; instead, a <a href="#TermFilterPrimitiveReference">&lt;filter-primitive-reference&gt;</a> is only
dino@11 931 meaningful within a given <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element and thus have only
dino@11 932 local scope. It is legal for the same
dino@11 933 <a href="#TermFilterPrimitiveReference">&lt;filter-primitive-reference&gt;</a> to appear multiple times
dino@11 934 within the same <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element. When referenced, the
dino@11 935 <a href="#TermFilterPrimitiveReference">&lt;filter-primitive-reference&gt;</a> will use the closest
dino@11 936 preceding <a href="#TermFilterPrimitiveElement"><span class="svg-term">filter primitive</span></a> with the given result.</p>
dino@11 937 <p><span class="anim-target">Animatable: yes.</span></p>
dino@13 938 </dd><dt id="FilterPrimitiveInAttribute">
dino@11 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> |
dino@11 940 <a href="#TermFilterPrimitiveReference">&lt;filter-primitive-reference&gt;</a></em>"</dt><dd><p>Identifies input for the given filter primitive. The value can be
dino@11 941 either one of six keywords or can be a string which matches a previous
dino@11 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>
dino@11 943 element. If no value is provided and this is the first <a href="#TermFilterPrimitiveElement"><span class="svg-term">filter primitive</span></a>,
dino@13 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>
dino@11 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>,
dino@13 946 then this <a href="#TermFilterPrimitiveElement"><span class="svg-term">filter primitive</span></a> will use the result from the
dino@11 947 previous <a href="#TermFilterPrimitiveElement"><span class="svg-term">filter primitive</span></a> as its input.</p>
dino@11 948 <p>If the value for <span class="attr-name">result</span> appears
dino@11 949 multiple times within a given <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element, then a reference to
dino@11 950 that result will use the closest preceding <a href="#TermFilterPrimitiveElement"><span class="svg-term">filter primitive</span></a> with the
dino@11 951 given value for attribute <a href="filters.html#FilterPrimitiveResultAttribute"><span class="attr-name">‘result’</span></a>.
dino@11 952 Forward references to results are not allowed, and will be treated as
dino@11 953 if no result was specified. </p>
dino@11 954 <p>Definitions for the six keywords: </p>
dino@11 955 <dl><dt id="SourceGraphic"><span class="attr-value">SourceGraphic</span></dt><dd><p>This keyword represents the graphics elements
dino@11 956 that were the original input into the <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element. For raster
dino@11 957 effects <a href="#TermFilterPrimitiveElements"><span class="svg-term">filter primitives</span></a>, the graphics elements
dino@11 958 will be rasterized into an initially clear RGBA raster in image
dino@11 959 space. Pixels left untouched by the original graphic will be left
dino@11 960 clear. The image is specified to be rendered in linear RGBA
dino@11 961 pixels. The alpha channel of this image captures any
dino@11 962 anti-aliasing specified by SVG. (Since the raster is linear, the
dino@11 963 alpha channel of this image will represent the exact percent
dino@11 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
dino@11 965 that were the original input into the <a href="#FilterElement"><span class="element-name">‘filter’</span></a> element.
dino@13 966 <a href="#SourceAlpha"><span class="attr-value">SourceAlpha</span></a> has all of the same rules
dino@11 967 as <a href="#SourceGraphic"><span class="attr-value">SourceGraphic</span></a> except that only the
dino@11 968 alpha channel is used. The input image is an RGBA image
dino@11 969 consisting of implicitly black color values for the RGB channels,
dino@11 970 but whose alpha channel is the same as <a href="#SourceGraphic"><span class="attr-value">SourceGraphic</span></a>.</p>
dino@13 971 <p class="note implementation">If this option is
dino@11 972 used, then some implementations might need to rasterize the
dino@11 973 graphics elements
dino@11 974 in order to extract the alpha channel.</p>
dino@13 975 </dd><dt id="BackgroundImage"><span class="attr-value">BackgroundImage</span></dt><dd><p>This keyword represents an image snapshot of the canvas under
ed@23 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
dino@11 977 <a href="#AccessingBackgroundImage">accessing the background
dino@11 978 image</a>.</p>
dino@13 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
dino@11 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
dino@11 981 image</a>.</p>
dino@13 982 </dd><dt id="FillPaint"><span class="attr-value">FillPaint</span></dt><dd>
dino@11 983 <p>This keyword represents the target element <i>rendered filled</i>.</p>
dino@13 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>
dino@11 985 property on the target element for the filter effect.</p>
dino@11 986 <p>For non-SVG cases <a href="#FillPaint"><span class="attr-value">FillPaint</span></a> generates a transparent black image.
dino@11 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>
dino@11 988 </p>
dino@13 989 <p class="note authoring">Note that text is generally painted filled, not stroked.</p>
dino@13 990 <p>The <a href="#FillPaint"><span class="attr-value">FillPaint</span></a> image has conceptually infinite extent.
dino@13 991 Frequently this image is opaque everywhere, but it might not be if the "paint"
dino@13 992 itself has alpha, as in the case of a gradient or pattern which
dino@13 993 itself includes transparent or semi-transparent parts.</p>
dino@13 994 </dd><dt id="StrokePaint"><span class="attr-value">StrokePaint</span></dt><dd>
dino@13 995 <p>This keyword represents the target element <i>rendered stroked</i>.</p>
dino@11 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>
dino@11 997 on the target element for the filter effect.</p>
dino@11 998 <p>For non-SVG cases <a href="#StrokePaint"><span class="attr-value">StrokePaint</span></a> generates a transparent black image.
dino@11 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>
dino@11 1000 </p>
dino@13 1001 <p class="note authoring">Note that text is generally painted filled, not stroked.</p>
dino@13 1002 <p>The <a href="#StrokePaint"><span class="attr-value">StrokePaint</span></a> image has conceptually infinite extent.
dino@13 1003 Frequently this image is opaque everywhere, but it
dino@13 1004 might not be if the "paint"
dino@13 1005 itself has alpha, as in the case of a gradient or pattern which
dino@13 1006 itself includes transparent or semi-transparent parts.
dino@13 1007 </p>
dino@13 1008 </dd></dl>
dino@11 1009 <p><span class="anim-target">Animatable: yes.</span></p>
dino@13 1010 </dd></dl>
dino@11 1011 </div>
dino@11 1012
dino@13 1013 <h3 id="FilterPrimitiveSubRegion">8.3 Filter primitive subregion</h3>
dino@11 1014
dino@11 1015
dino@11 1016 <p>
dino@11 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>,
ed@14 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
dino@11 1019 together identify a subregion which restricts calculation and rendering of
dino@11 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>,
dino@11 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
dino@11 1022 according to the same rules as other <a href="#TermFilterPrimitiveElements"><span class="svg-term">filter primitives</span></a>' coordinate and length
dino@11 1023 attributes and thus represent values in the coordinate system established by
dino@11 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.
dino@11 1025 </p>
dino@11 1026
dino@11 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>,
dino@11 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
dino@11 1029 box) of the subregions defined for all referenced nodes. If there are no
dino@11 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
dino@11 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>,
dino@11 1032 <a href="#FillPaint"><span class="attr-value">FillPaint</span></a> or <a href="#StrokePaint"><span class="attr-value">StrokePaint</span></a>), or for
dino@11 1033 <a href="#feTileElement"><span class="element-name">‘feTile’</span></a>
dino@11 1034 (which is special because its principal function is to replicate the
dino@11 1035 referenced node in X and Y and thereby produce a usually larger result), the
ed@23 1036 default subregion is <span class="attr-value">0%, 0%, 100%, 100%</span>,
ed@23 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>,
ed@23 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>.
ed@23 1039 </p>
dino@11 1040
ed@14 1041 <p>If the <a href="#FilterPrimitiveSubRegion"><span class="svg-term">filter primitive
dino@11 1042 subregion</span></a> has a negative or zero width or height, the effect of the filter
dino@11 1043 primitive is disabled. </p>
dino@11 1044
ed@29 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
ed@29 1046 filter primitive's input image(s) and the filter primitive result.</p>
ed@29 1047 <p class="specissue">ISSUE: Consider making it possible to do select between clip-input, clip-output, clip-both or none.</p>
dino@11 1048
dino@11 1049 <p>All intermediate offscreens are defined to not exceed the intersection of
ed@23 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>.
ed@23 1051 The <a href="#FilterEffectsRegion"><span class="svg-term">filter region</span></a> and any of the filter primitive subregions are
dino@11 1052 to be set up such that all offscreens are made big enough to accommodate any
ed@23 1053 pixels which even partly intersect with either the <a href="#FilterEffectsRegion"><span class="svg-term">filter region</span></a> or the
dino@11 1054 filter primitive subregions.</p>
dino@11 1055
dino@11 1056 <p><a href="#feTileElement"><span class="element-name">‘feTile’</span></a> references a previous filter primitive and then stitches the tiles together
dino@11 1057 based on the <a href="#FilterPrimitiveSubRegion"><span class="svg-term">filter primitive subregion</span></a> of the referenced filter primitive in
dino@11 1058 order to fill its own <a href="#FilterPrimitiveSubRegion"><span class="svg-term">filter primitive subregion</span></a>.</p>
dino@11 1059
dino@11 1060 <pre class="xml">&lt;svg width="400" height="400" xmlns="http://www.w3.org/2000/svg"&gt;
dino@11 1061 &lt;defs&gt;
dino@11 1062 &lt;filter id="flood" x="0" y="0" width="100%" height="100%" primitiveUnits="objectBoundingBox"&gt;
dino@11 1063 &lt;feFlood x="25%" y="25%" width="50%" height="50%"
dino@11 1064 flood-color="green" flood-opacity="0.75"/&gt;
dino@11 1065 &lt;/filter&gt;
dino@11 1066 &lt;filter id="blend" primitiveUnits="objectBoundingBox"&gt;
dino@11 1067 &lt;feBlend x="25%" y="25%" width="50%" height="50%"
dino@11 1068 in2="SourceGraphic" mode="multiply"/&gt;
dino@11 1069 &lt;/filter&gt;
dino@11 1070 &lt;filter id="merge" primitiveUnits="objectBoundingBox"&gt;
dino@11 1071 &lt;feMerge x="25%" y="25%" width="50%" height="50%"&gt;
dino@11 1072 &lt;feMergeNode in="SourceGraphic"/&gt;
dino@11 1073 &lt;feMergeNode in="FillPaint"/&gt;
dino@11 1074 &lt;/feMerge&gt;
dino@11 1075 &lt;/filter&gt;
dino@11 1076 &lt;/defs&gt;
dino@11 1077
dino@11 1078 &lt;g fill="none" stroke="blue" stroke-width="4"&gt;
dino@11 1079 &lt;rect width="200" height="200"/&gt;
dino@11 1080 &lt;line x2="200" y2="200"/&gt;
dino@11 1081 &lt;line x1="200" y2="200"/&gt;
dino@11 1082 &lt;/g&gt;
dino@11 1083 &lt;circle fill="green" filter="url(#flood)" cx="100" cy="100" r="90"/&gt;
dino@11 1084
dino@11 1085 &lt;g transform="translate(200 0)"&gt;
dino@11 1086 &lt;g fill="none" stroke="blue" stroke-width="4"&gt;
dino@11 1087 &lt;rect width="200" height="200"/&gt;
dino@11 1088 &lt;line x2="200" y2="200"/&gt;
dino@11 1089 &lt;line x1="200" y2="200"/&gt;
dino@11 1090 &lt;/g&gt;
dino@11 1091 &lt;circle fill="green" filter="url(#blend)" cx="100" cy="100" r="90"/&gt;
dino@11 1092 &lt;/g&gt;
dino@11 1093
dino@11 1094 &lt;g transform="translate(0 200)"&gt;
dino@11 1095 &lt;g fill="none" stroke="blue" stroke-width="4"&gt;
dino@11 1096 &lt;rect width="200" height="200"/&gt;
dino@11 1097 &lt;line x2="200" y2="200"/&gt;
dino@11 1098 &lt;line x1="200" y2="200"/&gt;
dino@11 1099 &lt;/g&gt;
dino@11 1100 &lt;circle fill="green" fill-opacity="0.5" filter="url(#merge)" cx="100" cy="100" r="90"/&gt;
dino@11 1101 &lt;/g&gt;
dino@11 1102 &lt;/svg&gt;</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>
dino@11 1103
dino@11 1104 <p>
ed@23 1105 In the example above there are three rects that each have a cross and a circle in them.
ed@23 1106
ed@23 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>.
ed@23 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
ed@23 1109 themselves, just the rects that make up the <a href="#FilterPrimitiveSubRegion"><span class="svg-term">filter primitive subregion</span></a>.
dino@11 1110 </p>
dino@11 1111 <ul><li>
dino@11 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.
dino@11 1113 </li><li>
dino@11 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.
dino@11 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.
dino@11 1116 </li></ul>
dino@11 1117
dino@11 1118
dino@11 1119
dino@13 1120 <h2 id="LightSourceDefinitions">9 Light source elements and properties</h2>
dino@13 1121
dino@13 1122 <h3 id="LightSourceIntro">9.1 Introduction</h3>
dino@11 1123
dino@11 1124 <p>The following sections define the elements that define a light source, <a href="#feDistantLightElement"><span class="element-name">‘feDistantLight’</span></a>,
dino@11 1125 <a href="#fePointLightElement"><span class="element-name">‘fePointLight’</span></a> and <a href="#feSpotLightElement"><span class="element-name">‘feSpotLight’</span></a>,
dino@11 1126 and property <a href="#LightingColorProperty"><span class="prop-name">‘lighting-color’</span></a>, which defines the color of the
dino@11 1127 light.</p>
dino@11 1128
dino@13 1129 <h3 id="feDistantLightElement">9.2 Light source <span class="element-name">‘feDistantLight’</span></h3>
dino@11 1130
dino@11 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:
dino@11 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>
dino@11 1133
ed@17 1134
dino@11 1135 <div class="adef-list">
dino@11 1136 <p><em>Attribute definitions:</em></p>
dino@11 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">&lt;number&gt;</a></em>"</dt><dd>Direction angle for the light source on the XY plane (clockwise), in
ed@30 1138 degrees from the x axis.<br/>
ed@17 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/>
ed@31 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">&lt;number&gt;</a></em>"</dt><dd>Direction angle for the light source from the XY plane towards the Z-axis, in degrees.
ed@30 1141 Note that the positive Z-axis points towards the viewer.<br/>
ed@30 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/>
ed@30 1143 <span class="anim-target">Animatable: yes.</span></dd></dl>
dino@11 1144 </div>
dino@11 1145
ed@30 1146 <p>
ed@30 1147 The following diagram illustrates the angles which <a href="#feDistantLightAzimuthAttribute"><span class="attr-name">‘azimuth’</span></a>
ed@30 1148 and <a href="#feDistantLightElevationAttribute"><span class="attr-name">‘elevation’</span></a> represent in an XYZ coordinate system.
ed@30 1149 </p>
ed@30 1150 <img src="examples/azimuth-elevation.png" alt="Angles which azimuth and elevation represent" width="480" height="360"/>
ed@30 1151
ed@17 1152
dino@13 1153 <h3 id="fePointLightElement">9.3 Light source <span class="element-name">‘fePointLight’</span></h3>
dino@11 1154
dino@11 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:
dino@11 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>
dino@11 1157
dino@11 1158 <div class="adef-list">
dino@11 1159 <p><em>Attribute definitions:</em></p>
dino@11 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">&lt;number&gt;</a></em>"</dt><dd>X location for the light source in the coordinate system established
dino@11 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>
dino@11 1162 element.<br/>
ed@17 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/>
dino@11 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">&lt;number&gt;</a></em>"</dt><dd>Y location for the light source in the coordinate system established
dino@11 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>
dino@11 1166 element.<br/>
ed@17 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/>
dino@11 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">&lt;number&gt;</a></em>"</dt><dd>Z location for the light source in the coordinate system established
dino@11 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>
dino@11 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>
dino@11 1171 , the positive Z-axis comes out towards the person viewing the content
dino@11 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/>
ed@17 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/>
dino@11 1174 <span class="anim-target">Animatable: yes.</span></dd></dl>
dino@11 1175 </div>
dino@11 1176
dino@13 1177 <h3 id="feSpotLightElement">9.4 Light source <span class="element-name">‘feSpotLight’</span></h3>
dino@11 1178
dino@11 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:
dino@11 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>
dino@11 1181
ed@17 1182
dino@11 1183 <div class="adef-list">
dino@11 1184 <p><em>Attribute definitions:</em></p>
dino@11 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">&lt;number&gt;</a></em>"</dt><dd>X location for the light source in the coordinate system established
dino@11 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>
dino@11 1187 element.<br/>
ed@17 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/>
dino@11 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">&lt;number&gt;</a></em>"</dt><dd>Y location for the light source in the coordinate system established
dino@11 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>
dino@11 1191 element.<br/>
ed@17 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/>
ed@17 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">&lt;number&gt;</a></em>"</dt><dd>Z location for the light source in the coordinate system established
dino@11 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>
dino@11 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>
dino@11 1196 , the positive Z-axis comes out towards the person viewing the content
dino@11 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/>
ed@17 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/>
dino@11 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">&lt;number&gt;</a></em>"</dt><dd>X location in the coordinate system established by attribute <a href="#FilterElementPrimitiveUnitsAttribute"><span class="attr-name">‘primitiveUnits’</span></a>
dino@13 1200 on the <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
dino@11 1201 element of the point at which the light source is pointing.<br/>
ed@17 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/>
dino@11 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">&lt;number&gt;</a></em>"</dt><dd>Y location in the coordinate system established by attribute <a href="#FilterElementPrimitiveUnitsAttribute"><span class="attr-name">‘primitiveUnits’</span></a>
dino@13 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/>
ed@17 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/>
dino@11 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">&lt;number&gt;</a></em>"</dt><dd>Z location in the coordinate system established by the
dino@13 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
dino@13 1208 the point at which the light source is pointing, assuming that, in the
dino@13 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
dino@11 1210 towards the person viewing the content and assuming that
dino@11 1211 one unit along the Z-axis equals
dino@11 1212 <a href="http://www.w3.org/TR/SVG11/coords.html#Units_viewport_percentage">
dino@11 1213 one unit in X and Y</a>.<br/>
ed@17 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/>
dino@11 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">&lt;number&gt;</a></em>"</dt><dd>Exponent value controlling the focus for the light source.<br/>
ed@17 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/>
dino@11 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">&lt;number&gt;</a></em>"</dt><dd>A limiting cone which restricts the region where the light is
dino@11 1218 projected. No light is projected outside the cone. <span class="attr-name">limitingConeAngle</span> represents the angle in degrees between
dino@11 1219 the spot light axis (i.e. the axis between the light source and the
dino@11 1220 point to which it is pointing at) and the spot light cone. <span class="requirement" id="assert_userAgentLightingConeSmoothing">User agents
dino@11 1221 should apply a smoothing technique such as anti-aliasing at the
dino@11 1222 boundary of the cone.</span><br/>
dino@11 1223 If no value is specified, then no limiting cone will be applied.<br/>
dino@11 1224 <span class="anim-target">Animatable: yes.</span></dd></dl>
dino@11 1225 </div>
dino@11 1226
ed@17 1227
dino@13 1228 <h3 id="LightingColorProperty">9.5 The <span class="prop-name">‘lighting-color’</span> property</h3>
dino@11 1229
dino@11 1230 <p>The <a href="#LightingColorProperty"><span class="prop-name">‘lighting-color’</span></a> property defines the
dino@11 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>
dino@11 1232
dino@11 1233 <div class="propdef">
dino@11 1234 <dl><dt><span class="index-def" title="'margin-top'"><a href="#LightingColorProperty"><span class="prop-name">‘lighting-color’</span></a></span></dt><dd>
dino@11 1235 <table summary="lighting-color property" class="propinfo" cellspacing="0" cellpadding="0"><tbody><tr valign="baseline"><td><em>Value:</em>  </td><td>currentColor |<br/>
dino@11 1236 <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeColor">&lt;color&gt;</a>
dino@11 1237 [<a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeICCColor">&lt;icccolor&gt;</a>] |<br/>
dino@11 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>
dino@11 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>
dino@11 1240 </dd></dl>
dino@11 1241 </div>
dino@11 1242
dino@13 1243 <h2 id="feBlendElement">10 Filter primitive <span class="element-name">‘feBlend’</span></h2>
dino@11 1244
dino@11 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:
dino@11 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>
dino@11 1247
ed@17 1248
dino@11 1249 <p>This filter composites two objects together using commonly used imaging
dino@11 1250 software blending modes. It performs a pixel-wise combination of two input
dino@11 1251 images.</p>
dino@11 1252
dino@11 1253 <div class="adef-list">
dino@11 1254 <p><em>Attribute definitions:</em></p>
dino@11 1255 <dl><dt id="feBlendModeAttribute"><span class="adef">mode</span> = "<em>normal | multiply | screen | darken |
ed@17 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/>
dino@11 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>
dino@11 1258 attribute)</em>"</dt><dd>The second input image to the blending operation. This attribute can
dino@11 1259 take on the same values as the <a href="#FilterPrimitiveInAttribute"><span class="attr-name">in</span></a> attribute.<br/>
dino@11 1260 <span class="anim-target">Animatable: yes.</span></dd></dl>
dino@11 1261 </div>
dino@11 1262
dino@11 1263 <p>For all feBlend modes, the result opacity is computed as follows:</p>
dino@11 1264 <pre>qr = 1 - (1-qa)*(1-qb)</pre>
dino@11 1265
dino@11 1266 <p>For the compositing formulas below, the following definitions apply:</p>
dino@11 1267 <pre>image A = in
dino@11 1268 image B = in2
dino@11 1269 cr = Result color (RGB) - premultiplied
dino@11 1270 qa = Opacity value at a given pixel for image A
dino@11 1271 qb = Opacity value at a given pixel for image B
dino@11 1272 ca = Color (RGB) at a given pixel for image A - premultiplied
dino@11 1273 cb = Color (RGB) at a given pixel for image B - premultiplied </pre>
dino@11 1274
dino@11 1275 <p id="BlendingTable">The following table
dino@11 1276 provides the list of available image blending modes:</p>
dino@11 1277
dino@11 1278 <div class="note-editor">
dino@11 1279 ED: make table look nicer</div>
dino@11 1280
dino@11 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>
dino@11 1282
ed@17 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>
dino@11 1284 filter primitive, matches the blending method used by <a href="#feMergeElement"><span class="element-name">‘feMerge’</span></a> and matches
dino@11 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>
dino@11 1286
ed@17 1287
dino@11 1288 <pre class="xml">&lt;?xml version="1.0"?&gt;
dino@11 1289 &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
dino@11 1290 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
dino@11 1291 &lt;svg width="5cm" height="5cm" viewBox="0 0 500 500"
dino@11 1292 xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
dino@11 1293 &lt;title&gt;Example feBlend - Examples of feBlend modes&lt;/title&gt;
dino@11 1294 &lt;desc&gt;Five text strings blended into a gradient,
dino@11 1295 with one text string for each of the five feBlend modes.&lt;/desc&gt;
dino@11 1296 &lt;defs&gt;
dino@11 1297 &lt;linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
dino@11 1298 x1="100" y1="0" x2="300" y2="0"&gt;
dino@11 1299 &lt;stop offset="0" stop-color="#000000" /&gt;
dino@11 1300 &lt;stop offset=".33" stop-color="#ffffff" /&gt;
dino@11 1301 &lt;stop offset=".67" stop-color="#ff0000" /&gt;
dino@11 1302 &lt;stop offset="1" stop-color="#808080" /&gt;
dino@11 1303 &lt;/linearGradient&gt;
dino@11 1304 &lt;filter id="Normal"&gt;
dino@11 1305 &lt;feBlend mode="normal" in2="BackgroundImage" in="SourceGraphic"/&gt;
dino@11 1306 &lt;/filter&gt;
dino@11 1307 &lt;filter id="Multiply"&gt;
dino@11 1308 &lt;feBlend mode="multiply" in2="BackgroundImage" in="SourceGraphic"/&gt;
dino@11 1309 &lt;/filter&gt;
dino@11 1310 &lt;filter id="Screen"&gt;
dino@11 1311 &lt;feBlend mode="screen" in2="BackgroundImage" in="SourceGraphic"/&gt;
dino@11 1312 &lt;/filter&gt;
dino@11 1313 &lt;filter id="Darken"&gt;
dino@11 1314 &lt;feBlend mode="darken" in2="BackgroundImage" in="SourceGraphic"/&gt;
dino@11 1315 &lt;/filter&gt;
dino@11 1316 &lt;filter id="Lighten"&gt;
dino@11 1317 &lt;feBlend mode="lighten" in2="BackgroundImage" in="SourceGraphic"/&gt;
dino@11 1318 &lt;/filter&gt;
dino@11 1319 &lt;/defs&gt;
dino@11 1320 &lt;rect fill="none" stroke="blue"
dino@11 1321 x="1" y="1" width="498" height="498"/&gt;
dino@11 1322 &lt;g enable-background="new" &gt;
dino@11 1323 &lt;rect x="100" y="20" width="300" height="460" fill="url(#MyGradient)" /&gt;
dino@11 1324 &lt;g font-family="Verdana" font-size="75" fill="#888888" fill-opacity=".6" &gt;
dino@11 1325 &lt;text x="50" y="90" filter="url(#Normal)" &gt;Normal&lt;/text&gt;
dino@11 1326 &lt;text x="50" y="180" filter="url(#Multiply)" &gt;Multiply&lt;/text&gt;
dino@11 1327 &lt;text x="50" y="270" filter="url(#Screen)" &gt;Screen&lt;/text&gt;
dino@11 1328 &lt;text x="50" y="360" filter="url(#Darken)" &gt;Darken&lt;/text&gt;
dino@11 1329 &lt;text x="50" y="450" filter="url(#Lighten)" &gt;Lighten&lt;/text&gt;
dino@11 1330 &lt;/g&gt;
dino@11 1331 &lt;/g&gt;
dino@11 1332 &lt;/svg&gt;</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>
dino@11 1333
dino@13 1334 <h2 id="feColorMatrixElement">11 Filter primitive <span class="element-name">‘feColorMatrix’</span></h2>
dino@11 1335
dino@11 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:
dino@11 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>
dino@11 1338
dino@11 1339 <p>This filter applies a matrix transformation:</p>
dino@11 1340 <object data="mathml/feColorMatrix00.mml" type="application/mathml+xml" width="100%" height="140">
dino@11 1341 <pre>| R' | | a00 a01 a02 a03 a04 | | R |
dino@11 1342 | G' | | a10 a11 a12 a13 a14 | | G |
dino@11 1343 | B' | = | a20 a21 a22 a23 a24 | * | B |
dino@11 1344 | A' | | a30 a31 a32 a33 a34 | | A |
dino@11 1345 | 1 | | 0 0 0 0 1 | | 1 |</pre>
dino@11 1346 </object>
dino@11 1347
dino@11 1348 <p>on the RGBA color and alpha values of every pixel on the input graphics to
dino@11 1349 produce a result with a new set of RGBA color and alpha values.</p>
dino@11 1350
dino@11 1351 <p>The calculations are performed on non-premultiplied color values. If the
dino@11 1352 input graphics consists of premultiplied color values, those values are
dino@11 1353 automatically converted into non-premultiplied color values for this
dino@11 1354 operation.</p>
dino@11 1355
dino@11 1356 <p>These matrices often perform an identity mapping in the alpha channel. If
dino@11 1357 that is the case, an implementation can avoid the costly undoing and redoing
dino@11 1358 of the premultiplication for all pixels with A = 1.</p>
dino@11 1359
dino@11 1360 <div class="adef-list">
dino@11 1361 <p><em>Attribute definitions:</em></p>
dino@11 1362 <dl><dt id="feColorMatrixTypeAttribute"><span class="adef">type</span> =
dino@11 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
dino@11 1364 values will be provided. The other keywords represent convenience
dino@11 1365 shortcuts to allow commonly used color operations to be performed
ed@17 1366 without specifying a complete matrix.
ed@17 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>.
ed@17 1368 <br/>
dino@11 1369 <span class="anim-target">Animatable: yes.</span></dd><dt id="feColorMatrixValuesAttribute"><span class="adef">values</span> =
dino@11 1370 "<em>list of <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber">&lt;number&gt;</a>s</em>"</dt><dd>The contents of <span class="attr-name">values</span> depends on the
dino@11 1371 value of attribute <a href="#feColorMatrixTypeAttribute"><span class="attr-name">type</span></a>:
dino@11 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
dino@11 1373 a01 a02 a03 a04 a10 a11 ... a34), separated by whitespace and/or a
dino@11 1374 comma. For example, the identity matrix could be expressed as:
dino@11 1375 <pre>type="matrix"
dino@11 1376 values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"</pre>
dino@11 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
dino@11 1378 1). A <span class="attr-value">saturate</span> operation is
dino@11 1379 equivalent to the following matrix operation:
dino@13 1380 <p>
dino@13 1381 <object data="mathml/feColorMatrix01.mml" type="application/mathml+xml" width="100%" height="130">
dino@36 1382 <pre>| R' | | (0.2127 + 0.7873s) (0.7152 - 0.7152s) (0.0722 - 0.0722s) 0 0 | | R |
dino@36 1383 | G' | | (0.2127 - 0.2127s) (0.7152 + 0.2848s) (0.0722 - 0.0722s) 0 0 | | G |
dino@36 1384 | B' | = | (0.2127 - 0.2127s) (0.7152 - 0.7152s) (0.0722 + 0.9278s) 0 0 | * | B |
dino@36 1385 | A' | | 0 0 0 1 0 | | A |
dino@36 1386 | 1 | | 0 0 0 0 1 | | 1 |</pre>
dino@13 1387 </object>
dino@13 1388 </p>
dino@11 1389 </li><li>For <span class="attr-value">type="hueRotate"</span>, <span class="attr-name">values</span> is a single one real number value
dino@11 1390 (degrees). A <span class="attr-value">hueRotate</span> operation is
dino@11 1391 equivalent to the following matrix operation:
dino@13 1392 <p>
dino@13 1393 <object data="mathml/feColorMatrix02.mml" type="application/mathml+xml" width="100%" height="130">
dino@11 1394 <pre>| R' | | a00 a01 a02 0 0 | | R |
dino@11 1395 | G' | | a10 a11 a12 0 0 | | G |
dino@11 1396 | B' | = | a20 a21 a22 0 0 | * | B |
dino@11 1397 | A' | | 0 0 0 1 0 | | A |
dino@11 1398 | 1 | | 0 0 0 0 1 | | 1 |</pre>
dino@13 1399 </object>
dino@13 1400 </p>
dino@11 1401
dino@11 1402 where the terms a00, a01, etc. are calculated as follows:
dino@13 1403 <p>
dino@13 1404 <object data="mathml/feColorMatrix03.mml" type="application/mathml+xml" width="100%" height="230">
dino@36 1405 <pre>| a00 a01 a02 | [0.2127 0.7152 0.0722]
dino@36 1406 | a10 a11 a12 | = [0.2127 0.7152 0.0722] +
dino@36 1407 | a20 a21 a22 | [0.2127 0.7152 0.0722]
dino@36 1408
dino@36 1409 [ 0.7873 -0.7152 -0.0722]
dino@36 1410 cos(hueRotate value) * [-0.2127 0.2848 -0.0722] +
dino@36 1411 [-0.2127 -0.7152 0.9278]
dino@36 1412
dino@36 1413 [-0.2127 -0.7152 0.9278]
dino@36 1414 sin(hueRotate value) * [ 0.143 0.140 -0.283 ]
dino@36 1415 [-0.7873 0.7152 0.0722]</pre>
dino@13 1416 </object>
dino@13 1417 </p>
dino@11 1418 Thus, the upper left term of the hue matrix turns out to be:
dino@13 1419 <p>
dino@13 1420 <object data="mathml/feColorMatrix04.mml" type="application/mathml+xml" width="100%" height="30">
dino@36 1421 <pre>.2127 + cos(hueRotate value) * 0.7873 - sin(hueRotate value) * 0.2127</pre>
dino@13 1422 </object>
dino@13 1423 </p>
dino@11 1424
dino@11 1425 </li><li>For <span class="attr-value">type="luminanceToAlpha"</span>,
dino@11 1426 <span class="attr-name">values</span> is not applicable. A <span class="attr-value">luminanceToAlpha</span> operation is equivalent
dino@11 1427 to the following matrix operation:
dino@13 1428 <p>
dino@13 1429 <object data="mathml/feColorMatrix05.mml" type="application/mathml+xml" width="100%" height="130">
dino@11 1430 <pre> | R' | | 0 0 0 0 0 | | R |
dino@11 1431 | G' | | 0 0 0 0 0 | | G |
dino@11 1432 | B' | = | 0 0 0 0 0 | * | B |
dino@36 1433 | A' | | 0.2127 0.7152 0.0722 0 0 | | A |
dino@11 1434 | 1 | | 0 0 0 0 1 | | 1 |</pre>
dino@11 1435 </object>
dino@11 1436 </p>
dino@13 1437 </li></ul>
dino@11 1438 If the attribute is not specified, then the default behavior depends on
dino@11 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
dino@11 1440 to the identity matrix. If <span class="attr-value">type="saturate"</span>, then this attribute defaults
dino@11 1441 to the value <span class="attr-value">1</span>, which results in the
ed@21 1442 identity matrix. If <span class="attr-value">type="hueRotate"</span>,
ed@21 1443 then this attribute defaults to the value <span class="attr-value">0</span>, which results in the identity matrix.<br/>
dino@11 1444 <span class="anim-target">Animatable: yes.</span> </dd></dl>
dino@11 1445 </div>
dino@11 1446
dino@11 1447 <pre class="xml">&lt;?xml version="1.0"?&gt;
dino@11 1448 &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
dino@11 1449 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
dino@11 1450 &lt;svg width="8cm" height="5cm" viewBox="0 0 800 500"
dino@11 1451 xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
dino@11 1452 &lt;title&gt;Example feColorMatrix - Examples of feColorMatrix operations&lt;/title&gt;
dino@11 1453 &lt;desc&gt;Five text strings showing the effects of feColorMatrix:
dino@11 1454 an unfiltered text string acting as a reference,
dino@11 1455 use of the feColorMatrix matrix option to convert to grayscale,
dino@11 1456 use of the feColorMatrix saturate option,
dino@11 1457 use of the feColorMatrix hueRotate option,
dino@11 1458 and use of the feColorMatrix luminanceToAlpha option.&lt;/desc&gt;
dino@11 1459 &lt;defs&gt;
dino@11 1460 &lt;linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
dino@11 1461 x1="100" y1="0" x2="500" y2="0"&gt;
dino@11 1462 &lt;stop offset="0" stop-color="#ff00ff" /&gt;
dino@11 1463 &lt;stop offset=".33" stop-color="#88ff88" /&gt;
dino@11 1464 &lt;stop offset=".67" stop-color="#2020ff" /&gt;
dino@11 1465 &lt;stop offset="1" stop-color="#d00000" /&gt;
dino@11 1466 &lt;/linearGradient&gt;
dino@11 1467 &lt;filter id="Matrix" filterUnits="objectBoundingBox"
dino@11 1468 x="0%" y="0%" width="100%" height="100%"&gt;
dino@11 1469 &lt;feColorMatrix type="matrix" in="SourceGraphic"
dino@11 1470 values=".33 .33 .33 0 0
dino@11 1471 .33 .33 .33 0 0
dino@11 1472 .33 .33 .33 0 0
dino@11 1473 .33 .33 .33 0 0"/&gt;
dino@11 1474 &lt;/filter&gt;
dino@11 1475 &lt;filter id="Saturate40" filterUnits="objectBoundingBox"
dino@11 1476 x="0%" y="0%" width="100%" height="100%"&gt;
dino@11 1477 &lt;feColorMatrix type="saturate" in="SourceGraphic" values="0.4"/&gt;
dino@11 1478 &lt;/filter&gt;
dino@11 1479 &lt;filter id="HueRotate90" filterUnits="objectBoundingBox"
dino@11 1480 x="0%" y="0%" width="100%" height="100%"&gt;
dino@11 1481 &lt;feColorMatrix type="hueRotate" in="SourceGraphic" values="90"/&gt;
dino@11 1482 &lt;/filter&gt;
dino@11 1483 &lt;filter id="LuminanceToAlpha" filterUnits="objectBoundingBox"
dino@11 1484 x="0%" y="0%" width="100%" height="100%"&gt;
dino@11 1485 &lt;feColorMatrix type="luminanceToAlpha" in="SourceGraphic" result="a"/&gt;
dino@11 1486 &lt;feComposite in="SourceGraphic" in2="a" operator="in" /&gt;
dino@11 1487 &lt;/filter&gt;
dino@11 1488 &lt;/defs&gt;
dino@11 1489 &lt;rect fill="none" stroke="blue"
dino@11 1490 x="1" y="1" width="798" height="498"/&gt;
dino@11 1491 &lt;g font-family="Verdana" font-size="75"
dino@11 1492 font-weight="bold" fill="url(#MyGradient)" &gt;
dino@11 1493 &lt;rect x="100" y="0" width="500" height="20" /&gt;
dino@11 1494 &lt;text x="100" y="90"&gt;Unfiltered&lt;/text&gt;
dino@11 1495 &lt;text x="100" y="190" filter="url(#Matrix)" &gt;Matrix&lt;/text&gt;
dino@11 1496 &lt;text x="100" y="290" filter="url(#Saturate40)" &gt;Saturate&lt;/text&gt;
dino@11 1497 &lt;text x="100" y="390" filter="url(#HueRotate90)" &gt;HueRotate&lt;/text&gt;
dino@11 1498 &lt;text x="100" y="490" filter="url(#LuminanceToAlpha)" &gt;Luminance&lt;/text&gt;
dino@11 1499 &lt;/g&gt;
dino@11 1500 &lt;/svg&gt;</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>
dino@11 1501
dino@13 1502 <h2 id="feComponentTransferElement">12 Filter primitive <span class="element-name">‘feComponentTransfer’</span></h2>
dino@11 1503
dino@11 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:
dino@11 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>
dino@11 1506
dino@11 1507 <p>This filter primitive performs component-wise remapping of data as
dino@11 1508 follows:</p>
dino@11 1509 <pre>R' = <a href="#feFuncRElement">feFuncR</a>( R )
dino@11 1510 G' = <a href="#feFuncGElement">feFuncG</a>( G )
dino@11 1511 B' = <a href="#feFuncBElement">feFuncB</a>( B )
dino@11 1512 A' = <a href="#feFuncAElement">feFuncA</a>( A )</pre>
dino@11 1513
dino@11 1514 <p>for every pixel. It allows operations like brightness adjustment, contrast
dino@11 1515 adjustment, color balance or thresholding.</p>
dino@11 1516
dino@11 1517 <p>The calculations are performed on non-premultiplied color values. If the
dino@11 1518 input graphics consists of premultiplied color values, those values are
dino@11 1519 automatically converted into non-premultiplied color values for this
dino@11 1520 operation. (Note that the undoing and redoing of the premultiplication can be
dino@11 1521 avoided if <a href=""><span class="element-name">‘feFuncA’</span></a> is the identity transform
dino@11 1522 and all alpha values on the source graphic are set to 1.)</p>
dino@11 1523
dino@11 1524 <p>The child elements of a <a href="#feComponentTransferElement"><span class="element-name">‘feComponentTransfer’</span></a> element specify the
dino@11 1525 transfer functions for the four channels:</p>
dino@11 1526
dino@11 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>
dino@11 1528
dino@11 1529 <p>The following rules apply to the processing of the <a href="#feComponentTransferElement"><span class="element-name">‘feComponentTransfer’</span></a> element:</p>
dino@11 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>
dino@13 1531
dino@11 1532
dino@11 1533
dino@11 1534 <div id="feFuncRElement">
dino@11 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:
dino@11 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>
dino@11 1537 </div>
dino@11 1538
dino@11 1539 <div id="feFuncGElement">
dino@11 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:
dino@11 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>
dino@11 1542 </div>
dino@11 1543
dino@11 1544 <div id="feFuncBElement">
dino@11 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:
dino@11 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>
dino@11 1547 </div>
dino@11 1548
dino@11 1549 <div id="feFuncAElement">
dino@11 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:
dino@11 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>
dino@11 1552 </div>
dino@11 1553
dino@11 1554 <p id="TransferFunctionElementAttributes">The attributes below are the
dino@11 1555 <span class="SVG-TermDefine">transfer function element attributes</span>,
dino@11 1556 which apply to the <a href="#TermTransferFunctionElements"><span class="svg-term">transfer function elements</span></a>.</p>
dino@11 1557
dino@11 1558 <div class="adef-list">
dino@11 1559 <p><em>Attribute definitions:</em></p>
dino@11 1560 <dl><dt id="feComponentTransferTypeAttribute"><span class="adef">type</span>
dino@11 1561 = "<em>identity | table | discrete | linear | gamma</em>"</dt><dd><p>Indicates the type of component transfer function. The type of
dino@11 1562 function determines the applicability of the other attributes.</p>
ed@24 1563 <p>In the following, C is the initial component (e.g.,
ed@24 1564 <a href=""><span class="element-name">‘feFuncR’</span></a>), C' is the remapped component; both
ed@24 1565 in the closed interval [0,1].</p>
dino@11 1566 <ul><li>For <span class="attr-value">identity</span>:
dino@11 1567 <pre>C' = C</pre>
dino@11 1568 </li><li>For <span class="attr-value">table</span>, the function is
ed@24 1569 defined by linear interpolation
ed@24 1570 between values given in the attribute
ed@24 1571 <a href="#feComponentTransferTableValuesAttribute"><span class="attr-name">‘tableValues’</span></a>. The table has <em>n+1</em>
ed@24 1572 values (i.e., v<sub>0</sub> to v<sub>n</sub>)
ed@24 1573 specifying the start and end values for <em>n</em>
ed@24 1574 evenly sized interpolation regions. Interpolations
ed@24 1575 use the following formula:
ed@24 1576
ed@24 1577 <p>For a value <code>C &lt; 1</code> find <code>k</code> such that:</p>
ed@24 1578 <p class="filterformula">k/n &lt;= C &lt; (k+1)/n</p>
ed@24 1579
ed@24 1580 <p>The result <code>C'</code> is given by:</p>
ed@24 1581 <p class="filterformula">C' = v<sub>k</sub> + (C - k/n)*n * (v<sub>k+1</sub> - v<sub>k</sub>)</p>
ed@24 1582
ed@24 1583 <p>If <code>C = 1</code> then:</p>
ed@24 1584 <p class="filterformula">C' = v<sub>n</sub>.</p>
ed@24 1585 </li><li>For <span class="attr-value">discrete</span>, the function is defined by the step function
ed@24 1586 given in the attribute <a href="#feComponentTransferTableValuesAttribute"><span class="attr-name">‘tableValues’</span></a>, which provides a list of
ed@24 1587 <em>n</em> values (i.e., v<sub>0</sub> to v<sub>n-1</sub>) in order
ed@24 1588 to identify a step function consisting of <em>n</em> steps. The
ed@24 1589 step function is defined by the following formula:
ed@24 1590
ed@24 1591 <p>For a value <code>C &lt; 1</code> find <code>k</code> such that:</p>
ed@24 1592 <p class="filterformula">k/n &lt;= C &lt; (k+1)/n</p>
ed@24 1593
dino@11 1594 <p>For a value <code>C</code> pick a <code>k</code> such that:</p>
dino@11 1595 <p class="filterformula">k/N &lt;= C &lt; (k+1)/N</p>
ed@24 1596
dino@11 1597 <p>The result <code>C'</code> is given by:</p>
dino@11 1598 <p class="filterformula">C' = v<sub>k</sub></p>
ed@24 1599 <p>If <code>C = 1</code> then:</p>
ed@24 1600 <p class="filterformula">C' = v<sub>n-1</sub>.</p>
dino@11 1601 </li><li>For <span class="attr-value">linear</span>, the function is
dino@11 1602 defined by the following linear equation:
dino@11 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>
dino@11 1604 </li><li>For <span class="attr-value">gamma</span>, the function is
dino@11 1605 defined by the following exponential function:
dino@11 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>
dino@11 1607 </li></ul>
dino@11 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">&lt;number&gt;</a>s)</em>"</dt><dd>When <span class="attr-value">type="table"</span>, the list of
dino@11 1609 <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber">&lt;number&gt;</a>
dino@11 1610 s <em>v0,v1,...vn</em>, separated by white space and/or a comma, which
dino@11 1611 define the lookup table. An empty list results in an identity transfer
dino@11 1612 function. If the attribute is not specified, then the effect is as if
dino@11 1613 an empty list were provided.<br/>
dino@11 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">&lt;number&gt;</a></em>"</dt><dd>When <span class="attr-value">type="linear"</span>, the slope of the
dino@11 1615 linear function.<br/>
ed@17 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/>
dino@11 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">&lt;number&gt;</a></em>"</dt><dd>When <span class="attr-value">type="linear"</span>, the intercept of
dino@11 1618 the linear function.<br/>
ed@17 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/>
dino@11 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">&lt;number&gt;</a></em>"</dt><dd>When <span class="attr-value">type="gamma"</span>, the amplitude of
dino@11 1621 the gamma function.<br/>
ed@17 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/>
dino@11 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">&lt;number&gt;</a></em>"</dt><dd>When <span class="attr-value">type="gamma"</span>, the exponent of
dino@11 1624 the gamma function.<br/>
ed@17 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/>
dino@11 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">&lt;number&gt;</a></em>"</dt><dd>When <span class="attr-value">type="gamma"</span>, the offset of the
dino@11 1627 gamma function.<br/>
ed@17 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/>
dino@11 1629 <span class="anim-target">Animatable: yes.</span></dd></dl>
dino@11 1630 </div>
dino@11 1631
dino@11 1632
dino@11 1633 <pre class="xml">&lt;?xml version="1.0"?&gt;
dino@11 1634 &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
dino@11 1635 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
dino@11 1636 &lt;svg width="8cm" height="4cm" viewBox="0 0 800 400"
dino@11 1637 xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
dino@11 1638 &lt;title&gt;Example feComponentTransfer - Examples of feComponentTransfer operations&lt;/title&gt;
dino@11 1639 &lt;desc&gt;Four text strings showing the effects of feComponentTransfer:
dino@11 1640 an identity function acting as a reference,
dino@11 1641 use of the feComponentTransfer table option,
dino@11 1642 use of the feComponentTransfer linear option,
dino@11 1643 and use of the feComponentTransfer gamma option.&lt;/desc&gt;
dino@11 1644 &lt;defs&gt;
dino@11 1645 &lt;linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
dino@11 1646 x1="100" y1="0" x2="600" y2="0"&gt;
dino@11 1647 &lt;stop offset="0" stop-color="#ff0000" /&gt;
dino@11 1648 &lt;stop offset=".33" stop-color="#00ff00" /&gt;
dino@11 1649 &lt;stop offset=".67" stop-color="#0000ff" /&gt;
dino@11 1650 &lt;stop offset="1" stop-color="#000000" /&gt;
dino@11 1651 &lt;/linearGradient&gt;
dino@11 1652 &lt;filter id="Identity" filterUnits="objectBoundingBox"
dino@11 1653 x="0%" y="0%" width="100%" height="100%"&gt;
dino@11 1654 &lt;feComponentTransfer&gt;
dino@11 1655 &lt;feFuncR type="identity"/&gt;
dino@11 1656 &lt;feFuncG type="identity"/&gt;
dino@11 1657 &lt;feFuncB type="identity"/&gt;
dino@11 1658 &lt;feFuncA type="identity"/&gt;
dino@11 1659 &lt;/feComponentTransfer&gt;
dino@11 1660 &lt;/filter&gt;
dino@11 1661 &lt;filter id="Table" filterUnits="objectBoundingBox"
dino@11 1662 x="0%" y="0%" width="100%" height="100%"&gt;
dino@11 1663 &lt;feComponentTransfer&gt;
dino@11 1664 &lt;feFuncR type="table" tableValues="0 0 1 1"/&gt;
dino@11 1665 &lt;feFuncG type="table" tableValues="1 1 0 0"/&gt;
dino@11 1666 &lt;feFuncB type="table" tableValues="0 1 1 0"/&gt;
dino@11 1667 &lt;/feComponentTransfer&gt;
dino@11 1668 &lt;/filter&gt;
dino@11 1669 &lt;filter id="Linear" filterUnits="objectBoundingBox"
dino@11 1670 x="0%" y="0%" width="100%" height="100%"&gt;
dino@11 1671 &lt;feComponentTransfer&gt;
dino@11 1672 &lt;feFuncR type="linear" slope=".5" intercept=".25"/&gt;
dino@11 1673 &lt;feFuncG type="linear" slope=".5" intercept="0"/&gt;
dino@11 1674 &lt;feFuncB type="linear" slope=".5" intercept=".5"/&gt;
dino@11 1675 &lt;/feComponentTransfer&gt;
dino@11 1676 &lt;/filter&gt;
dino@11 1677 &lt;filter id="Gamma" filterUnits="objectBoundingBox"
dino@11 1678 x="0%" y="0%" width="100%" height="100%"&gt;
dino@11 1679 &lt;feComponentTransfer&gt;
dino@11 1680 &lt;feFuncR type="gamma" amplitude="2" exponent="5" offset="0"/&gt;
dino@11 1681 &lt;feFuncG type="gamma" amplitude="2" exponent="3" offset="0"/&gt;
dino@11 1682 &lt;feFuncB type="gamma" amplitude="2" exponent="1" offset="0"/&gt;
dino@11 1683 &lt;/feComponentTransfer&gt;
dino@11 1684 &lt;/filter&gt;
dino@11 1685 &lt;/defs&gt;
dino@11 1686 &lt;rect fill="none" stroke="blue"
dino@11 1687 x="1" y="1" width="798" height="398"/&gt;
dino@11 1688 &lt;g font-family="Verdana" font-size="75"
dino@11 1689 font-weight="bold" fill="url(#MyGradient)" &gt;
dino@11 1690 &lt;rect x="100" y="0" width="600" height="20" /&gt;
dino@11 1691 &lt;text x="100" y="90"&gt;Identity&lt;/text&gt;
dino@11 1692 &lt;text x="100" y="190" filter="url(#Table)" &gt;TableLookup&lt;/text&gt;
dino@11 1693 &lt;text x="100" y="290" filter="url(#Linear)" &gt;LinearFunc&lt;/text&gt;
dino@11 1694 &lt;text x="100" y="390" filter="url(#Gamma)" &gt;GammaFunc&lt;/text&gt;
dino@11 1695 &lt;/g&gt;
dino@11 1696 &lt;/svg&gt;</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>
dino@11 1697
dino@13 1698 <h2 id="feCompositeElement">13 Filter primitive <span class="element-name">‘feComposite’</span></h2>
dino@11 1699
dino@11 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:
dino@11 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>
dino@11 1702
ed@17 1703
dino@11 1704 <p>This filter performs the combination of the two input images pixel-wise in
dino@11 1705 image space using one of the Porter-Duff [<a href="#ref-PORTERDUFF">PORTERDUFF</a>] compositing operations: <em>over, in,
ed@27 1706 atop, out, xor</em> [<a href="#ref-SVG-COMPOSITING">SVG-COMPOSITING</a>]. Additionally, a component-wise <em>arithmetic</em>
dino@11 1707 operation (with the result clamped between [0..1]) can be applied.</p>
dino@11 1708
dino@11 1709 <p>The <em>arithmetic</em> operation is useful for combining the output from
dino@11 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
dino@11 1711 data. It is also useful for implementing <em>dissolve</em>. If the
dino@11 1712 <em>arithmetic</em> operation is chosen, each result pixel is computed using
dino@11 1713 the following formula:</p>
dino@11 1714 <pre>result = k1*i1*i2 + k2*i1 + k3*i2 + k4</pre>
ed@27 1715 where:
ed@27 1716 <ul><li>
ed@27 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
ed@27 1718 </li><li>
ed@27 1719 <code>k1, k2, k3</code> and <code>k4</code> indicate the values of the attributes with the same name
ed@27 1720 </li></ul>
dino@11 1721
dino@11 1722 <p>For this filter primitive, the extent of the resulting image might grow as
ed@17 1723 described in the section that describes the <a href="#FilterPrimitiveSubRegion"><span class="svg-term">filter primitive subregion</span></a>.</p>
dino@11 1724
dino@11 1725 <div class="adef-list">
dino@11 1726 <p><em>Attribute definitions:</em></p>
dino@11 1727 <dl><dt id="feCompositeOperatorAttribute"><span class="adef">operator</span>
ed@29 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
ed@17 1729 described in [<a href="#ref-PORTERDUFF">PORTERDUFF</a>]. The <span class="attr-value">arithmetic</span> operator is described above.
ed@17 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>.
ed@17 1731 <br/>
dino@11 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">&lt;number&gt;</a></em>"</dt><dd>Only applicable if <span class="attr-value">operator="arithmetic"</span>.<br/>
ed@17 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/>
dino@11 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">&lt;number&gt;</a></em>"</dt><dd>Only applicable if <span class="attr-value">operator="arithmetic"</span>.<br/>
ed@17 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/>
dino@11 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">&lt;number&gt;</a></em>"</dt><dd>Only applicable if <span class="attr-value">operator="arithmetic"</span>.<br/>
ed@17 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/>
dino@11 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">&lt;number&gt;</a></em>"</dt><dd>Only applicable if <span class="attr-value">operator="arithmetic"</span>.<br/>
ed@17 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/>
dino@11 1740 <span class="anim-target">Animatable: yes.</span></dd><dt id="feCompositeIn2Attribute">
dino@11 1741 <span class="adef">in2</span> = "<em>(see <a href="#FilterPrimitiveInAttribute"><span class="attr-name">in</span></a>
dino@11 1742 attribute)</em>"</dt><dd>The second input image to the compositing operation. This attribute
dino@11 1743 can take on the same values as the <a href="#FilterPrimitiveInAttribute"><span class="attr-name">in</span></a> attribute.<br/>
dino@11 1744 <span class="anim-target">Animatable: yes.</span></dd></dl>
dino@11 1745 </div>
dino@11 1746
ed@17 1747
dino@11 1748 <pre class="xml">&lt;?xml version="1.0"?&gt;
dino@11 1749 &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
dino@11 1750 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
dino@11 1751 &lt;svg width="330" height="195" viewBox="0 0 1100 650" version="1.1"
dino@11 1752 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
dino@11 1753 &lt;title&gt;Example feComposite - Examples of feComposite operations&lt;/title&gt;
dino@11 1754 &lt;desc&gt;Four rows of six pairs of overlapping triangles depicting
dino@11 1755 the six different feComposite operators under different
dino@11 1756 opacity values and different clearing of the background.&lt;/desc&gt;
dino@11 1757 &lt;defs&gt;
dino@11 1758 &lt;desc&gt;Define two sets of six filters for each of the six compositing operators.
dino@11 1759 The first set wipes out the background image by flooding with opaque white.
dino@11 1760 The second set does not wipe out the background, with the result
dino@11 1761 that the background sometimes shines through and is other cases
dino@11 1762 is blended into itself (i.e., "double-counting").&lt;/desc&gt;
dino@11 1763 &lt;filter id="overFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"&gt;
dino@11 1764 &lt;feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/&gt;
dino@11 1765 &lt;feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/&gt;
dino@11 1766 &lt;feMerge&gt; &lt;feMergeNode in="flood"/&gt; &lt;feMergeNode in="comp"/&gt; &lt;/feMerge&gt;
dino@11 1767 &lt;/filter&gt;
dino@11 1768 &lt;filter id="inFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"&gt;
dino@11 1769 &lt;feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/&gt;
dino@11 1770 &lt;feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/&gt;
dino@11 1771 &lt;feMerge&gt; &lt;feMergeNode in="flood"/&gt; &lt;feMergeNode in="comp"/&gt; &lt;/feMerge&gt;
dino@11 1772 &lt;/filter&gt;
dino@11 1773 &lt;filter id="outFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"&gt;
dino@11 1774 &lt;feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/&gt;
dino@11 1775 &lt;feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/&gt;
dino@11 1776 &lt;feMerge&gt; &lt;feMergeNode in="flood"/&gt; &lt;feMergeNode in="comp"/&gt; &lt;/feMerge&gt;
dino@11 1777 &lt;/filter&gt;
dino@11 1778 &lt;filter id="atopFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"&gt;
dino@11 1779 &lt;feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/&gt;
dino@11 1780 &lt;feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/&gt;
dino@11 1781 &lt;feMerge&gt; &lt;feMergeNode in="flood"/&gt; &lt;feMergeNode in="comp"/&gt; &lt;/feMerge&gt;
dino@11 1782 &lt;/filter&gt;
dino@11 1783 &lt;filter id="xorFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"&gt;
dino@11 1784 &lt;feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/&gt;
dino@11 1785 &lt;feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/&gt;
dino@11 1786 &lt;feMerge&gt; &lt;feMergeNode in="flood"/&gt; &lt;feMergeNode in="comp"/&gt; &lt;/feMerge&gt;
dino@11 1787 &lt;/filter&gt;
dino@11 1788 &lt;filter id="arithmeticFlood" filterUnits="objectBoundingBox"
dino@11 1789 x="-5%" y="-5%" width="110%" height="110%"&gt;
dino@11 1790 &lt;feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/&gt;
dino@11 1791 &lt;feComposite in="SourceGraphic" in2="BackgroundImage" result="comp"
dino@11 1792 operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/&gt;
dino@11 1793 &lt;feMerge&gt; &lt;feMergeNode in="flood"/&gt; &lt;feMergeNode in="comp"/&gt; &lt;/feMerge&gt;
dino@11 1794 &lt;/filter&gt;
dino@11 1795 &lt;filter id="overNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"&gt;
dino@11 1796 &lt;feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/&gt;
dino@11 1797 &lt;/filter&gt;
dino@11 1798 &lt;filter id="inNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"&gt;
dino@11 1799 &lt;feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/&gt;
dino@11 1800 &lt;/filter&gt;
dino@11 1801 &lt;filter id="outNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"&gt;
dino@11 1802 &lt;feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/&gt;
dino@11 1803 &lt;/filter&gt;
dino@11 1804 &lt;filter id="atopNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"&gt;
dino@11 1805 &lt;feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/&gt;
dino@11 1806 &lt;/filter&gt;
dino@11 1807 &lt;filter id="xorNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"&gt;
dino@11 1808 &lt;feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/&gt;
dino@11 1809 &lt;/filter&gt;
dino@11 1810 &lt;filter id="arithmeticNoFlood" filterUnits="objectBoundingBox"
dino@11 1811 x="-5%" y="-5%" width="110%" height="110%"&gt;
dino@11 1812 &lt;feComposite in="SourceGraphic" in2="BackgroundImage" result="comp"
dino@11 1813 operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/&gt;
dino@11 1814 &lt;/filter&gt;
dino@11 1815 &lt;path id="Blue100" d="M 0 0 L 100 0 L 100 100 z" fill="#00ffff" /&gt;
dino@11 1816 &lt;path id="Red100" d="M 0 0 L 0 100 L 100 0 z" fill="#ff00ff" /&gt;
dino@11 1817 &lt;path id="Blue50" d="M 0 125 L 100 125 L 100 225 z" fill="#00ffff" fill-opacity=".5" /&gt;
dino@11 1818 &lt;path id="Red50" d="M 0 125 L 0 225 L 100 125 z" fill="#ff00ff" fill-opacity=".5" /&gt;
dino@11 1819 &lt;g id="TwoBlueTriangles"&gt;
dino@11 1820 &lt;use xlink:href="#Blue100"/&gt;
dino@11 1821 &lt;use xlink:href="#Blue50"/&gt;
dino@11 1822 &lt;/g&gt;
dino@11 1823 &lt;g id="BlueTriangles"&gt;
dino@11 1824 &lt;use transform="translate(275,25)" xlink:href="#TwoBlueTriangles"/&gt;
dino@11 1825 &lt;use transform="translate(400,25)" xlink:href="#TwoBlueTriangles"/&gt;
dino@11 1826 &lt;use transform="translate(525,25)" xlink:href="#TwoBlueTriangles"/&gt;
dino@11 1827 &lt;use transform="translate(650,25)" xlink:href="#TwoBlueTriangles"/&gt;
dino@11 1828 &lt;use transform="translate(775,25)" xlink:href="#TwoBlueTriangles"/&gt;
dino@11 1829 &lt;use transform="translate(900,25)" xlink:href="#TwoBlueTriangles"/&gt;
dino@11 1830 &lt;/g&gt;
dino@11 1831 &lt;/defs&gt;
dino@11 1832
dino@11 1833 &lt;rect fill="none" stroke="blue" x="1" y="1" width="1098" height="648"/&gt;
dino@11 1834 &lt;g font-family="Verdana" font-size="40" shape-rendering="crispEdges"&gt;
dino@11 1835 &lt;desc&gt;Render the examples using the filters that draw on top of
dino@11 1836 an opaque white surface, thus obliterating the background.&lt;/desc&gt;
dino@11 1837 &lt;g enable-background="new"&gt;
dino@11 1838 &lt;text x="15" y="75"&gt;opacity 1.0&lt;/text&gt;
dino@11 1839 &lt;text x="15" y="115" font-size="27"&gt;(with feFlood)&lt;/text&gt;
dino@11 1840 &lt;text x="15" y="200"&gt;opacity 0.5&lt;/text&gt;
dino@11 1841 &lt;text x="15" y="240" font-size="27"&gt;(with feFlood)&lt;/text&gt;
dino@11 1842 &lt;use xlink:href="#BlueTriangles"/&gt;
dino@11 1843 &lt;g transform="translate(275,25)"&gt;
dino@11 1844 &lt;use xlink:href="#Red100" filter="url(#overFlood)" /&gt;
dino@11 1845 &lt;use xlink:href="#Red50" filter="url(#overFlood)" /&gt;
dino@11 1846 &lt;text x="5" y="275"&gt;over&lt;/text&gt;
dino@11 1847 &lt;/g&gt;
dino@11 1848 &lt;g transform="translate(400,25)"&gt;
dino@11 1849 &lt;use xlink:href="#Red100" filter="url(#inFlood)" /&gt;
dino@11 1850 &lt;use xlink:href="#Red50" filter="url(#inFlood)" /&gt;
dino@11 1851 &lt;text x="35" y="275"&gt;in&lt;/text&gt;
dino@11 1852 &lt;/g&gt;
dino@11 1853 &lt;g transform="translate(525,25)"&gt;
dino@11 1854 &lt;use xlink:href="#Red100" filter="url(#outFlood)" /&gt;
dino@11 1855 &lt;use xlink:href="#Red50" filter="url(#outFlood)" /&gt;
dino@11 1856 &lt;text x="15" y="275"&gt;out&lt;/text&gt;
dino@11 1857 &lt;/g&gt;
dino@11 1858 &lt;g transform="translate(650,25)"&gt;
dino@11 1859 &lt;use xlink:href="#Red100" filter="url(#atopFlood)" /&gt;
dino@11 1860 &lt;use xlink:href="#Red50" filter="url(#atopFlood)" /&gt;
dino@11 1861 &lt;text x="10" y="275"&gt;atop&lt;/text&gt;
dino@11 1862 &lt;/g&gt;
dino@11 1863 &lt;g transform="translate(775,25)"&gt;
dino@11 1864 &lt;use xlink:href="#Red100" filter="url(#xorFlood)" /&gt;
dino@11 1865 &lt;use xlink:href="#Red50" filter="url(#xorFlood)" /&gt;
dino@11 1866 &lt;text x="15" y="275"&gt;xor&lt;/text&gt;
dino@11 1867 &lt;/g&gt;
dino@11 1868 &lt;g transform="translate(900,25)"&gt;
dino@11 1869 &lt;use xlink:href="#Red100" filter="url(#arithmeticFlood)" /&gt;
dino@11 1870 &lt;use xlink:href="#Red50" filter="url(#arithmeticFlood)" /&gt;
dino@11 1871 &lt;text x="-25" y="275"&gt;arithmetic&lt;/text&gt;
dino@11 1872 &lt;/g&gt;
dino@11 1873 &lt;/g&gt;
dino@11 1874 &lt;g transform="translate(0,325)" enable-background="new"&gt;
dino@11 1875 &lt;desc&gt;Render the examples using the filters that do not obliterate
dino@11 1876 the background, thus sometimes causing the background to continue
dino@11 1877 to appear in some cases, and in other cases the background
dino@11 1878 image blends into itself ("double-counting").&lt;/desc&gt;
dino@11 1879 &lt;text x="15" y="75"&gt;opacity 1.0&lt;/text&gt;
dino@11 1880 &lt;text x="15" y="115" font-size="27"&gt;(without feFlood)&lt;/text&gt;
dino@11 1881 &lt;text x="15" y="200"&gt;opacity 0.5&lt;/text&gt;
dino@11 1882 &lt;text x="15" y="240" font-size="27"&gt;(without feFlood)&lt;/text&gt;
dino@11 1883 &lt;use xlink:href="#BlueTriangles"/&gt;
dino@11 1884 &lt;g transform="translate(275,25)"&gt;
dino@11 1885 &lt;use xlink:href="#Red100" filter="url(#overNoFlood)" /&gt;
dino@11 1886 &lt;use xlink:href="#Red50" filter="url(#overNoFlood)" /&gt;
dino@11 1887 &lt;text x="5" y="275"&gt;over&lt;/text&gt;
dino@11 1888 &lt;/g&gt;
dino@11 1889 &lt;g transform="translate(400,25)"&gt;
dino@11 1890 &lt;use xlink:href="#Red100" filter="url(#inNoFlood)" /&gt;
dino@11 1891 &lt;use xlink:href="#Red50" filter="url(#inNoFlood)" /&gt;
dino@11 1892 &lt;text x="35" y="275"&gt;in&lt;/text&gt;
dino@11 1893 &lt;/g&gt;
dino@11 1894 &lt;g transform="translate(525,25)"&gt;
dino@11 1895 &lt;use xlink:href="#Red100" filter="url(#outNoFlood)" /&gt;
dino@11 1896 &lt;use xlink:href="#Red50" filter="url(#outNoFlood)" /&gt;
dino@11 1897 &lt;text x="15" y="275"&gt;out&lt;/text&gt;
dino@11 1898 &lt;/g&gt;
dino@11 1899 &lt;g transform="translate(650,25)"&gt;
dino@11 1900 &lt;use xlink:href="#Red100" filter="url(#atopNoFlood)" /&gt;
dino@11 1901 &lt;use xlink:href="#Red50" filter="url(#atopNoFlood)" /&gt;
dino@11 1902 &lt;text x="10" y="275"&gt;atop&lt;/text&gt;
dino@11 1903 &lt;/g&gt;
dino@11 1904 &lt;g transform="translate(775,25)"&gt;
dino@11 1905 &lt;use xlink:href="#Red100" filter="url(#xorNoFlood)" /&gt;
dino@11 1906 &lt;use xlink:href="#Red50" filter="url(#xorNoFlood)" /&gt;
dino@11 1907 &lt;text x="15" y="275"&gt;xor&lt;/text&gt;
dino@11 1908 &lt;/g&gt;
dino@11 1909 &lt;g transform="translate(900,25)"&gt;
dino@11 1910 &lt;use xlink:href="#Red100" filter="url(#arithmeticNoFlood)" /&gt;
dino@11 1911 &lt;use xlink:href="#Red50" filter="url(#arithmeticNoFlood)" /&gt;
dino@11 1912 &lt;text x="-25" y="275"&gt;arithmetic&lt;/text&gt;
dino@11 1913 &lt;/g&gt;
dino@11 1914 &lt;/g&gt;
dino@11 1915 &lt;/g&gt;
dino@11 1916 &lt;/svg&gt;</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>
dino@11 1917
dino@13 1918 <h2 id="feConvolveMatrixElement">14 Filter primitive <span class="element-name">‘feConvolveMatrix’</span></h2>
dino@11 1919
dino@11 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:
dino@11 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>
dino@11 1922
dino@11 1923
dino@11 1924 <p>feConvolveMatrix applies a matrix convolution filter effect. A convolution
dino@11 1925 combines pixels in the input image with neighboring pixels to produce a
dino@11 1926 resulting image. A wide variety of imaging operations can be achieved through
dino@11 1927 convolutions, including blurring, edge detection, sharpening, embossing and
dino@11 1928 beveling.</p>
dino@11 1929
dino@11 1930 <p>A matrix convolution is based on an n-by-m matrix (the convolution kernel)
dino@11 1931 which describes how a given pixel value in the input image is combined with
dino@11 1932 its neighboring pixel values to produce a resulting pixel value. Each result
dino@11 1933 pixel is determined by applying the kernel matrix to the corresponding source
dino@11 1934 pixel and its neighboring pixels. The basic convolution formula which is
dino@11 1935 applied to each color value for a given pixel is:</p>
dino@11 1936
ed@27 1937 <p class="filterformula" id="feConvolveMatrixElementFormula">COLOR<sub>X,Y</sub> = ( <br/>
dino@11 1938               SUM <sub>I=0 to [<a href="#feConvolveMatrixElementOrderAttribute">'orderY'</a>-1]</sub> { <br/>
dino@11 1939                 SUM <sub>J=0 to [<a href="#feConvolveMatrixElementOrderAttribute">'orderX'</a>-1]</sub> { <br/>
dino@11 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/>
dino@11 1941                 } <br/>
dino@11 1942               } <br/>
ed@27 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/>
dino@11 1944 </p>
dino@11 1945
dino@11 1946 <div class="note-editor">
dino@11 1947 ED: Consider making this into mathml</div>
dino@11 1948
dino@11 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
dino@11 1950 of the <a href="#feConvolveMatrixElementTargetXAttribute"><span class="attr-name">‘targetX’</span></a> attribute, "targetY" represents the
dino@11 1951 value of the <a href="#feConvolveMatrixElementTargetYAttribute"><span class="attr-name">‘targetY’</span></a> attribute, "kernelMatrix" represents the
dino@11 1952 value of the <a href="#feConvolveMatrixElementKernelMatrixAttribute"><span class="attr-name">‘kernelMatrix’</span></a> attribute, "divisor" represents the
dino@11 1953 value of the <a href="#feConvolveMatrixElementDivisorAttribute"><span class="attr-name">‘divisor’</span></a> attribute, and "bias" represents the
dino@11 1954 value of the <a href="#feConvolveMatrixElementBiasAttribute"><span class="attr-name">‘bias’</span></a> attribute.</p>
dino@11 1955
dino@11 1956 <p>Note in the above formulas that the values in the kernel matrix are
dino@11 1957 applied such that the kernel matrix is rotated 180 degrees relative to the
dino@11 1958 source and destination images in order to match convolution theory as
dino@11 1959 described in many computer graphics textbooks.</p>
dino@11 1960
dino@11 1961 <p>To illustrate, suppose you have a input image which is 5 pixels by 5
dino@11 1962 pixels, whose color values for one of the color channels are as follows:</p>
dino@11 1963 <pre> 0 20 40 235 235
dino@11 1964 100 120 140 235 235
dino@11 1965 200 220 240 235 235
dino@11 1966 225 225 255 255 255
dino@11 1967 225 225 255 255 255</pre>
dino@11 1968
dino@11 1969 <div class="note-editor">
dino@11 1970 ED: Consider making this into mathml</div>
dino@11 1971
dino@11 1972 <p>and you define a 3-by-3 convolution kernel as follows:</p>
dino@11 1973 <pre> 1 2 3
dino@11 1974 4 5 6
dino@11 1975 7 8 9</pre>
dino@11 1976
dino@11 1977 <div class="note-editor">
dino@11 1978 ED: Consider making this into mathml</div>
dino@11 1979
dino@11 1980 <p>Let's focus on the color value at the second row and second column of the
dino@11 1981 image (source pixel value is 120). Assuming the simplest case (where the
dino@11 1982 input image's pixel grid aligns perfectly with the kernel's pixel grid) and
dino@11 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
dino@11 1984 <a href="#feConvolveMatrixElementTargetYAttribute"><span class="attr-name">‘targetY’</span></a>, then resulting color value will
dino@11 1985 be:</p>
dino@11 1986 <pre>(9* 0 + 8* 20 + 7* 40 +
dino@11 1987 6*100 + 5*120 + 4*140 +
dino@11 1988 3*200 + 2*220 + 1*240) / (9+8+7+6+5+4+3+2+1)</pre>
dino@11 1989
dino@11 1990 <div class="note-editor">
dino@11 1991 ED: Consider making this into mathml</div>
dino@11 1992
dino@11 1993 <p>Because they operate on pixels, matrix convolutions are inherently
dino@11 1994 resolution-dependent. To make <a href="#feConvolveMatrixElement"><span class="element-name">‘feConvolveMatrix’</span></a> produce resolution-independent
dino@11 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
dino@11 1996 and/or attribute <a href="#feConvolveMatrixElementKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a>.</p>
dino@11 1997
dino@11 1998 <p><a href="#feConvolveMatrixElementKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a>, in combination with the other
dino@11 1999 attributes, defines an implicit pixel grid in the filter effects coordinate
dino@11 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
dino@11 2001 established by <a href="#feConvolveMatrixElementKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a> is not scaled to match the
dino@11 2002 pixel grid established by attribute <a href="#FilterElementFilterResAttribute"><span class="attr-name">‘filterRes’</span></a> (implicitly or explicitly), then the
dino@11 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
dino@11 2004 resampled image. After applying the convolution, the image is resampled back
dino@11 2005 to the original resolution.</p>
dino@11 2006
dino@11 2007 <p>When the image must be resampled to match the coordinate system defined by
dino@11 2008 <a href="#feConvolveMatrixElementKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a> prior to convolution, or
dino@11 2009 resampled to match the device coordinate system after convolution, it is
dino@11 2010 recommended that high quality viewers make use of appropriate interpolation
dino@11 2011 techniques, for example bilinear or bicubic. Depending on the speed of the
dino@11 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
dino@11 2013 implementations might choose approaches that minimize or eliminate resampling
dino@11 2014 when not necessary to produce proper results, such as when the document is
dino@11 2015 zoomed out such that <a href="#feConvolveMatrixElementKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a> is
dino@11 2016 considerably smaller than a device pixel.</p>
dino@11 2017
dino@11 2018 <div class="adef-list">
dino@11 2019 <p><em>Attribute definitions:</em></p>
dino@11 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">&lt;number-optional-number&gt;</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
dino@11 2021 <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeInteger">&lt;integer&gt;</a>
dino@11 2022 s greater than zero. The first number, &lt;orderX&gt;, indicates the
dino@11 2023 number of columns in the matrix. The second number, &lt;orderY&gt;,
dino@11 2024 indicates the number of rows in the matrix. If &lt;orderY&gt; is not
dino@11 2025 provided, it defaults to &lt;orderX&gt;.<br/>
dino@11 2026 A typical value is order="3". It is recommended that only small values
dino@11 2027 (e.g., 3) be used; higher values may result in very high CPU overhead
dino@11 2028 and usually do not produce results that justify the impact on
dino@11 2029 performance.<br/>
dino@11 2030 If the attribute is not specified, the effect is as if a value of "3"
dino@11 2031 were specified.<br/>
dino@11 2032 <span class="anim-target">Animatable: yes.</span></dd><dt id="feConvolveMatrixElementKernelMatrixAttribute"><span class="adef">kernelMatrix</span> = "<span class="attr-value">&lt;list of
dino@11 2033 numbers&gt;</span>"</dt><dd>The list of <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber">&lt;number&gt;</a>
dino@11 2034 s that make up the kernel matrix for the convolution. Values are
dino@11 2035 separated by space characters and/or a comma. The number of entries in
dino@11 2036 the list must equal &lt;orderX&gt; times &lt;orderY&gt;.<br/>
dino@11 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">&lt;number&gt;</a></span>"</dt><dd>After applying the <span class="attr-name">kernelMatrix</span> to the
dino@11 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
dino@11 2039 value. A divisor that is the sum of all the matrix values tends to have
dino@11 2040 an evening effect on the overall color intensity of the result. If the
dino@11 2041 specified divisor is zero then the default value will be used instead.
dino@11 2042 The default value is the sum of all values in kernelMatrix, with the
dino@11 2043 exception that if the sum is zero, then the divisor is set to 1.<br/>
dino@11 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">&lt;number&gt;</a></span>"</dt><dd>After applying the <span class="attr-name">kernelMatrix</span> to the
dino@11 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
dino@11 2046 application of <a href="#feConvolveMatrixElementBiasAttribute"><span class="attr-name">‘bias’</span></a> is when it is
ed@27 2047 desirable to have <span class="attr-value">.5</span> gray value be the zero response of the filter.
ed@28 2048 The bias property shifts the range of the filter. This allows representation of values that would
ed@28 2049 otherwise be clamped to 0 or 1.<br/>
ed@27 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/>
dino@11 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">&lt;integer&gt;</a></span>"</dt><dd>Determines the positioning in X of the convolution matrix relative to
dino@11 2052 a given target pixel in the input image. The leftmost column of the
dino@11 2053 matrix is column number zero. The value must be such that: 0 &lt;=
dino@11 2054 targetX &lt; orderX. By default, the convolution matrix is centered in
dino@11 2055 X over each pixel of the input image (i.e., targetX = floor ( orderX /
dino@11 2056 2 )).<br/>
dino@11 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">&lt;integer&gt;</a></span>"</dt><dd>Determines the positioning in Y of the convolution matrix relative to
dino@11 2058 a given target pixel in the input image. The topmost row of the matrix
dino@11 2059 is row number zero. The value must be such that: 0 &lt;= targetY &lt;
dino@11 2060 orderY. By default, the convolution matrix is centered in Y over each
dino@11 2061 pixel of the input image (i.e., targetY = floor ( orderY / 2 )).<br/>
dino@11 2062 <span class="anim-target">Animatable: yes.</span></dd><dt id="feConvolveMatrixElementEdgeModeAttribute"><span class="adef">edgeMode</span> = "<span class="attr-value">duplicate | wrap |
dino@11 2063 none</span>"</dt><dd><p>Determines how to extend the input image as necessary with color
dino@11 2064 values so that the matrix operations can be applied when the kernel is
dino@11 2065 positioned at or near the edge of the input image.</p>
dino@11 2066 <p>"duplicate" indicates that the input image is extended along each of
dino@11 2067 its borders as necessary by duplicating the color values at the given
dino@11 2068 edge of the input image.</p>
dino@11 2069 <pre>Original N-by-M image, where m=M-1 and n=N-1:
dino@11 2070 11 12 ... 1m 1M
dino@11 2071 21 22 ... 2m 2M
dino@11 2072 .. .. ... .. ..
dino@11 2073 n1 n2 ... nm nM
dino@11 2074 N1 N2 ... Nm NM
dino@11 2075 Extended by two pixels using "duplicate":
dino@11 2076 11 11 11 12 ... 1m 1M 1M 1M
dino@11 2077 11 11 11 12 ... 1m 1M 1M 1M
dino@11 2078 11 11 11 12 ... 1m 1M 1M 1M
dino@11 2079 21 21 21 22 ... 2m 2M 2M 2M
dino@11 2080 .. .. .. .. ... .. .. .. ..
dino@11 2081 n1 n1 n1 n2 ... nm nM nM nM
dino@11 2082 N1 N1 N1 N2 ... Nm NM NM NM
dino@11 2083 N1 N1 N1 N2 ... Nm NM NM NM
dino@11 2084 N1 N1 N1 N2 ... Nm NM NM NM</pre>
dino@11 2085
dino@11 2086 <div class="note-editor">
dino@11 2087 ED: Consider making this into mathml</div>
dino@11 2088 <p>"wrap" indicates that the input image is extended by taking the
dino@11 2089 color values from the opposite edge of the image.</p>
dino@11 2090 <pre>Extended by two pixels using "wrap":
dino@11 2091 nm nM n1 n2 ... nm nM n1 n2
dino@11 2092 Nm NM N1 N2 ... Nm NM N1 N2
dino@11 2093 1m 1M 11 12 ... 1m 1M 11 12
dino@11 2094 2m 2M 21 22 ... 2m 2M 21 22
dino@11 2095 .. .. .. .. ... .. .. .. ..
dino@11 2096 nm nM n1 n2 ... nm nM n1 n2
dino@11 2097 Nm NM N1 N2 ... Nm NM N1 N2
dino@11 2098 1m 1M 11 12 ... 1m 1M 11 12
dino@11 2099 2m 2M 21 22 ... 2m 2M 21 22</pre>
dino@11 2100
dino@11 2101 <div class="note-editor">
dino@11 2102 ED: Consider making this into mathml</div>
ed@17 2103 <p>The value <span class="attr-value">none</span> indicates that the input image is extended with pixel values
dino@11 2104 of zero for R, G, B and A.</p>
ed@17 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>
dino@11 2106 <p><span class="anim-target">Animatable: yes.</span></p>
dino@11 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">&lt;number-optional-number&gt;</a></span>"</dt><dd>The first number is the &lt;dx&gt; value. The second number is the
dino@11 2108 &lt;dy&gt; value. If the &lt;dy&gt; value is not specified, it defaults
dino@11 2109 to the same value as &lt;dx&gt;. Indicates the intended distance in
dino@11 2110 current filter units (i.e., units as determined by the value of
dino@11 2111 attribute <a href="#FilterElementPrimitiveUnitsAttribute"><span class="attr-name">‘primitiveUnits’</span></a>) between successive columns
dino@11 2112 and rows, respectively, in the <a href="#feConvolveMatrixElementKernelMatrixAttribute"><span class="attr-name">‘kernelMatrix’</span></a>. By specifying value(s) for
dino@11 2113 <a href="#feConvolveMatrixElementKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a>, the kernel becomes defined
dino@11 2114 in a scalable, abstract coordinate system. If <a href="#feConvolveMatrixElementKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a> is not specified, the default
dino@11 2115 value is one pixel in the offscreen bitmap, which is a pixel-based
dino@11 2116 coordinate system, and thus potentially not scalable. For some level of
dino@11 2117 consistency across display media and user agents, it is necessary that
dino@11 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>.
dino@11 2119 In some implementations, the most consistent results and the fastest performance will be achieved if
dino@11 2120 the pixel grid of the temporary offscreen images aligns with the pixel
dino@11 2121 grid of the kernel.<br/>
dino@11 2122 If a negative or zero value is specified the default value will be used
dino@11 2123 instead. <br/>
dino@11 2124 <span class="anim-target">Animatable: yes.</span></dd><dt id="feConvolveMatrixElementPreserveAlphaAttribute"><span class="adef">preserveAlpha</span> = "<span class="attr-value">false |
dino@11 2125 true</span>"</dt><dd>A value of <span class="attr-value">false</span> indicates that the
ed@27 2126 convolution will apply to all channels, including the alpha channel.
ed@27 2127 In this case the <code>ALPHA<sub>X,Y</sub></code> of the
ed@27 2128 <a href="#feConvolveMatrixElementFormula">convolution formula</a> for a given pixel is:
ed@27 2129 <p class="filterformula">
ed@27 2130 ALPHA<sub>X,Y</sub> = ( <br/>
ed@27 2131               SUM
ed@27 2132 <sub>I=0 to [<a href="#feConvolveMatrixElementOrderAttribute">'orderY'</a>-1]</sub> { <br/>
ed@27 2133                 SUM
ed@27 2134 <sub>J=0 to [<a href="#feConvolveMatrixElementOrderAttribute">'orderX'</a>-1]</sub> { <br/>
ed@27 2135                   SOURCE
ed@27 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> * 
ed@27 2137 <a href="#feConvolveMatrixElementKernelMatrixAttribute"><span class="attr-name">‘kernelMatrix’</span></a><sub><a href="#feConvolveMatrixElementOrderAttribute">'orderX'</a>-J-1, 
ed@27 2138 <a href="#feConvolveMatrixElementOrderAttribute">'orderY'</a>-I-1</sub> <br/>
ed@27 2139                 } <br/>
ed@27 2140               } <br/>
ed@27 2141             ) / 
ed@27 2142 <a href="#feConvolveMatrixElementDivisorAttribute"><span class="attr-name">‘divisor’</span></a> + 
ed@27 2143 <a href="#feConvolveMatrixElementBiasAttribute"><span class="attr-name">‘bias’</span></a> 
ed@27 2144 <br/>
ed@27 2145 </p>
ed@27 2146 <br/>
dino@11 2147 A value of <span class="attr-value">true</span> indicates that the
dino@11 2148 convolution will only apply to the color channels. In this case, the
dino@11 2149 filter will temporarily unpremultiply the color component values, apply
ed@27 2150 the kernel, and then re-premultiply at the end.
ed@27 2151 In this case the <code>ALPHA<sub>X,Y</sub></code>
ed@27 2152 of the <a href="#feConvolveMatrixElementFormula">convolution formula</a> for a given pixel is:
ed@27 2153 <p class="filterformula">
ed@27 2154 ALPHA<sub>X,Y</sub> = SOURCE<sub>X,Y</sub>
ed@27 2155 </p>
ed@17 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/>
dino@11 2157 <span class="anim-target">Animatable: yes.</span></dd></dl>
dino@11 2158 </div>
dino@11 2159
dino@11 2160
dino@11 2161
dino@13 2162 <h2 id="feDiffuseLightingElement">15 Filter primitive <span class="element-name">‘feDiffuseLighting’</span></h2>
dino@11 2163
dino@11 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:
dino@11 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>
dino@11 2166
dino@11 2167 <p>This filter primitive lights an image using the alpha channel as a bump
dino@11 2168 map. The resulting image is an RGBA opaque image based on the light color
dino@11 2169 with alpha = 1.0 everywhere. The lighting calculation follows the standard
dino@11 2170 diffuse component of the Phong lighting model. The resulting image depends on
dino@11 2171 the light color, light position and surface geometry of the input bump
dino@11 2172 map.</p>
dino@11 2173
dino@11 2174 <p>The light map produced by this filter primitive can be combined with a
dino@11 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
dino@11 2176 light sources can be simulated by adding several of these light maps together
dino@11 2177 before applying it to the texture image.</p>
dino@11 2178
dino@11 2179 <p>The formulas below make use of 3x3 filters. Because they operate on
dino@11 2180 pixels, such filters are inherently resolution-dependent. To make <a href="#feDiffuseLightingElement"><span class="element-name">‘feDiffuseLighting’</span></a> produce
dino@11 2181 resolution-independent results, an explicit value should be provided for
dino@11 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
dino@11 2183 and/or attribute <a href="#feDiffuseLightingKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a>.</p>
dino@11 2184
dino@11 2185 <p><a href="#feDiffuseLightingKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a>, in combination with the other
dino@11 2186 attributes, defines an implicit pixel grid in the filter effects coordinate
dino@11 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
dino@11 2188 established by <a href="#feDiffuseLightingKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a> is not scaled to match the
dino@11 2189 pixel grid established by attribute <a href="#FilterElementFilterResAttribute"><span class="attr-name">‘filterRes’</span></a> (implicitly or explicitly), then the
dino@11 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
dino@11 2191 to its original resolution.</p>
dino@11 2192
dino@11 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
dino@11 2194 bilinear or bicubic.</span> Depending on the speed of the available interpolents,
dino@11 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
dino@11 2196 implementations might choose approaches that minimize or eliminate resampling
dino@11 2197 when not necessary to produce proper results, such as when the document is
dino@11 2198 zoomed out such that <a href="#feDiffuseLightingKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a> is
dino@11 2199 considerably smaller than a device pixel.</p>
dino@11 2200
dino@11 2201 <p>For the formulas that follow, the
dino@11 2202 <code>Norm(A<sub>x</sub>,A<sub>y</sub>,A<sub>z</sub>)</code> function is
dino@11 2203 defined as:</p>
dino@11 2204
dino@11 2205 <div class="note-editor">
dino@11 2206 ED: Consider making the following in mathml</div>
dino@11 2207
dino@11 2208 <p class="filterformula">Norm(A<sub>x</sub>,A<sub>y</sub>,A<sub>z</sub>) =
dino@11 2209 sqrt(A<sub>x</sub>^2+A<sub>y</sub>^2+A<sub>z</sub>^2)</p>
dino@11 2210
dino@11 2211 <p>The resulting RGBA image is computed as follows:</p>
dino@11 2212
dino@11 2213 <p class="filterformula">D<sub>r</sub> = k<sub>d</sub> * N.L *
dino@11 2214 L<sub>r</sub><br/>
dino@11 2215 D<sub>g</sub> = k<sub>d</sub> * N.L * L<sub>g</sub><br/>
dino@11 2216 D<sub>b</sub> = k<sub>d</sub> * N.L * L<sub>b</sub><br/>
dino@11 2217 D<sub>a</sub> = 1.0</p>
dino@11 2218
dino@11 2219 <p>where</p>
dino@11 2220 <dl><dd>k<sub>d</sub> = diffuse lighting constant<br/>
dino@11 2221 N = surface normal unit vector, a function of x and y<br/>
dino@11 2222 L = unit vector pointing from surface to light, a function of x and y
dino@11 2223 in the point and spot light cases<br/>
dino@11 2224 L<sub>r</sub>,L<sub>g</sub>,L<sub>b</sub> = RGB components of light, a
dino@11 2225 function of x and y in the spot light case</dd></dl>
dino@11 2226
dino@11 2227 <p>N is a function of x and y and depends on the surface gradient as
dino@11 2228 follows:</p>
dino@11 2229
ed@17 2230 <p>The surface described by the input alpha image I(x,y) is:</p>
ed@17 2231
ed@17 2232 <p class="filterformula">Z (x,y) = surfaceScale * I(x,y)</p>
dino@11 2233
dino@11 2234 <p id="SurfaceNormalCalculations">Surface normal is calculated using the Sobel gradient 3x3 filter.
dino@11 2235 Different filter kernels are used depending on whether the given pixel is on
dino@11 2236 the interior or an edge. For each case, the formula is:</p>
ed@17 2237 <p class="filterformula">N<sub>x</sub> (x,y) = - surfaceScale *
dino@11 2238 FACTOR<sub>x</sub> *<br/>
ed@17 2239            (K<sub>x</sub>(0,0)*I(x-dx,y-dy) +
ed@17 2240 K<sub>x</sub>(1,0)*I(x,y-dy) +
ed@17 2241 K<sub>x</sub>(2,0)*I(x+dx,y-dy) +<br/>
ed@17 2242             K<sub>x</sub>(0,1)*I(x-dx,y)    +
ed@17 2243 K<sub>x</sub>(1,1)*I(x,y)    +
ed@17 2244 K<sub>x</sub>(2,1)*I(x+dx,y)    +<br/>
ed@17 2245             K<sub>x</sub>(0,2)*I(x-dx,y+dy) +
ed@17 2246 K<sub>x</sub>(1,2)*I(x,y+dy) +
ed@17 2247 K<sub>x</sub>(2,2)*I(x+dx,y+dy))<br/>
ed@17 2248 N<sub>y</sub> (x,y) = - surfaceScale * FACTOR<sub>y</sub>
ed@17 2249 *<br/>
ed@17 2250            (K<sub>y</sub>(0,0)*I(x-dx,y-dy) +
ed@17 2251 K<sub>y</sub>(1,0)*I(x,y-dy) +
ed@17 2252 K<sub>y</sub>(2,0)*I(x+dx,y-dy) +<br/>
ed@17 2253             K<sub>y</sub>(0,1)*I(x-dx,y)    +
ed@17 2254 K<sub>y</sub>(1,1)*I(x,y)    +
ed@17 2255 K<sub>y</sub>(2,1)*I(x+dx,y)    +<br/>
ed@17 2256             K<sub>y</sub>(0,2)*I(x-dx,y+dy) +
ed@17 2257 K<sub>y</sub>(1,2)*I(x,y+dy) +
ed@17 2258 K<sub>y</sub>(2,2)*I(x+dx,y+dy))<br/>
ed@17 2259 N<sub>z</sub> (x,y) = 1.0<br/>
dino@11 2260 <br/>
ed@17 2261 N = (N<sub>x</sub>, N<sub>y</sub>, N<sub>z</sub>) /
dino@11 2262 Norm((N<sub>x</sub>,N<sub>y</sub>,N<sub>z</sub>))</p>
dino@11 2263
dino@11 2264 <p>In these formulas, the <code>dx</code> and <code>dy</code> values (e.g.,
dino@11 2265 <code>I(x-dx,y-dy)</code>), represent deltas relative to a given
dino@11 2266 <code>(x,y)</code> position for the purpose of estimating the slope of the
dino@11 2267 surface at that point. These deltas are determined by the value (explicit or
dino@11 2268 implicit) of attribute <a href="#feDiffuseLightingKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a>.</p>
dino@11 2269
dino@11 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>
dino@11 2271
dino@11 2272 <p class="filterformula">FACTOR<sub>x</sub>=2/(3*dx)<br/>
dino@11 2273 K<sub>x</sub> =<br/>
dino@11 2274     |  0  0  0 |<br/>
dino@11 2275     |  0 -2  2 |<br/>
dino@11 2276     |  0 -1  1 |<br/>
dino@11 2277 <br/>
dino@11 2278 FACTOR<sub>y</sub>=2/(3*dy)<br/>
dino@11 2279 K<sub>y</sub> =  <br/>
dino@11 2280     |  0  0  0 |<br/>
dino@11 2281     |  0 -2 -1 |<br/>
dino@11 2282     |  0  2  1 |</p>
dino@11 2283 </td><td><p>Top row:</p>
dino@11 2284
dino@11 2285 <p class="filterformula">FACTOR<sub>x</sub>=1/(3*dx)<br/>
dino@11 2286 K<sub>x</sub> =<br/>
dino@11 2287     |  0  0  0 |<br/>
dino@11 2288     | -2  0  2 |<br/>
dino@11 2289     | -1  0  1 |<br/>
dino@11 2290 <br/>
dino@11 2291 FACTOR<sub>y</sub>=1/(2*dy)<br/>
dino@11 2292 K<sub>y</sub> =  <br/>
dino@11 2293     |  0  0  0 |<br/>
dino@11 2294     | -1 -2 -1 |<br/>
dino@11 2295     |  1  2  1 |</p>
dino@11 2296 </td><td><p>Top/right corner:</p>
dino@11 2297
dino@11 2298 <p class="filterformula">FACTOR<sub>x</sub>=2/(3*dx)<br/>
dino@11 2299 K<sub>x</sub> =<br/>
dino@11 2300     |  0  0  0 |<br/>
dino@11 2301     | -2  2  0 |<br/>
dino@11 2302     | -1  1  0 |<br/>
dino@11 2303 <br/>
dino@11 2304 FACTOR<sub>y</sub>=2/(3*dy)<br/>
dino@11 2305 K<sub>y</sub> =  <br/>
dino@11 2306     |  0  0  0 |<br/>
dino@11 2307     | -1 -2  0 |<br/>
dino@11 2308     |  1  2  0 |</p>
dino@11 2309 </td></tr><tr><td><p>Left column:</p>
dino@11 2310
dino@11 2311 <p class="filterformula">FACTOR<sub>x</sub>=1/(2*dx)<br/>
dino@11 2312 K<sub>x</sub> =<br/>
dino@11 2313     | 0 -1  1 |<br/>
dino@11 2314     | 0 -2  2 |<br/>
dino@11 2315     | 0 -1  1 |<br/>
dino@11 2316 <br/>
dino@11 2317 FACTOR<sub>y</sub>=1/(3*dy)<br/>
dino@11 2318 K<sub>y</sub> =  <br/>
dino@11 2319     |  0 -2 -1 |<br/>
dino@11 2320     |  0  0  0 |<br/>
dino@11 2321     |  0  2  1 |</p>
dino@11 2322 </td><td><p>Interior pixels:</p>
dino@11 2323
dino@11 2324 <p class="filterformula">FACTOR<sub>x</sub>=1/(4*dx)<br/>
dino@11 2325 K<sub>x</sub> =<br/>
dino@11 2326     | -1  0  1 |<br/>
dino@11 2327     | -2  0  2 |<br/>
dino@11 2328     | -1  0  1 |<br/>
dino@11 2329 <br/>
dino@11 2330 FACTOR<sub>y</sub>=1/(4*dy)<br/>
dino@11 2331 K<sub>y</sub> =  <br/>
dino@11 2332     | -1 -2 -1 |<br/>
dino@11 2333     |  0  0  0 |<br/>
dino@11 2334     |  1  2  1 |</p>
dino@11 2335 </td><td><p>Right column:</p>
dino@11 2336
dino@11 2337 <p class="filterformula">FACTOR<sub>x</sub>=1/(2*dx)<br/>
dino@11 2338 K<sub>x</sub> =<br/>
dino@11 2339     | -1  1  0|<br/>
dino@11 2340     | -2  2  0|<br/>
dino@11 2341     | -1  1  0|<br/>
dino@11 2342 <br/>
dino@11 2343 FACTOR<sub>y</sub>=1/(3*dy)<br/>
dino@11 2344 K<sub>y</sub> =  <br/>
dino@11 2345     | -1 -2  0 |<br/>
dino@11 2346     |  0  0  0 |<br/>
dino@11 2347     |  1  2  0 |</p>
dino@11 2348 </td></tr><tr><td><p>Bottom/left corner:</p>
dino@11 2349
dino@11 2350 <p class="filterformula">FACTOR<sub>x</sub>=2/(3*dx)<br/>
dino@11 2351 K<sub>x</sub> =<br/>
dino@11 2352     | 0 -1  1 |<br/>
dino@11 2353     | 0 -2  2 |<br/>
dino@11 2354     | 0  0  0 |<br/>
dino@11 2355 <br/>
dino@11 2356 FACTOR<sub>y</sub>=2/(3*dy)<br/>
dino@11 2357 K<sub>y</sub> =  <br/>
dino@11 2358     |  0 -2 -1 |<br/>
dino@11 2359     |  0  2  1 |<br/>
dino@11 2360     |  0  0  0 |</p>
dino@11 2361 </td><td><p>Bottom row:</p>
dino@11 2362
dino@11 2363 <p class="filterformula">FACTOR<sub>x</sub>=1/(3*dx)<br/>
dino@11 2364 K<sub>x</sub> =<br/>
dino@11 2365     | -1  0  1 |<br/>
dino@11 2366     | -2  0  2 |<br/>
dino@11 2367     |  0  0  0 |<br/>
dino@11 2368 <br/>
dino@11 2369 FACTOR<sub>y</sub>=1/(2*dy)<br/>
dino@11 2370 K<sub>y</sub> =  <br/>
dino@11 2371     | -1 -2 -1 |<br/>
dino@11 2372     |  1  2  1 |<br/>
dino@11 2373     |  0  0  0 |</p>
dino@11 2374 </td><td><p>Bottom/right corner:</p>
dino@11 2375
dino@11 2376 <p class="filterformula">FACTOR<sub>x</sub>=2/(3*dx)<br/>
dino@11 2377 K<sub>x</sub> =<br/>
dino@11 2378     | -1  1  0 |<br/>
dino@11 2379     | -2  2  0 |<br/>
dino@11 2380     |  0  0  0 |<br/>
dino@11 2381 <br/>
dino@11 2382 FACTOR<sub>y</sub>=2/(3*dy)<br/>
dino@11 2383 K<sub>y</sub> =  <br/>
dino@11 2384     | -1 -2  0 |<br/>
dino@11 2385     |  1  2  0 |<br/>
dino@11 2386     |  0  0  0 |</p>
dino@11 2387 </td></tr></tbody></table>
dino@11 2388
dino@11 2389 <p>L, the unit vector from the image sample to the light, is calculated as
dino@11 2390 follows:</p>
dino@11 2391
dino@11 2392 <p>For Infinite light sources it is constant:</p>
dino@11 2393
dino@11 2394 <p class="filterformula">L<sub>x</sub> = cos(azimuth)*cos(elevation)<br/>
dino@11 2395 L<sub>y</sub> = sin(azimuth)*cos(elevation)<br/>
dino@11 2396 L<sub>z</sub> = sin(elevation)</p>
dino@11 2397
dino@11 2398 <p>For Point and spot lights it is a function of position:</p>
dino@11 2399
dino@11 2400 <p class="filterformula">L<sub>x</sub> = Light<sub>x</sub> - x<br/>
dino@11 2401 L<sub>y</sub> = Light<sub>y</sub> - y<br/>
dino@11 2402 L<sub>z</sub> = Light<sub>z</sub> - Z(x,y)<br/>
dino@11 2403 <br/>
dino@11 2404 L = (L<sub>x</sub>, L<sub>y</sub>, L<sub>z</sub>) / Norm(L<sub>x</sub>,
dino@11 2405 L<sub>y</sub>, L<sub>z</sub>)</p>
dino@11 2406
dino@11 2407 <p>where Light<sub>x</sub>, Light<sub>y</sub>, and Light<sub>z</sub> are the
dino@11 2408 input light position.</p>
dino@11 2409
dino@11 2410 <p>L<sub>r</sub>,L<sub>g</sub>,L<sub>b</sub>, the light color vector, is a
dino@11 2411 function of position in the spot light case only:</p>
dino@11 2412
dino@11 2413 <p class="filterformula">L<sub>r</sub> =
dino@11 2414 Light<sub>r</sub>*pow((-L.S),specularExponent)<br/>
dino@11 2415 L<sub>g</sub> = Light<sub>g</sub>*pow((-L.S),specularExponent)<br/>
dino@11 2416 L<sub>b</sub> = Light<sub>b</sub>*pow((-L.S),specularExponent)</p>
dino@11 2417
dino@11 2418 <p>where S is the unit vector pointing from the light to the point
dino@11 2419 (pointsAtX, pointsAtY, pointsAtZ) in the x-y plane:</p>
dino@11 2420
dino@11 2421 <p class="filterformula">S<sub>x</sub> = pointsAtX - Light<sub>x</sub><br/>
dino@11 2422 S<sub>y</sub> = pointsAtY - Light<sub>y</sub><br/>
dino@11 2423 S<sub>z</sub> = pointsAtZ - Light<sub>z</sub><br/>
dino@11 2424 <br/>
dino@11 2425 S = (S<sub>x</sub>, S<sub>y</sub>, S<sub>z</sub>) / Norm(S<sub>x</sub>,
dino@11 2426 S<sub>y</sub>, S<sub>z</sub>)</p>
dino@11 2427
dino@11 2428 <p>If L.S is positive, no light is present. (L<sub>r</sub> = L<sub>g</sub> =
dino@11 2429 L<sub>b</sub> = 0). If <a href="#feSpotLightLimitingConeAngleAttribute"><span class="attr-name">‘limitingConeAngle’</span></a> is specified, -L.S &lt; cos(limitingConeAngle) also indicates that no light is present.</p>
dino@11 2430
dino@11 2431 <div class="adef-list">
dino@11 2432 <p><em>Attribute definitions:</em></p>
dino@11 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">&lt;number&gt;</a></em>"</dt><dd>height of surface when A<sub>in</sub> = 1.<br/>
dino@11 2434 If the attribute is not specified, then the effect is as if a value of
dino@11 2435 <span class="attr-value">1</span> were specified.<br/>
dino@11 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">&lt;number&gt;</a></em>"</dt><dd>kd in Phong lighting model. In SVG, this can be any non-negative
dino@11 2437 number.<br/>
dino@11 2438 If the attribute is not specified, then the effect is as if a value of
dino@11 2439 <span class="attr-value">1</span> were specified.<br/>
dino@11 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">&lt;number-optional-number&gt;</a></span>"</dt><dd>The first number is the &lt;dx&gt; value. The second number is the
dino@11 2441 &lt;dy&gt; value. If the &lt;dy&gt; value is not specified, it defaults
dino@11 2442 to the same value as &lt;dx&gt;. Indicates the intended distance in
dino@11 2443 current filter units (i.e., units as determined by the value of
dino@11 2444 attribute <a href="#FilterElementPrimitiveUnitsAttribute"><span class="attr-name">‘primitiveUnits’</span></a>) for <code>dx</code> and
dino@11 2445 <code>dy</code>, respectively, in the <a href="#SurfaceNormalCalculations">surface normal calculation
dino@11 2446 formulas</a>. By specifying value(s) for <span class="attr-name">kernelUnitLength</span>, the kernel becomes defined
dino@11 2447 in a scalable, abstract coordinate system. If <span class="attr-name">kernelUnitLength</span> is not specified, the
dino@11 2448 <code>dx</code> and <code>dy</code> values should represent very small
dino@11 2449 deltas relative to a given <code>(x,y)</code> position, which might be
dino@11 2450 implemented in some cases as one pixel in the intermediate image
dino@11 2451 offscreen bitmap, which is a pixel-based coordinate system, and thus
dino@11 2452 potentially not scalable. For some level of consistency across display
dino@11 2453 media and user agents, it is necessary that a value be provided for at
dino@11 2454 least one of <a href="#FilterElementFilterResAttribute"><span class="attr-name">‘filterRes’</span></a> and <span class="attr-name">kernelUnitLength</span>. Discussion of intermediate
dino@11 2455 images are in the <a href="#Introduction">Introduction</a> and in the
dino@11 2456 description of attribute <a href="#FilterElementFilterResAttribute"><span class="attr-name">‘filterRes’</span></a>.<br/>
dino@11 2457 If a negative or zero value is specified the default value will be used
dino@11 2458 instead. <br/>
dino@11 2459 <span class="anim-target">Animatable: yes.</span></dd></dl>
dino@11 2460 </div>
dino@11 2461
dino@11 2462 <p>The light source is defined by one of the child elements <a href="#feDistantLightElement"><span class="element-name">‘feDistantLight’</span></a>,
dino@11 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
dino@11 2464 by property <a href="#LightingColorProperty"><span class="prop-name">‘lighting-color’</span></a>.</p>
dino@11 2465
dino@13 2466 <h2 id="feDisplacementMapElement">16 Filter primitive <span class="element-name">‘feDisplacementMap’</span></h2>
dino@11 2467
dino@11 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:
dino@11 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>
dino@11 2470
dino@11 2471 <p>This filter primitive uses the pixels values from the image from <a href="#feDisplacementMapIn2Attribute"><span class="attr-name">‘in2’</span></a>
dino@11 2472 to spatially displace the image from <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a>.
dino@11 2473 This is the transformation to be performed:</p>
dino@11 2474
dino@13 2475 <pre> P'(x,y) ← P( x + scale * (XC(x,y) - .5), y + scale * (YC(x,y) - .5))
dino@13 2476 </pre>
dino@11 2477
dino@11 2478 <p>where P(x,y) is the input image, <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a>, and
dino@11 2479 P'(x,y) is the destination. XC(x,y) and YC(x,y) are the component values of
dino@11 2480 the channel designated by the <a href="#feDisplacementMapXChannelSelectorAttribute"><span class="attr-name">‘xChannelSelector’</span></a> and
dino@11 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>
dino@11 2482 to control displacement in x and the G component of Image2 to control
dino@11 2483 displacement in y, set <a href="#feDisplacementMapXChannelSelectorAttribute"><span class="attr-name">‘xChannelSelector’</span></a> to <span class="attr-value">"R"</span> and
dino@11 2484 <a href="#feDisplacementMapYChannelSelectorAttribute"><span class="attr-name">‘yChannelSelector’</span></a> to <span class="attr-value">"G"</span>.</p>
dino@11 2485
dino@11 2486 <p>The displacement map, <a href="#feDisplacementMapIn2Attribute"><span class="attr-name">‘in2’</span></a>, defines the inverse of the mapping
dino@11 2487 performed.</p>
dino@11 2488
dino@11 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>
dino@11 2490
dino@11 2491 <p>This filter can have arbitrary non-localized effect on the input which
dino@11 2492 might require substantial buffering in the processing pipeline. However with
dino@11 2493 this formulation, any intermediate buffering needs can be determined by
dino@11 2494 <a href="#feDisplacementMapScaleAttribute"><span class="attr-name">‘scale’</span></a> which represents the maximum range of displacement in either x
dino@11 2495 or y.</p>
dino@11 2496
dino@11 2497 <p>When applying this filter, the source pixel location will often lie
dino@11 2498 between several source pixels. In this case it is recommended that high
dino@11 2499 quality viewers apply an interpolent on the surrounding pixels, for example
dino@11 2500 bilinear or bicubic, rather than simply selecting the nearest source pixel.
dino@11 2501 Depending on the speed of the available interpolents, this choice may be
dino@11 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
dino@11 2503 setting.</p>
dino@11 2504
dino@11 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
dino@11 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.
dino@11 2507 The <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a> source image must remain in its current color space.
dino@11 2508 </p>
dino@11 2509
dino@11 2510 <div class="adef-list">
dino@11 2511 <p><em>Attribute definitions:</em></p>
dino@11 2512 <dl><dt id="feDisplacementMapScaleAttribute"><span class="adef">scale</span>
dino@11 2513 = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber">&lt;number&gt;</a></em>"</dt><dd>Displacement scale factor. The amount is expressed in the coordinate
dino@11 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>
dino@11 2515 element.<br/>
dino@11 2516 When the value of this attribute is <span class="attr-value">0</span>,
dino@11 2517 this operation has no effect on the source image.<br/>
dino@11 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>
dino@11 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.
dino@11 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>.
dino@11 2521 <br/>
dino@11 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.
dino@11 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>.
dino@11 2524 <br/>
dino@11 2525 <span class="anim-target">Animatable: yes.</span></dd><dt id="feDisplacementMapIn2Attribute"><span class="adef">in2</span> =
dino@11 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
dino@11 2527 image from attribute <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a>. This attribute can take on the same
dino@11 2528 values as the <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a> attribute.<br/>
dino@11 2529 <span class="anim-target">Animatable: yes.</span></dd></dl>
dino@11 2530 </div>
dino@11 2531
dino@13 2532 <h2 id="feFloodElement">17 Filter primitive <span class="element-name">‘feFlood’</span></h2>
dino@11 2533
dino@11 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:
dino@11 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>
dino@11 2536
dino@11 2537 <p>This filter primitive creates a rectangle filled with the color and
dino@11 2538 opacity values from properties <span class="prop-name">‘flood-color’</span>
dino@11 2539 and <span class="prop-name">‘flood-opacity’</span>. The rectangle is as large
dino@11 2540 as the <a href="#FilterPrimitiveSubRegion">filter primitive subregion</a>
dino@11 2541 established by the <span class="element-name">‘feFlood’</span> element.</p>
dino@11 2542
dino@11 2543 <div class="adef-list">
dino@11 2544   </div>
dino@11 2545
dino@11 2546 <p>The <span class="prop-name">‘flood-color’</span> property indicates what
dino@11 2547 color to use to flood the current <a href="#FilterPrimitiveSubRegion">filter
dino@11 2548 primitive subregion</a>. The keyword <span class="attr-value">currentColor</span> and ICC colors can be specified in the
dino@11 2549 same manner as within a &lt;paint&gt; specification for the <span class="prop-name">‘fill’</span> and <span class="prop-name">‘stroke’</span>
dino@11 2550 properties.</p>
dino@11 2551
dino@11 2552 <div class="propdef">
dino@11 2553 <dl><dt id="FloodColorProperty"><span class="propdef-title prop-name">‘flood-color’</span></dt><dd>
dino@11 2554 <table summary="flood-color property" class="propinfo" cellspacing="0" cellpadding="0"><tbody><tr valign="baseline"><td><em>Value:</em>  </td><td>currentColor |<br/>
dino@11 2555 <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeColor">&lt;color&gt;</a>
dino@11 2556 [<a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeICCColor">&lt;icccolor&gt;</a>] |<br/>
dino@11 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>
dino@11 2558 </dd></dl>
dino@11 2559 </div>
dino@11 2560
dino@11 2561 <p>The <span class="prop-name">‘flood-opacity’</span> property defines the
dino@11 2562 opacity value to use across the entire <a href="#FilterPrimitiveSubRegion">filter primitive subregion</a>.</p>
dino@11 2563
dino@11 2564 <div class="propdef">
dino@11 2565 <dl><dt id="OpacityFloodOpacityProperty"><span class="propdef-title prop-name">‘flood-opacity’</span></dt><dd>
dino@11 2566 <table summary="flood-opacity property" class="propinfo" cellspacing="0" cellpadding="0"><tbody><tr valign="baseline"><td><em>Value:</em>  </td><td>&lt;opacity-value&gt; | <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>
dino@11 2567 </dd></dl>
dino@11 2568 </div>
dino@11 2569
dino@13 2570 <h2 id="feGaussianBlurElement">18 Filter primitive <span class="element-name">‘feGaussianBlur’</span></h2>
dino@11 2571
dino@11 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:
dino@11 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>
dino@11 2574
ed@22 2575
dino@11 2576 <p>This filter primitive performs a Gaussian blur on the input image.</p>
dino@11 2577
dino@11 2578 <p>The Gaussian blur kernel is an approximation of the normalized
dino@11 2579 convolution:</p>
dino@11 2580
dino@11 2581 <p class="filterformula">G(x,y) = H(x)I(y)</p>
ed@22 2582 <p>where</p>
ed@22 2583 <p class="filterformula">H(x) = exp(-x<sup>2</sup>/ (2s<sup>2</sup>)) / sqrt(2* pi*s<sup>2</sup>)</p>
dino@11 2584 <p>and</p>
ed@22 2585 <p class="filterformula">I(x) = exp(-y<sup>2</sup>/ (2t<sup>2</sup>)) / sqrt(2* pi*t<sup>2</sup>)</p>
dino@11 2586 <p>with 's' being the standard deviation in the x direction
ed@22 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>
ed@22 2588
ed@22 2589 <p>The value of <a href="#feGaussianBlurStdDeviationAttribute"><span class="attr-name">‘stdDeviation’</span></a> can be either one or two numbers.
dino@11 2590 If two numbers are provided, the first number represents a standard deviation
dino@11 2591 value along the x-axis of the current coordinate system and the second value
dino@11 2592 represents a standard deviation in Y. If one number is provided, then that
dino@11 2593 value is used for both X and Y.</p>
dino@11 2594
ed@22 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
dino@11 2596 separable convolution.</p>
dino@11 2597
dino@11 2598 <p>For larger values of 's' (s &gt;= 2.0), an approximation can be used:
dino@11 2599 Three successive box-blurs build a piece-wise quadratic convolution kernel,
dino@11 2600 which approximates the Gaussian kernel to within roughly 3%.</p>
dino@11 2601
dino@11 2602 <p class="filterformula">let d = floor(s * 3*sqrt(2*pi)/4 + 0.5)</p>
dino@11 2603
dino@11 2604 <p>... if d is odd, use three box-blurs of size 'd', centered on the output
dino@11 2605 pixel.</p>
dino@11 2606
dino@11 2607 <p>... if d is even, two box-blurs of size 'd' (the first one centered on the
dino@11 2608 pixel boundary between the output pixel and the one to the left, the second
dino@11 2609 one centered on the pixel boundary between the output pixel and the one to
dino@11 2610 the right) and one box blur of size 'd+1' centered on the output pixel.</p>
dino@11 2611
ed@22 2612 <p>The approximation formula also applies correspondingly to 't'.</p>
ed@22 2613
dino@11 2614 <p>Frequently this operation will take place on alpha-only images, such as
dino@11 2615 that produced by the built-in input, <a href="#SourceAlpha"><span class="attr-value">SourceAlpha</span></a>. The implementation may notice this
dino@11 2616 and optimize the single channel case. If the input has infinite extent and is
ed@26 2617 constant (e.g <span class="attr-value"><a href="#FillPaint">FillPaint</a></span>,
ed@26 2618 this operation has no effect. If the input has infinite extent and the filter result
ed@26 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>
dino@11 2620
dino@11 2621 <div class="adef-list">
dino@11 2622 <p><em>Attribute definitions:</em></p>
dino@11 2623 <dl><dt id="feGaussianBlurStdDeviationAttribute"><span class="adef">stdDeviation</span> =
dino@11 2624 "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumberOptionalNumber">&lt;number-optional-number&gt;</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">&lt;number&gt;</a>
dino@11 2625 s are provided, the first number represents a standard deviation value
dino@11 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>
dino@11 2627 element. The second value represents a standard deviation in Y. If one
dino@11 2628 number is provided, then that value is used for both X and Y.<br/>
dino@11 2629 A value of zero disables the effect of the given filter primitive (i.e., the result is the filter input image).<br/>
ed@22 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,
ed@22 2631 then the effect is that the blur is only applied in the direction that has a non-zero value.
ed@22 2632 <br/>
ed@22 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/>
dino@11 2634 <span class="anim-target">Animatable: yes.</span></dd></dl>
dino@11 2635 </div>
dino@11 2636
dino@11 2637 <p><a href="#AnExample">The example</a> at the start of this chapter makes
dino@11 2638 use of the <a href="#feGaussianBlurElement"><span class="element-name">‘feGaussianBlur’</span></a> filter primitive
dino@11 2639 to create a drop shadow effect.</p>
dino@11 2640
ed@22 2641
dino@13 2642 <h2 id="feUnsharpMaskElement">19 Filter primitive <span class="element-name">‘feUnsharpMask’</span></h2>
dino@11 2643
dino@11 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:
dino@11 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>
dino@11 2646
dino@11 2647 <p>This filter primitive performs an image sharpening operation on the input image. This is traditionally known as an unsharp mask operation.</p>
dino@11 2648
dino@11 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>
dino@11 2650
dino@11 2651 <p>
dino@11 2652 For controlling the result there are three attributes that can be used:
dino@11 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>
dino@11 2654 </p>
dino@11 2655
dino@13 2656 <h2 id="feImageElement">20 Filter primitive <span class="element-name">‘feImage’</span></h2>
dino@11 2657
dino@11 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:
dino@11 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>
dino@11 2660
ed@23 2661
dino@11 2662 <p>This filter primitive refers to a graphic external to this filter element,
dino@11 2663 which is loaded or rendered into an RGBA raster and becomes the result of the
dino@11 2664 filter primitive.</p>
dino@11 2665
dino@11 2666 <p>This filter primitive can refer to an external image or can be a reference
dino@11 2667 to another piece of SVG. It produces an image similar to the built-in image
dino@11 2668 source <a href="#SourceGraphic"><span class="attr-value">SourceGraphic</span></a> except that the graphic comes
dino@11 2669 from an external source.</p>
dino@11 2670
dino@11 2671 <p>If the <span class="attr-name">xlink:href</span> references a stand-alone
dino@11 2672 image resource such as a JPEG, PNG or SVG file, then the image resource is
dino@11 2673 rendered according to the behavior of the <span class="element-name">‘image’</span> element; otherwise, the referenced
dino@11 2674 resource is rendered according to the behavior of the <span class="element-name">‘use’</span> element. In either case, the current user
dino@11 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.
dino@11 2676 The processing of the <span class="attr-name">preserveAspectRatio</span>
dino@11 2677 attribute on the <span class="element-name">‘feImage’</span> element is
dino@11 2678 identical to that of the <a href="struct.html#ImageElement"><span class="element-name">‘image’</span></a> element.</p>
dino@11 2679
dino@11 2680 <p><span class="requirement" id="assert_hqImageResampling">When the referenced image must be resampled to match the device coordinate
dino@11 2681 system, it is recommended that high quality viewers make use of appropriate
dino@11 2682 interpolation techniques, for example bilinear or bicubic.</span> Depending on the
dino@11 2683 speed of the available interpolents, this choice may be affected by the <span class="prop-name">‘image-rendering’</span> property setting.</p>
dino@11 2684
dino@11 2685 <div class="adef-list">
dino@11 2686 <p><em>Attribute definitions:</em></p>
dino@11 2687 <dl><dt id="feImageHrefAttribute"><span class="adef">xlink:href</span> =
ed@17 2688 "<span class="attr-value">&lt;IRI&gt;</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>
dino@11 2689 to an image resource or to an element.
dino@11 2690 <br/>
ed@17 2691 <span class="anim-target">Animatable: yes.</span></dd><dt id="feImageElementPreserveAspectRatioAttribute">
ed@17 2692 <span class="adef">preserveAspectRatio</span> = "<span class="attr-value">[defer] &lt;align&gt; [&lt;meetOrSlice&gt;]</span>"
ed@17 2693 </dt><dd>
ed@17 2694 <p>
ed@17 2695 See <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/coords.html#PreserveAspectRatioAttribute"><span class="attr-name">‘preserveAspectRatio’</span></a>.
ed@17 2696 </p>
ed@17 2697 <p>
ed@17 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>.
ed@17 2699 </p>
ed@17 2700 <p><span class="anim-target"><a href="animate.html#Animatable">Animatable</a>: yes.</span></p>
ed@17 2701 </dd></dl>
dino@11 2702 </div>
dino@11 2703
ed@23 2704 <p><span class="example-ref">Example feImage</span> illustrates how images are placed relative
ed@23 2705 to an object. From left to right:</p>
ed@23 2706 <ul><li>
ed@23 2707 The default placement of an image. Note that the image is
ed@23 2708 centered in the <a href="#FilterEffectsRegion"><span class="svg-term">filter region</span></a> and has the maximum size that will
ed@23 2709 fit in the region consistent with preserving the aspect ratio.
ed@23 2710 </li><li>
ed@23 2711 The image stretched to fit the bounding box of an object.
ed@23 2712 </li><li>
ed@23 2713 The image placed using user coordinates. Note that the image is
ed@23 2714 first centered in a box the size of the <a href="#FilterEffectsRegion"><span class="svg-term">filter region</span></a> and has the
ed@23 2715 maximum size that will fit in the box consistent with preserving
ed@23 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
ed@23 2717 <a href="filters.html#FilterPrimitiveYAttribute"><span class="attr-name">‘y’</span></a> values relative to the viewport the object is in.
ed@23 2718 </li></ul>
ed@23 2719
ed@23 2720 <pre class="xml">&lt;svg width="600" height="250" viewBox="0 0 600 250"
ed@23 2721 xmlns="http://www.w3.org/2000/svg"
ed@23 2722 xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
ed@23 2723 &lt;title&gt;Example feImage - Examples of feImage use&lt;/title&gt;
ed@23 2724 &lt;desc&gt;Three examples of using feImage, the first showing the
ed@23 2725 default rendering, the second showing the image fit
ed@23 2726 to a box and the third showing the image
ed@23 2727 shifted and clipped.&lt;/desc&gt;
ed@23 2728 &lt;defs&gt;
ed@23 2729 &lt;filter id="Default"&gt;
ed@23 2730 &lt;feImage xlink:href="smiley.png" /&gt;
ed@23 2731 &lt;/filter&gt;
ed@23 2732 &lt;filter id="Fitted" primitiveUnits="objectBoundingBox"&gt;
ed@23 2733 &lt;feImage xlink:href="smiley.png"
ed@23 2734 x="0" y="0" width="100%" height="100%"
ed@23 2735 preserveAspectRatio="none"/&gt;
ed@23 2736 &lt;/filter&gt;
ed@23 2737 &lt;filter id="Shifted"&gt;
ed@23 2738 &lt;feImage xlink:href="smiley.png"
ed@23 2739 x="500" y="5"/&gt;
ed@23 2740 &lt;/filter&gt;
ed@23 2741 &lt;/defs&gt;
ed@23 2742 &lt;rect fill="none" stroke="blue"
ed@23 2743 x="1" y="1" width="598" height="248"/&gt;
ed@23 2744 &lt;g&gt;
ed@23 2745 &lt;rect x="50" y="25" width="100" height="200" filter="url(#Default)"/&gt;
ed@23 2746 &lt;rect x="50" y="25" width="100" height="200" fill="none" stroke="green"/&gt;
ed@23 2747 &lt;rect x="250" y="25" width="100" height="200" filter="url(#Fitted)"/&gt;
ed@23 2748 &lt;rect x="250" y="25" width="100" height="200" fill="none" stroke="green"/&gt;
ed@23 2749 &lt;rect x="450" y="25" width="100" height="200" filter="url(#Shifted)"/&gt;
ed@23 2750 &lt;rect x="450" y="25" width="100" height="200" fill="none" stroke="green"/&gt;
ed@23 2751 &lt;/g&gt;
ed@23 2752 &lt;/svg&gt;</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>
ed@23 2753
ed@23 2754
dino@13 2755 <h2 id="feMergeElement">21 Filter primitive <span class="element-name">‘feMerge’</span></h2>
dino@11 2756
dino@11 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:
dino@11 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>
dino@11 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:
dino@11 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>
dino@11 2761
dino@11 2762 <p>This filter primitive composites input image layers on top of each other
dino@11 2763 using the <em>over</em> operator with <em>Input1</em> (corresponding to the
dino@11 2764 first <a href="#feMergeNodeElement"><span class="element-name">‘feMergeNode’</span></a> child element) on the bottom
dino@11 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>
dino@11 2766
dino@11 2767 <p>Many effects produce a number of intermediate layers in order to create
dino@11 2768 the final output image. This filter allows us to collapse those into a single
dino@11 2769 image. Although this could be done by using n-1 Composite-filters, it is more
dino@11 2770 convenient to have this common operation available in this form, and offers
dino@11 2771 the implementation some additional flexibility.</p>
dino@11 2772
dino@11 2773 <p>Each 'feMerge' element can have any number of 'feMergeNode' subelements,
dino@11 2774 each of which has an <a href="#CommonAttributes"><span class="attr-name">in</span></a> attribute.</p>
dino@11 2775
dino@11 2776 <p>The canonical implementation of feMerge is to render the entire effect
dino@11 2777 into one RGBA layer, and then render the resulting layer on the output
dino@11 2778 device. In certain cases (in particular if the output device itself is a
dino@11 2779 continuous tone device), and since merging is associative, it might be a
dino@11 2780 sufficient approximation to evaluate the effect one layer at a time and
dino@11 2781 render each layer individually onto the output device bottom to top.</p>
dino@11 2782
dino@11 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
dino@11 2784 filter, the implementation is encouraged to render the layers up to that
dino@11 2785 point, and then render the <a href="#SourceGraphic"><span class="attr-value">SourceGraphic</span></a> directly from its vector
dino@11 2786 description on top.</p>
dino@11 2787
dino@11 2788 <p id="feMergeNode"><a href="#AnExample">The example</a> at the start of this chapter makes
dino@11 2789 use of the <span class="element-name">feMerge</span> filter primitive to
dino@11 2790 composite two intermediate filter results together.</p>
dino@11 2791
dino@13 2792 <h2 id="feMorphologyElement">22 Filter primitive <span class="element-name">‘feMorphology’</span></h2>
dino@11 2793
dino@11 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:
dino@11 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>
dino@11 2796
ed@17 2797
dino@11 2798 <p>This filter primitive performs "fattening" or "thinning" of artwork. It is
dino@11 2799 particularly useful for fattening or thinning an alpha channel.</p>
dino@11 2800
dino@11 2801 <p>The dilation (or erosion) kernel is a rectangle with a width of
dino@11 2802 2*<em>x-radius</em> and a height of 2*<em>y-radius</em>. In dilation, the
dino@11 2803 output pixel is the individual component-wise maximum of the corresponding
dino@11 2804 R,G,B,A values in the input image's kernel rectangle. In erosion, the output
dino@11 2805 pixel is the individual component-wise minimum of the corresponding R,G,B,A
dino@11 2806 values in the input image's kernel rectangle.</p>
dino@11 2807
dino@11 2808 <p>Frequently this operation will take place on alpha-only images, such as
dino@11 2809 that produced by the built-in input, <a href="#SourceAlpha"><span class="attr-value">SourceAlpha</span></a>. In that case, the implementation
dino@11 2810 might want to optimize the single channel case.</p>
dino@11 2811
ed@26 2812 <p>If the input has infinite extent and is constant (e.g <span class="attr-value"><a href="#FillPaint">FillPaint</a></span>
ed@26 2813 where the fill is a solid color), this operation has no effect.
ed@26 2814 If the input has infinite extent and the filter result
ed@26 2815 is the input to an <a href="#feTileElement"><span class="element-name">‘feTile’</span></a>, the filter is evaluated with
ed@26 2816 periodic boundary conditions.</p>
dino@11 2817
dino@11 2818 <p>Because <span class="element-name">‘feMorphology’</span> operates on
dino@11 2819 premultipied color values, it will always result in color values less than or
dino@11 2820 equal to the alpha channel.</p>
dino@11 2821
dino@11 2822 <div class="adef-list">
dino@11 2823 <p><em>Attribute definitions:</em></p>
dino@11 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)
ed@17 2825 the source graphic.
ed@17 2826 The lacuna value for <a href="#feMorphologyOperatorAttribute"><span class="attr-name">‘operator’</span></a> is <span class="attr-value">erode</span>.
ed@17 2827 <br/>
dino@11 2828 <span class="anim-target">Animatable: yes.</span></dd><dt id="feMorphologyRadiusAttribute"><span class="adef">radius</span> =
dino@11 2829 "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumberOptionalNumber">&lt;number-optional-number&gt;</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">&lt;number&gt;</a>
dino@11 2830 s are provided, the first number represents a x-radius and the second
dino@11 2831 value represents a y-radius. If one number is provided, then that value
dino@11 2832 is used for both X and Y. The values are in the coordinate system
dino@11 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>
dino@11 2834 element.<br/>
dino@11 2835 A negative or zero value disables the effect of the given filter
dino@11 2836 primitive (i.e., the result is a transparent black image).<br/>
dino@11 2837 If the attribute is not specified, then the effect is as if a value of
dino@11 2838 <span class="attr-value">0</span> were specified.<br/>
dino@11 2839 <span class="anim-target">Animatable: yes.</span></dd></dl>
dino@11 2840 </div>
dino@11 2841
ed@17 2842
dino@11 2843 <pre class="xml">&lt;?xml version="1.0"?&gt;
dino@11 2844 &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
dino@11 2845 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
dino@11 2846 &lt;svg width="5cm" height="7cm" viewBox="0 0 700 500"
dino@11 2847 xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
dino@11 2848 &lt;title&gt;Example feMorphology - Examples of erode and dilate&lt;/title&gt;
dino@11 2849 &lt;desc&gt;Five text strings drawn as outlines.
dino@11 2850 The first is unfiltered. The second and third use 'erode'.
dino@11 2851 The fourth and fifth use 'dilate'.&lt;/desc&gt;
dino@11 2852 &lt;defs&gt;
dino@11 2853 &lt;filter id="Erode3"&gt;
dino@11 2854 &lt;feMorphology operator="erode" in="SourceGraphic" radius="3" /&gt;
dino@11 2855 &lt;/filter&gt;
dino@11 2856 &lt;filter id="Erode6"&gt;
dino@11 2857 &lt;feMorphology operator="erode" in="SourceGraphic" radius="6" /&gt;
dino@11 2858 &lt;/filter&gt;
dino@11 2859 &lt;filter id="Dilate3"&gt;
dino@11 2860 &lt;feMorphology operator="dilate" in="SourceGraphic" radius="3" /&gt;
dino@11 2861 &lt;/filter&gt;
dino@11 2862 &lt;filter id="Dilate6"&gt;
dino@11 2863 &lt;feMorphology operator="dilate" in="SourceGraphic" radius="6" /&gt;
dino@11 2864 &lt;/filter&gt;
dino@11 2865 &lt;/defs&gt;
dino@11 2866 &lt;rect fill="none" stroke="blue" stroke-width="2"
dino@11 2867 x="1" y="1" width="698" height="498"/&gt;
dino@11 2868 &lt;g enable-background="new" &gt;
dino@11 2869 &lt;g font-family="Verdana" font-size="75"
dino@11 2870 fill="none" stroke="black" stroke-width="6" &gt;
dino@11 2871 &lt;text x="50" y="90"&gt;Unfiltered&lt;/text&gt;
dino@11 2872 &lt;text x="50" y="180" filter="url(#Erode3)" &gt;Erode radius 3&lt;/text&gt;
dino@11 2873 &lt;text x="50" y="270" filter="url(#Erode6)" &gt;Erode radius 6&lt;/text&gt;
dino@11 2874 &lt;text x="50" y="360" filter="url(#Dilate3)" &gt;Dilate radius 3&lt;/text&gt;
dino@11 2875 &lt;text x="50" y="450" filter="url(#Dilate6)" &gt;Dilate radius 6&lt;/text&gt;
dino@11 2876 &lt;/g&gt;
dino@11 2877 &lt;/g&gt;
dino@11 2878 &lt;/svg&gt;</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>
dino@11 2879
dino@13 2880 <h2 id="feOffsetElement">23 Filter primitive <span class="element-name">‘feOffset’</span></h2>
dino@11 2881
dino@11 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:
dino@11 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>
dino@11 2884
dino@11 2885 <p>This filter primitive offsets the input image relative to its current
dino@11 2886 position in the image space by the specified vector.</p>
dino@11 2887
dino@11 2888 <p>This is important for effects like drop shadows.</p>
dino@11 2889
dino@11 2890 <p>When applying this filter, the destination location may be offset by a
dino@11 2891 fraction of a pixel in device space. <span class="requirement" id="assert_hqFeOffsetInterpolation">In this case a high quality viewer
dino@11 2892 should make use of appropriate interpolation techniques, for example bilinear
dino@11 2893 or bicubic.</span> This is especially recommended for dynamic viewers where this
dino@11 2894 interpolation provides visually smoother movement of images. For static
dino@11 2895 viewers this is less of a concern. Close attention should be made to the
dino@11 2896 <span class="prop-name">‘image-rendering’</span> property setting to
dino@11 2897 determine the authors intent.</p>
dino@11 2898
dino@11 2899 <div class="adef-list">
dino@11 2900 <p><em>Attribute definitions:</em></p>
dino@11 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">&lt;number&gt;</a></em>"</dt><dd>The amount to offset the input graphic along the x-axis. The offset
dino@11 2902 amount is expressed in the coordinate system established by attribute
dino@11 2903 <a href="#FilterElementPrimitiveUnitsAttribute"><span class="attr-name">‘primitiveUnits’</span></a> on the <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
dino@11 2904 element.<br/>
dino@11 2905 If the attribute is not specified, then the effect is as if a value of
dino@11 2906 <span class="attr-value">0</span> were specified.<br/>
dino@11 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">&lt;number&gt;</a></em>"</dt><dd>The amount to offset the input graphic along the y-axis. The offset
dino@11 2908 amount is expressed in the coordinate system established by attribute
dino@11 2909 <a href="#FilterElementPrimitiveUnitsAttribute"><span class="attr-name">‘primitiveUnits’</span></a> on the <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
dino@11 2910 element.<br/>
dino@11 2911 If the attribute is not specified, then the effect is as if a value of
dino@11 2912 <span class="attr-value">0</span> were specified.<br/>
dino@11 2913 <span class="anim-target">Animatable: yes.</span></dd></dl>
dino@11 2914 </div>
dino@11 2915
dino@11 2916 <p><a href="#AnExample">The example</a> at the start of this chapter makes
dino@11 2917 use of the <span class="element-name">feOffset</span> filter primitive to
dino@11 2918 offset the drop shadow from the original source graphic.</p>
dino@11 2919
dino@13 2920 <h2 id="feSpecularLightingElement">24 Filter primitive <span class="element-name">‘feSpecularLighting’</span></h2>
dino@11 2921
dino@11 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:
dino@11 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>
dino@11 2924
dino@11 2925 <p>This filter primitive lights a source graphic using the alpha channel as a
dino@11 2926 bump map. The resulting image is an RGBA image based on the light color. The
dino@11 2927 lighting calculation follows the standard specular component of the Phong
dino@11 2928 lighting model. The resulting image depends on the light color, light
dino@11 2929 position and surface geometry of the input bump map. The result of the
dino@11 2930 lighting calculation is added. The filter primitive assumes that the viewer
dino@11 2931 is at infinity in the z direction (i.e., the unit vector in the eye direction
dino@11 2932 is (0,0,1) everywhere).</p>
dino@11 2933
dino@11 2934 <p>This filter primitive produces an image which contains the specular
dino@11 2935 reflection part of the lighting calculation. Such a map is intended to be
dino@11 2936 combined with a texture using the <em>add</em> term of the
dino@11 2937 <em>arithmetic</em> <a href="#feCompositeElement"><span class="element-name">‘feComposite’</span></a> method. Multiple light sources
dino@11 2938 can be simulated by adding several of these light maps before applying it to
dino@11 2939 the texture image.</p>
dino@11 2940
dino@11 2941 <p>The resulting RGBA image is computed as follows:</p>
dino@11 2942
dino@11 2943 <p class="filterformula">S<sub>r</sub> = k<sub>s</sub> * pow(N.H,
dino@11 2944 specularExponent) * L<sub>r<br/>
dino@11 2945 </sub> S<sub>g</sub> = k<sub>s</sub> * pow(N.H, specularExponent) *
dino@11 2946 L<sub>g<br/>
dino@11 2947 </sub> S<sub>b</sub> = k<sub>s</sub> * pow(N.H, specularExponent) *
dino@11 2948 L<sub>b<br/>
dino@11 2949 </sub> S<sub>a</sub> = max(S<sub>r,</sub> S<sub>g,</sub> S<sub>b</sub>)</p>
dino@11 2950
dino@11 2951 <p>where</p>
dino@11 2952 <dl><dd>k<sub>s</sub> = specular lighting constant<br/>
dino@11 2953 N = surface normal unit vector, a function of x and y<br/>
dino@11 2954 H = "halfway" unit vector between eye unit vector and light unit
dino@11 2955 vector<br/>
dino@11 2956 <br/>
dino@11 2957 L<sub>r</sub>,L<sub>g</sub>,L<sub>b</sub> = RGB components of light</dd></dl>
dino@11 2958
dino@11 2959 <p>See <a href="#feDiffuseLighting"><span class="element-name">‘feDiffuseLighting’</span></a> for definition of N and
dino@11 2960 (L<sub>r</sub>, L<sub>g</sub>, L<sub>b</sub>).</p>
dino@11 2961
dino@11 2962 <p>The definition of H reflects our assumption of the constant eye vector E =
dino@11 2963 (0,0,1):</p>
dino@11 2964
dino@11 2965 <p class="filterformula">H = (L + E) / Norm(L+E)</p>
dino@11 2966
dino@11 2967 <p>where L is the light unit vector.</p>
dino@11 2968
dino@11 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
dino@11 2970 image. This is due to the fact that the specular result
dino@11 2971 (S<sub>r</sub>,S<sub>g</sub>,S<sub>b</sub>,S<sub>a</sub>) is meant to be
dino@11 2972 added to the textured image. The alpha channel of the result is the max of
dino@11 2973 the color components, so that where the specular light is zero, no additional
dino@11 2974 coverage is added to the image and a fully white highlight will add
dino@11 2975 opacity.</p>
dino@11 2976
dino@11 2977 <p>The <a href="#feDiffuseLighting"><span class="element-name">‘feDiffuseLighting’</span></a> and <span class="element-name">‘feSpecularLighting’</span> filters will often be
dino@11 2978 applied together. An implementation may detect this and calculate both maps
dino@11 2979 in one pass, instead of two.</p>
dino@11 2980
dino@11 2981 <div class="adef-list">
dino@11 2982 <p><em>Attribute definitions:</em></p>
dino@11 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">&lt;number&gt;</a></em>"</dt><dd>height of surface when A<sub>in</sub> = 1.<br/>
dino@11 2984 If the attribute is not specified, then the effect is as if a value of
dino@11 2985 <span class="attr-value">1</span> were specified.<br/>
dino@11 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">&lt;number&gt;</a></em>"</dt><dd>ks in Phong lighting model. In SVG, this can be any non-negative
dino@11 2987 number.<br/>
dino@11 2988 If the attribute is not specified, then the effect is as if a value of
dino@11 2989 <span class="attr-value">1</span> were specified.<br/>
dino@11 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">&lt;number&gt;</a></em>"</dt><dd>Exponent for specular term, larger is more "shiny". Range 1.0 to
dino@11 2991 128.0.<br/>
dino@11 2992 If the attribute is not specified, then the effect is as if a value of
dino@11 2993 <span class="attr-value">1</span> were specified.<br/>
dino@11 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">&lt;number-optional-number&gt;</a></span>"</dt><dd>The first number is the &lt;dx&gt; value. The second number is the
dino@11 2995 &lt;dy&gt; value. If the &lt;dy&gt; value is not specified, it defaults
dino@11 2996 to the same value as &lt;dx&gt;. Indicates the intended distance in
dino@11 2997 current filter units (i.e., units as determined by the value of
dino@11 2998 attribute <a href="#FilterElementPrimitiveUnitsAttribute"><span class="attr-name">‘primitiveUnits’</span></a>) for <code>dx</code> and
dino@11 2999 <code>dy</code>, respectively, in the <a href="#SurfaceNormalCalculations">surface normal calculation
dino@11 3000 formulas</a>. By specifying value(s) for <span class="attr-name">kernelUnitLength</span>, the kernel becomes defined
dino@11 3001 in a scalable, abstract coordinate system. If <span class="attr-name">kernelUnitLength</span> is not specified, the
dino@11 3002 <code>dx</code> and <code>dy</code> values should represent very small
dino@11 3003 deltas relative to a given <code>(x,y)</code> position, which might be
dino@11 3004 implemented in some cases as one pixel in the intermediate image
dino@11 3005 offscreen bitmap, which is a pixel-based coordinate system, and thus
dino@11 3006 potentially not scalable. For some level of consistency across display
dino@11 3007 media and user agents, it is necessary that a value be provided for at
dino@11 3008 least one of <span class="attr-name">filterRes</span> and <span class="attr-name">kernelUnitLength</span>. Discussion of intermediate
dino@11 3009 images are in the <a href="#Introduction">Introduction</a> and in the
ed@25 3010 description of attribute <a href="#FilterElementFilterResAttribute"><span class="attr-name">‘filterRes’</span></a>.<br/>
dino@11 3011 If a negative or zero value is specified the default value will be used
dino@11 3012 instead. <br/>
dino@11 3013 <span class="anim-target">Animatable: yes.</span></dd></dl>
dino@11 3014 </div>
dino@11 3015
ed@25 3016 <p>The light source is defined by one of the child elements <a href="#feDistantLightElement"><span class="element-name">‘feDistantLight’</span></a>,
ed@25 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
dino@11 3018 specified by property <a href="#LightingColorProperty"><span class="prop-name">‘lighting-color’</span></a>.</p>
dino@11 3019
dino@11 3020 <p><a href="#AnExample">The example</a> at the start of this chapter makes
dino@11 3021 use of the <span class="element-name">feSpecularLighting</span> filter
dino@11 3022 primitive to achieve a highly reflective, 3D glowing effect.</p>
dino@11 3023
dino@13 3024 <h2 id="feTileElement">25 Filter primitive <span class="element-name">‘feTile’</span></h2>
dino@11 3025
dino@11 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:
dino@11 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>
dino@11 3028
dino@11 3029 <p>This filter primitive fills a target rectangle with a repeated, tiled
dino@11 3030 pattern of an input image.
ed@23 3031 The target rectangle is as large as the <a href="#FilterPrimitiveSubRegion"><span class="svg-term">filter primitive subregion</span></a> established
dino@11 3032 by the <span class="element-name">‘feTile’</span> element.
dino@11 3033 </p>
dino@11 3034
ed@23 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
dino@11 3036 define a reference tile. <span class="element-name">‘feTile’</span>
dino@11 3037 replicates the reference tile in both X and Y to completely fill the target
dino@11 3038 rectangle. The top/left corner of each given tile is at location
dino@11 3039 <code>(x+i*width,y+j*height)</code>, where <code>(x,y)</code> represents the
ed@23 3040 top/left of the input image's <a href="#FilterPrimitiveSubRegion"><span class="svg-term">filter primitive subregion</span></a>, <code>width</code>
dino@11 3041 and <code>height</code> represent the width and height of the input image's
ed@23 3042 <a href="#FilterPrimitiveSubRegion"><span class="svg-term">filter primitive subregion</span></a>, and <code>i</code> and <code>j</code> can be any
ed@23 3043 integer value. In most cases, the input image will have a smaller <a href="#FilterPrimitiveSubRegion"><span class="svg-term">filter
ed@23 3044 primitive subregion</span></a> than the <span class="element-name">‘feTile’</span> in
dino@11 3045 order to achieve a repeated pattern effect.</p>
dino@11 3046
dino@11 3047 <p class="requirement" id="assertTileArtifacts">Implementers must take appropriate measures in constructing the tiled
dino@11 3048 image to avoid artifacts between tiles, particularly in situations where the
dino@11 3049 user to device transform includes shear and/or rotation. Unless care is
dino@11 3050 taken, interpolation can lead to edge pixels in the tile having opacity
dino@11 3051 values lower or higher than expected due to the interaction of painting
dino@11 3052 adjacent tiles which each have partial overlap with particular pixels.</p>
dino@11 3053
dino@11 3054 <div class="adef-list">
dino@11 3055   </div>
dino@11 3056
dino@13 3057 <h2 id="feTurbulenceElement">26 Filter primitive <span class="element-name">‘feTurbulence’</span></h2>
dino@11 3058
dino@11 3059
dino@11 3060
dino@11 3061 <p class="specissue">ISSUE: Consider phasing out this C algorithm in favor of Simplex noise, which is more HW friendly.</p>
dino@11 3062
dino@11 3063 <p>This filter primitive creates an image using the Perlin turbulence
dino@11 3064 function. It allows the synthesis of artificial textures like clouds or
dino@11 3065 marble. For a detailed description the of the Perlin turbulence function, see
dino@11 3066 "Texturing and Modeling", Ebert et al, AP Professional, 1994. The resulting
dino@11 3067 image will fill the entire <a href="#FilterPrimitiveSubRegion"><span class="svg-term">filter primitive subregion</span></a> for this filter primitive.</p>
dino@11 3068
dino@11 3069 <p>It is possible to create bandwidth-limited noise by synthesizing only one
dino@11 3070 octave.</p>
dino@11 3071
ed@32 3072 <p>The C code below shows the exact algorithm used for this filter effect.
ed@32 3073 The <a href="#FilterPrimitiveSubRegion"><span class="svg-term">filter primitive subregion</span></a> is to be passed as the arguments fTileX,
ed@32 3074 fTileY, fTileWidth and fTileHeight.</p>
dino@11 3075
dino@11 3076 <p>For fractalSum, you get a turbFunctionResult that is aimed at a range of
dino@11 3077 -1 to 1 (the actual result might exceed this range in some cases). To convert
dino@11 3078 to a color value, use the formula <code>colorValue = ((turbFunctionResult *
dino@11 3079 255) + 255) / 2</code>, then clamp to the range 0 to 255.</p>
dino@11 3080
dino@11 3081 <p>For turbulence, you get a turbFunctionResult that is aimed at a range of 0
dino@11 3082 to 1 (the actual result might exceed this range in some cases). To convert to
dino@11 3083 a color value, use the formula <code>colorValue = (turbFunctionResult *
dino@11 3084 255)</code>, then clamp to the range 0 to 255.</p>
dino@11 3085
dino@11 3086 <p>The following order is used for applying the pseudo random numbers. An
dino@11 3087 initial seed value is computed based on the <a href="#feTurbulenceSeedAttribute"><span class="attr-name">‘seed’</span></a> attribute.
dino@11 3088 Then the implementation computes the lattice
dino@11 3089 points for R, then continues getting additional pseudo random numbers
dino@11 3090 relative to the last generated pseudo random number and computes the lattice
dino@11 3091 points for G, and so on for B and A.</p>
dino@11 3092
dino@11 3093 <p>The generated color and alpha values are in the color space determined by
dino@11 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>
dino@11 3095 <pre class="svgsamplecompressed">/* Produces results in the range [1, 2**31 - 2].
dino@11 3096 Algorithm is: r = (a * r) mod m
dino@11 3097 where a = 16807 and m = 2**31 - 1 = 2147483647
dino@11 3098 See [Park &amp; Miller], CACM vol. 31 no. 10 p. 1195, Oct. 1988
dino@11 3099 To test: the algorithm should produce the result 1043618065
dino@11 3100 as the 10,000th generated number if the original seed is 1.
dino@11 3101 */
dino@11 3102 #define RAND_m 2147483647 /* 2**31 - 1 */
dino@11 3103 #define RAND_a 16807 /* 7**5; primitive root of m */
dino@11 3104 #define RAND_q 127773 /* m / a */
dino@11 3105 #define RAND_r 2836 /* m % a */
dino@11 3106 long setup_seed(long lSeed)
dino@11 3107 {
dino@11 3108 if (lSeed &lt;= 0) lSeed = -(lSeed % (RAND_m - 1)) + 1;
dino@11 3109 if (lSeed &gt; RAND_m - 1) lSeed = RAND_m - 1;
dino@11 3110 return lSeed;
dino@11 3111 }
dino@11 3112 long random(long lSeed)
dino@11 3113 {
dino@11 3114 long result;
dino@11 3115 result = RAND_a * (lSeed % RAND_q) - RAND_r * (lSeed / RAND_q);
dino@11 3116 if (result &lt;= 0) result += RAND_m;
dino@11 3117 return result;
dino@11 3118 }
dino@11 3119 #define BSize 0x100
dino@11 3120 #define BM 0xff
dino@11 3121 #define PerlinN 0x1000
dino@11 3122 #define NP 12 /* 2^PerlinN */
dino@11 3123 #define NM 0xfff
dino@11 3124 static uLatticeSelector[BSize + BSize + 2];
dino@11 3125 static double fGradient[4][BSize + BSize + 2][2];
dino@11 3126 struct StitchInfo
dino@11 3127 {
dino@11 3128 int nWidth; // How much to subtract to wrap for stitching.
dino@11 3129 int nHeight;
dino@11 3130 int nWrapX; // Minimum value to wrap.
dino@11 3131 int nWrapY;
dino@11 3132 };
dino@11 3133 static void init(long lSeed)
dino@11 3134 {
dino@11 3135 double s;
dino@11 3136 int i, j, k;
dino@11 3137 lSeed = setup_seed(lSeed);
dino@11 3138 for(k = 0; k &lt; 4; k++)
dino@11 3139 {
dino@11 3140 for(i = 0; i &lt; BSize; i++)
dino@11 3141 {
dino@11 3142 uLatticeSelector[i] = i;
dino@11 3143 for (j = 0; j &lt; 2; j++)
dino@11 3144 fGradient[k][i][j] = (double)(((lSeed = random(lSeed)) % (BSize + BSize)) - BSize) / BSize;
dino@11 3145 s = double(sqrt(fGradient[k][i][0] * fGradient[k][i][0] + fGradient[k][i][1] * fGradient[k][i][1]));
dino@11 3146 fGradient[k][i][0] /= s;
dino@11 3147 fGradient[k][i][1] /= s;
dino@11 3148 }
dino@11 3149 }
dino@11 3150 while(--i)
dino@11 3151 {
dino@11 3152 k = uLatticeSelector[i];
dino@11 3153 uLatticeSelector[i] = uLatticeSelector[j = (lSeed = random(lSeed)) % BSize];
dino@11 3154 uLatticeSelector[j] = k;
dino@11 3155 }
dino@11 3156 for(i = 0; i &lt; BSize + 2; i++)
dino@11 3157 {
dino@11 3158 uLatticeSelector[BSize + i] = uLatticeSelector[i];
dino@11 3159 for(k = 0; k &lt; 4; k++)
dino@11 3160 for(j = 0; j &lt; 2; j++)
dino@11 3161 fGradient[k][BSize + i][j] = fGradient[k][i][j];
dino@11 3162 }
dino@11 3163 }
dino@11 3164 #define s_curve(t) ( t * t * (3. - 2. * t) )
dino@11 3165 #define lerp(t, a, b) ( a + t * (b - a) )
dino@11 3166 double noise2(int nColorChannel, double vec[2], StitchInfo *pStitchInfo)
dino@11 3167 {
dino@11 3168 int bx0, bx1, by0, by1, b00, b10, b01, b11;
dino@11 3169 double rx0, rx1, ry0, ry1, *q, sx, sy, a, b, t, u, v;
dino@11 3170 register i, j;
dino@11 3171 t = vec[0] + PerlinN;
dino@11 3172 bx0 = (int)t;
dino@11 3173 bx1 = bx0+1;
dino@11 3174 rx0 = t - (int)t;
dino@11 3175 rx1 = rx0 - 1.0f;
dino@11 3176 t = vec[1] + PerlinN;
dino@11 3177 by0 = (int)t;
dino@11 3178 by1 = by0+1;
dino@11 3179 ry0 = t - (int)t;
dino@11 3180 ry1 = ry0 - 1.0f;
dino@11 3181 // If stitching, adjust lattice points accordingly.
dino@11 3182 if(pStitchInfo != NULL)
dino@11 3183 {
dino@11 3184 if(bx0 &gt;= pStitchInfo-&gt;nWrapX)
dino@11 3185 bx0 -= pStitchInfo-&gt;nWidth;
dino@11 3186 if(bx1 &gt;= pStitchInfo-&gt;nWrapX)
dino@11 3187 bx1 -= pStitchInfo-&gt;nWidth;
dino@11 3188 if(by0 &gt;= pStitchInfo-&gt;nWrapY)
dino@11 3189 by0 -= pStitchInfo-&gt;nHeight;
dino@11 3190 if(by1 &gt;= pStitchInfo-&gt;nWrapY)
dino@11 3191 by1 -= pStitchInfo-&gt;nHeight;
dino@11 3192 }
dino@11 3193 bx0 &amp;= BM;
dino@11 3194 bx1 &amp;= BM;
dino@11 3195 by0 &amp;= BM;
dino@11 3196 by1 &amp;= BM;
dino@11 3197 i = uLatticeSelector[bx0];
dino@11 3198 j = uLatticeSelector[bx1];
dino@11 3199 b00 = uLatticeSelector[i + by0];
dino@11 3200 b10 = uLatticeSelector[j + by0];
dino@11 3201 b01 = uLatticeSelector[i + by1];
dino@11 3202 b11 = uLatticeSelector[j + by1];
dino@11 3203 sx = double(s_curve(rx0));
dino@11 3204 sy = double(s_curve(ry0));
dino@11 3205 q = fGradient[nColorChannel][b00]; u = rx0 * q[0] + ry0 * q[1];
dino@11 3206 q = fGradient[nColorChannel][b10]; v = rx1 * q[0] + ry0 * q[1];
dino@11 3207 a = lerp(sx, u, v);
dino@11 3208 q = fGradient[nColorChannel][b01]; u = rx0 * q[0] + ry1 * q[1];
dino@11 3209 q = fGradient[nColorChannel][b11]; v = rx1 * q[0] + ry1 * q[1];
dino@11 3210 b = lerp(sx, u, v);
dino@11 3211 return lerp(sy, a, b);
dino@11 3212 }
ed@32 3213 double turbulence(int nColorChannel, double *point, double <a href="#feTurbulenceBaseFrequencyAttribute">fBaseFreqX</a>, double <a href="#feTurbulenceBaseFrequencyAttribute">fBaseFreqY</a>,
ed@32 3214 int <a href="#feTurbulenceNumOctavesAttribute">nNumOctaves</a>, bool bFractalSum, bool bDoStitching,
ed@32 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>)
dino@11 3216 {
dino@11 3217 StitchInfo stitch;
dino@11 3218 StitchInfo *pStitchInfo = NULL; // Not stitching when NULL.
dino@11 3219 // Adjust the base frequencies if necessary for stitching.
dino@11 3220 if(bDoStitching)
dino@11 3221 {
dino@11 3222 // When stitching tiled turbulence, the frequencies must be adjusted
dino@11 3223 // so that the tile borders will be continuous.
dino@11 3224 if(fBaseFreqX != 0.0)
dino@11 3225 {
dino@11 3226 double fLoFreq = double(floor(fTileWidth * fBaseFreqX)) / fTileWidth;
dino@11 3227 double fHiFreq = double(ceil(fTileWidth * fBaseFreqX)) / fTileWidth;
dino@11 3228 if(fBaseFreqX / fLoFreq &lt; fHiFreq / fBaseFreqX)
dino@11 3229 fBaseFreqX = fLoFreq;
dino@11 3230 else
dino@11 3231 fBaseFreqX = fHiFreq;
dino@11 3232 }
dino@11 3233 if(fBaseFreqY != 0.0)
dino@11 3234 {
dino@11 3235 double fLoFreq = double(floor(fTileHeight * fBaseFreqY)) / fTileHeight;
dino@11 3236 double fHiFreq = double(ceil(fTileHeight * fBaseFreqY)) / fTileHeight;
dino@11 3237 if(fBaseFreqY / fLoFreq &lt; fHiFreq / fBaseFreqY)
dino@11 3238 fBaseFreqY = fLoFreq;
dino@11 3239 else
dino@11 3240 fBaseFreqY = fHiFreq;
dino@11 3241 }
dino@11 3242 // Set up initial stitch values.
dino@11 3243 pStitchInfo = &amp;stitch;
dino@11 3244 stitch.nWidth = int(fTileWidth * fBaseFreqX + 0.5f);
dino@11 3245 stitch.nWrapX = fTileX * fBaseFreqX + PerlinN + stitch.nWidth;
dino@11 3246 stitch.nHeight = int(fTileHeight * fBaseFreqY + 0.5f);
dino@11 3247 stitch.nWrapY = fTileY * fBaseFreqY + PerlinN + stitch.nHeight;
dino@11 3248 }
dino@11 3249 double fSum = 0.0f;
dino@11 3250 double vec[2];
dino@11 3251 vec[0] = point[0] * fBaseFreqX;
dino@11 3252 vec[1] = point[1] * fBaseFreqY;
dino@11 3253 double ratio = 1;
dino@11 3254 for(int nOctave = 0; nOctave &lt; nNumOctaves; nOctave++)
dino@11 3255 {
dino@11 3256 if(bFractalSum)
dino@11 3257 fSum += double(noise2(nColorChannel, vec, pStitchInfo) / ratio);
dino@11 3258 else
dino@11 3259 fSum += double(fabs(noise2(nColorChannel, vec, pStitchInfo)) / ratio);
dino@11 3260 vec[0] *= 2;
dino@11 3261 vec[1] *= 2;
dino@11 3262 ratio *= 2;
dino@11 3263 if(pStitchInfo != NULL)
dino@11 3264 {
dino@11 3265 // Update stitch values. Subtracting PerlinN before the multiplication and
dino@11 3266 // adding it afterward simplifies to subtracting it once.
dino@11 3267 stitch.nWidth *= 2;
dino@11 3268 stitch.nWrapX = 2 * stitch.nWrapX - PerlinN;
dino@11 3269 stitch.nHeight *= 2;
dino@11 3270 stitch.nWrapY = 2 * stitch.nWrapY - PerlinN;
dino@11 3271 }
dino@11 3272 }
dino@11 3273 return fSum;
dino@11 3274 }</pre>
dino@11 3275
dino@11 3276 <div class="adef-list">
dino@11 3277 <p><em>Attribute definitions:</em></p>
dino@11 3278 <dl><dt id="feTurbulenceBaseFrequencyAttribute"><span class="adef">baseFrequency</span> =
dino@11 3279 "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumberOptionalNumber">&lt;number-optional-number&gt;</a></em>"</dt><dd>
dino@13 3280 <p>The base frequency (frequencies) parameter(s) for the noise function.
dino@11 3281 If two <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber">&lt;number&gt;</a>s are provided, the first number represents a base frequency in the X
dino@11 3282 direction and the second value represents a base frequency in the Y
dino@11 3283 direction. If one number is provided, then that value is used for both
dino@11 3284 X and Y.</p>
dino@13 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>
dino@13 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>
dino@13 3287 <p><span class="anim-target">Animatable: yes.</span></p>
dino@11 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">&lt;integer&gt;</a></em>"</dt><dd>
dino@13 3289 <p>The numOctaves parameter for the noise function.</p>
dino@13 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>
dino@13 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>
dino@13 3292 <p><span class="requirement" id="assert_turbulenceNumOctavesAnimatable"><span class="anim-target">Animatable: yes.</span></span></p>
dino@13 3293 </dd><dt id="feTurbulenceSeedAttribute">
dino@11 3294 <span class="adef">seed</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber">&lt;number&gt;</a></em>"</dt><dd>
dino@13 3295 <p>The starting number for the pseudo random number generator.</p>
dino@13 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>
dino@13 3297 <p><span class="requirement" id="assert_turbulenceSeedTruncation">When the seed number is handed over to the algorithm above it must first be
dino@13 3298 truncated, i.e. rounded to the closest integer value towards zero.</span></p>
dino@13 3299 <p><span class="anim-target">Animatable: yes.</span></p>
dino@13 3300 </dd><dt id="feTurbulenceStitchTilesAttribute"><span class="adef">stitchTiles</span> = "<em>stitch | noStitch</em>"</dt><dd>
dino@13 3301 <p>If <span class="attr-value">stitchTiles="noStitch"</span>, no attempt
dino@11 3302 it made to achieve smooth transitions at the border of tiles which
dino@11 3303 contain a turbulence function. Sometimes the result will show clear
dino@11 3304 discontinuities at the tile borders.<br/>
dino@11 3305 If <span class="attr-value">stitchTiles="stitch"</span>, then the user
dino@11 3306 agent will automatically adjust baseFrequency-x and baseFrequency-y
dino@11 3307 values such that the <a href="#feTurbulenceElement"><span class="element-name">‘feTurbulence’</span></a> node's width and height (i.e., the
dino@11 3308 width and height of the current subregion) contains an integral number
dino@11 3309 of the Perlin tile width and height for the first octave. The
dino@11 3310 baseFrequency will be adjusted up or down depending on which way has
dino@11 3311 the smallest relative (not absolute) change as follows: Given the
dino@11 3312 frequency, calculate <code>lowFreq=floor(width*frequency)/width</code>
dino@11 3313 and <code>hiFreq=ceil(width*frequency)/width</code>. If
dino@11 3314 frequency/lowFreq &lt; hiFreq/frequency then use lowFreq, else use
dino@11 3315 hiFreq. While generating turbulence values, generate lattice vectors as
dino@11 3316 normal for Perlin Noise, except for those lattice points that lie on
dino@11 3317 the right or bottom edges of the active area (the size of the resulting
dino@11 3318 tile). In those cases, copy the lattice vector from the opposite edge
dino@11 3319 of the active area.</p>
ed@17 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>
dino@11 3321 <p><span class="anim-target">Animatable: yes.</span></p>
dino@13 3322 </dd><dt id="feTurbulenceTypeAttribute">
dino@11 3323 <span class="adef">type</span> = "<em>fractalNoise | turbulence</em>"</dt><dd>
dino@13 3324 <p>Indicates whether the filter primitive should perform a noise or
dino@11 3325 turbulence function.</p>
ed@17 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>
dino@13 3327 <p><span class="anim-target">Animatable: yes.</span></p>
dino@13 3328 </dd></dl>
dino@11 3329 </div>
dino@11 3330
dino@11 3331 <pre class="xml">&lt;?xml version="1.0"?&gt;
dino@11 3332 &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
dino@11 3333 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
dino@11 3334 &lt;svg width="450px" height="325px" viewBox="0 0 450 325"
dino@11 3335 xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
dino@11 3336 &lt;title&gt;Example feTurbulence - Examples of feTurbulence operations&lt;/title&gt;
dino@11 3337 &lt;desc&gt;Six rectangular areas showing the effects of
dino@11 3338 various parameter settings for feTurbulence.&lt;/desc&gt;
dino@11 3339 &lt;g font-family="Verdana" text-anchor="middle" font-size="10" &gt;
dino@11 3340 &lt;defs&gt;
dino@11 3341 &lt;filter id="Turb1" filterUnits="objectBoundingBox"
dino@11 3342 x="0%" y="0%" width="100%" height="100%"&gt;
dino@11 3343 &lt;feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2"/&gt;
dino@11 3344 &lt;/filter&gt;
dino@11 3345 &lt;filter id="Turb2" filterUnits="objectBoundingBox"
dino@11 3346 x="0%" y="0%" width="100%" height="100%"&gt;
dino@11 3347 &lt;feTurbulence type="turbulence" baseFrequency="0.1" numOctaves="2"/&gt;
dino@11 3348 &lt;/filter&gt;
dino@11 3349 &lt;filter id="Turb3" filterUnits="objectBoundingBox"
dino@11 3350 x="0%" y="0%" width="100%" height="100%"&gt;
dino@11 3351 &lt;feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="8"/&gt;
dino@11 3352 &lt;/filter&gt;
dino@11 3353 &lt;filter id="Turb4" filterUnits="objectBoundingBox"
dino@11 3354 x="0%" y="0%" width="100%" height="100%"&gt;
dino@11 3355 &lt;feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="4"/&gt;
dino@11 3356 &lt;/filter&gt;
dino@11 3357 &lt;filter id="Turb5" filterUnits="objectBoundingBox"
dino@11 3358 x="0%" y="0%" width="100%" height="100%"&gt;
dino@11 3359 &lt;feTurbulence type="fractalNoise" baseFrequency="0.4" numOctaves="4"/&gt;
dino@11 3360 &lt;/filter&gt;
dino@11 3361 &lt;filter id="Turb6" filterUnits="objectBoundingBox"
dino@11 3362 x="0%" y="0%" width="100%" height="100%"&gt;
dino@11 3363 &lt;feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="1"/&gt;
dino@11 3364 &lt;/filter&gt;
dino@11 3365 &lt;/defs&gt;
dino@11 3366
dino@11 3367 &lt;rect x="1" y="1" width="448" height="323"
dino@11 3368 fill="none" stroke="blue" stroke-width="1" /&gt;
dino@11 3369
dino@11 3370 &lt;rect x="25" y="25" width="100" height="75" filter="url(#Turb1)" /&gt;
dino@11 3371 &lt;text x="75" y="117"&gt;type=turbulence&lt;/text&gt;
dino@11 3372 &lt;text x="75" y="129"&gt;baseFrequency=0.05&lt;/text&gt;
dino@11 3373 &lt;text x="75" y="141"&gt;numOctaves=2&lt;/text&gt;
dino@11 3374
dino@11 3375 &lt;rect x="175" y="25" width="100" height="75" filter="url(#Turb2)" /&gt;
dino@11 3376 &lt;text x="225" y="117"&gt;type=turbulence&lt;/text&gt;
dino@11 3377 &lt;text x="225" y="129"&gt;baseFrequency=0.1&lt;/text&gt;
dino@11 3378 &lt;text x="225" y="141"&gt;numOctaves=2&lt;/text&gt;
dino@11 3379
dino@11 3380 &lt;rect x="325" y="25" width="100" height="75" filter="url(#Turb3)" /&gt;
dino@11 3381 &lt;text x="375" y="117"&gt;type=turbulence&lt;/text&gt;
dino@11 3382 &lt;text x="375" y="129"&gt;baseFrequency=0.05&lt;/text&gt;
dino@11 3383 &lt;text x="375" y="141"&gt;numOctaves=8&lt;/text&gt;
dino@11 3384
dino@11 3385 &lt;rect x="25" y="180" width="100" height="75" filter="url(#Turb4)" /&gt;
dino@11 3386 &lt;text x="75" y="272"&gt;type=fractalNoise&lt;/text&gt;
dino@11 3387 &lt;text x="75" y="284"&gt;baseFrequency=0.1&lt;/text&gt;
dino@11 3388 &lt;text x="75" y="296"&gt;numOctaves=4&lt;/text&gt;
dino@11 3389
dino@11 3390 &lt;rect x="175" y="180" width="100" height="75" filter="url(#Turb5)" /&gt;
dino@11 3391 &lt;text x="225" y="272"&gt;type=fractalNoise&lt;/text&gt;
dino@11 3392 &lt;text x="225" y="284"&gt;baseFrequency=0.4&lt;/text&gt;
dino@11 3393 &lt;text x="225" y="296"&gt;numOctaves=4&lt;/text&gt;
dino@11 3394
dino@11 3395 &lt;rect x="325" y="180" width="100" height="75" filter="url(#Turb6)" /&gt;
dino@11 3396 &lt;text x="375" y="272"&gt;type=fractalNoise&lt;/text&gt;
dino@11 3397 &lt;text x="375" y="284"&gt;baseFrequency=0.1&lt;/text&gt;
dino@11 3398 &lt;text x="375" y="296"&gt;numOctaves=1&lt;/text&gt;
dino@11 3399 &lt;/g&gt;
dino@11 3400 &lt;/svg&gt;</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>
dino@11 3401
dino@11 3402
dino@13 3403 <h2 id="feDropShadowElement">27 Filter primitive <span class="element-name">‘feDropShadow’</span></h2>
dino@11 3404
dino@11 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:
dino@11 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>
dino@11 3407
dino@11 3408 <p>This filter creates a drop shadow of the input image. It is a shorthand
dino@11 3409 filter, and is defined in terms of combinations of other <a href="#TermFilterPrimitiveElements"><span class="svg-term">filter primitives</span></a>.
dino@11 3410 The expectation is that it can be optimized more easily by
dino@11 3411 implementations.</p>
dino@11 3412
dino@11 3413 <p>The result of a <a href="#feDropShadowElement"><span class="element-name">‘feDropShadow’</span></a> filter
dino@11 3414 primitive is equivalent to the following:
dino@11 3415
dino@11 3416 <pre class="examplesource">
dino@11 3417 &lt;feGaussianBlur in="<b>alpha-channel-of-feDropShadow-in</b>" stdDeviation="<b>stdDeviation-of-feDropShadow</b>"/&gt;
dino@11 3418 &lt;feOffset dx="<b>dx-of-feDropShadow</b>" dy="<b>dy-of-feDropShadow</b>" result="offsetblur"/&gt;
dino@11 3419 &lt;feFlood flood-color="<b>flood-color-of-feDropShadow</b>" flood-opacity="<b>flood-opacity-of-feDropShadow</b>"/&gt;
dino@11 3420 &lt;feComposite in2="offsetblur" operator="in"/&gt;
dino@11 3421 &lt;feMerge&gt;
dino@11 3422 &lt;feMergeNode/&gt;
dino@11 3423 &lt;feMergeNode in="<b>in-of-feDropShadow</b>"/&gt;
dino@11 3424 &lt;/feMerge&gt;
dino@11 3425 </pre>
dino@11 3426 </p>
dino@11 3427
dino@11 3428 <p>
dino@11 3429 The above divided into steps:
dino@11 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
dino@11 3431 following <a href="#feGaussianBlurElement"><span class="element-name">‘feGaussianBlur’</span></a> was applied:
dino@13 3432 <pre class="examplesource"> &lt;feGaussianBlur in="<b>alpha-channel-of-feDropShadow-in</b>" stdDeviation="<b>stdDeviation-of-feDropShadow</b>"/&gt;</pre>
dino@11 3433 <br/>
dino@11 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
dino@11 3435 specified on the <a href="#feDropShadowElement"><span class="element-name">‘feDropShadow’</span></a>
dino@11 3436 element, equivalent to applying an <a href="#feOffsetElement"><span class="element-name">‘feOffset’</span></a> with these parameters:
dino@13 3437 <pre class="examplesource"> &lt;feOffset dx="<b>dx-of-feDropShadow</b>" dy="<b>dy-of-feDropShadow</b>" result="offsetblur"/&gt;</pre>
dino@11 3438 <br/>
dino@11 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
dino@13 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:
dino@13 3441 <pre class="examplesource"> &lt;feFlood flood-color="<b>flood-color-of-feDropShadow</b>" flood-opacity="<b>flood-opacity-of-feDropShadow</b>"/&gt;</pre>
dino@11 3442 <br/>
dino@11 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
dino@11 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:
dino@13 3445 <pre class="examplesource"> &lt;feComposite in2="offsetblur" operator="in"/&gt;</pre>
dino@11 3446 <br/>
dino@11 3447 </li><li>Finally merge the result of the previous step, doing processing as if
dino@11 3448 the following <a href="#feMergeElement"><span class="element-name">‘feMerge’</span></a> was performed:
dino@13 3449 <pre class="examplesource"> &lt;feMerge&gt;
dino@13 3450 &lt;feMergeNode/&gt;
dino@13 3451 &lt;feMergeNode in="<b>in-of-feDropShadow</b>"/&gt;
dino@13 3452 &lt;/feMerge&gt;</pre>
dino@11 3453 </li></ol>
dino@11 3454 </p>
dino@11 3455
dino@11 3456 <p class="note implementation">Note that while the definition of the <span class="element-name">‘feDropShadow’</span> filter primitive says that it can
dino@11 3457 be expanded into an equivalent tree it is not required that it is implemented
dino@11 3458 like that. The expectation is that user agents can optimize the handling by not having to do all the steps separately.
dino@11 3459 </p>
dino@11 3460
dino@11 3461 <p>Beyond the DOM interface <a href="#InterfaceSVGFEDropShadowElement">SVGFEDropShadowElement</a> there is no way
dino@11 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
dino@11 3463 filter primitive is implemented as an equivalent tree then that tree must not
dino@11 3464 be exposed to the DOM.</span> </p>
dino@11 3465
dino@11 3466 <div class="adef-list">
dino@11 3467 <p><em>Attribute definitions:</em></p>
dino@11 3468 <dl><dt id="feDropShadowDxAttribute">
dino@11 3469 <span class="adef">dx</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber">&lt;number&gt;</a></em>"</dt><dd>
dino@13 3470 <p>The x offset of the drop shadow.</p>
dino@13 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>
dino@13 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>
dino@13 3473 <p><span class="anim-target">Animatable: yes.</span></p>
dino@13 3474 </dd><dt id="feDropShadowDyAttribute">
dino@11 3475 <span class="adef">dy</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber">&lt;number&gt;</a></em>"</dt><dd>
dino@13 3476 <p>The y offset of the drop shadow.</p>
dino@13 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>
dino@13 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>
dino@13 3479 <p><span class="anim-target">Animatable: yes.</span></p>
dino@13 3480 </dd><dt id="feDropShadowStdDeviationAttribute"><span class="adef">stdDeviation</span> =
dino@11 3481 "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumberOptionalNumber">&lt;number-optional-number&gt;</a></em>"</dt><dd>
dino@13 3482 <p>The standard deviation for the blur operation in the drop shadow.</p>
dino@13 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>
dino@13 3484 <p>This attribute is then forwarded to the <a href="#feGaussianBlurStdDeviationAttribute"><span class="attr-name">‘stdDeviation’</span></a> attribute of the internal
dino@13 3485 <a href="#feGaussianBlurElement"><span class="element-name">‘feGaussianBlur’</span></a> element.</p>
dino@13 3486 <p><span class="anim-target">Animatable: yes.</span></p>
dino@13 3487 </dd></dl>
dino@11 3488 </div>
dino@11 3489
dino@11 3490 <div class="note">
dino@13 3491 <h2 id="feDiffuseSpecularElement">28 Filter primitive <span class="element-name">‘feDiffuseSpecular’</span></h2>
dino@33 3492 The WG is looking at providing a shorthand for diffuse+specular.
dino@11 3493 </div>
dino@11 3494
dino@11 3495 <div class="note">
dino@13 3496 <h2 id="feCustomElement">29 Filter primitive <span class="element-name">‘feCustom’</span></h2>
dino@33 3497 The WG is considering a proposal to add a filter primitive that would reference a
dino@33 3498 programmable operation, similar to an OpenCL kernel or GLSL fragment shader. At
dino@33 3499 this time, the WG is intending to <strong>not</strong> include such a feature
dino@33 3500 in the current version of this specification. If you feel it is necessary, please
dino@33 3501 submit feedback to the WG (by email, described in the introduction) with your
dino@33 3502 reasons and, preferably, use cases.
dino@11 3503 </div>
dino@11 3504
dino@33 3505 <h2 id="FilterCSSImageValue">30 The filter CSS &lt;image&gt; value</h2>
dino@33 3506
dino@33 3507 <p>
dino@33 3508 The filter() function produces a CSS &lt;image&gt; value. It has the following syntax:
dino@33 3509 </p>
dino@33 3510
dino@33 3511 <h4 class="no-toc" id="filter-syntax">
dino@33 3512 filter() syntax</h4>
dino@33 3513
dino@33 3514 <pre class="prod"><code><dfn>&lt;filter&gt;</dfn> = filter(
dino@33 3515 &lt;image&gt;,
dino@33 3516 none | &lt;filter-function&gt; [ &lt;filter-function&gt; ]*
dino@33 3517 )
dino@33 3518 </code></pre>
dino@33 3519
dino@33 3520 <p>
dino@33 3521 The function takes two parameters. The first is a CSS &lt;image&gt; value. The second
dino@33 3522 is the value of a <span class="prop-name">filter</span> property. The function take the
dino@33 3523 input image parameter and apply the filter rules, returning a processing image.
dino@33 3524 </p>
dino@33 3525
dino@33 3526 <h2 id="RelaxNG">31 RelaxNG Schema for Filter Effects 1.0</h2>
dino@11 3527
dino@11 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>
dino@11 3529 [<a href="#ref-RNG">RelaxNG</a>], a namespace-aware schema language that uses
dino@11 3530 the datatypes from <a href="http://www.w3.org/TR/2004/REC-xmlschema-2-20041028/">XML Schema Part
dino@11 3531 2</a> [<a href="#ref-Schema2">Schema2</a>]. This allows namespaces and
dino@11 3532 modularity to be much more naturally expressed than using DTD syntax. The
dino@11 3533 RelaxNG schema for Filter Effects 1.0 may be imported by other RelaxNG schemas,
dino@11 3534 or combined with other schemas in other languages into a multi-namespace,
dino@11 3535 multi-grammar schema using <a href="http://www.asahi-net.or.jp/~eb2m-mrt/dsdl/">Namespace-based Validation
dino@11 3536 Dispatching Language</a> [<a href="#ref-NVDL">NVDL</a>].</p>
dino@11 3537
dino@11 3538 <p>Unlike a DTD, the schema used for validation is not hardcoded into the
dino@11 3539 document instance. There is no equivalent to the DOCTYPE declaration. Simply
dino@11 3540 point your editor or other validation tool to the IRI of the schema (or your
dino@11 3541 local cached copy, as you prefer).</p>
dino@11 3542
dino@11 3543 <p>
dino@11 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>.
dino@11 3545 </p>
dino@11 3546
dino@13 3547
dino@33 3548 <h2 id="ShorthandEquivalents">32 Shorthands defined in terms of the <span class="element-name">‘filter’</span> element</h2>
dino@13 3549
dino@13 3550 <p>
dino@13 3551 Below are the equivalents for each of the filter functions expressed in terms of
dino@13 3552 the 'filter element' element. The parameters from the function are labelled with
dino@13 3553 brackets in the following style: [amount].
dino@13 3554 </p>
dino@13 3555
dino@33 3556 <h3 id="grayscaleEquivalent">32.1 grayscale</h3>
dino@13 3557
dino@13 3558 <pre class="examplesource"> &lt;filter id="grayscale"&gt;
dino@13 3559 &lt;feColorMatrix type="matrix"
dino@36 3560 values="(0.2127 * [amount]) (0.7152 * [amount]) (0.0722 * [amount]) 0 0
dino@36 3561 (0.2127 * [amount]) (0.7152 * [amount]) (0.0722 * [amount]) 0 0
dino@36 3562 (0.2127 * [amount]) (0.7152 * [amount]) (0.0722 * [amount]) 0 0
dino@13 3563 0 0 0 1 0"/&gt;
dino@13 3564 &lt;/filter&gt; </pre>
dino@13 3565
dino@33 3566 <h3 id="sepiaEquivalent">32.2 sepia</h3>
dino@13 3567
dino@13 3568 <pre class="examplesource"> &lt;filter id="sepia"&gt;
dino@13 3569 &lt;feColorMatrix type="matrix"
dino@13 3570 values="(0.393 * [amount]) (0.769 * [amount]) (0.189 * [amount]) 0 0
dino@13 3571 (0.349 * [amount]) (0.686 * [amount]) (0.168 * [amount]) 0 0
dino@13 3572 (0.272 * [amount]) (0.534 * [amount]) (0.131 * [amount]) 0 0
dino@13 3573 0 0 0 1 0"/&gt;
dino@13 3574 &lt;/filter&gt; </pre>
dino@13 3575
dino@33 3576 <h3 id="saturateEquivalent">32.3 saturate</h3>
dino@13 3577
dino@13 3578 <pre class="examplesource"> &lt;filter id="saturate"&gt;
dino@13 3579 &lt;feColorMatrix type="saturate"
dino@13 3580 values="(1 - [amount])"/&gt;
dino@13 3581 &lt;/filter&gt; </pre>
dino@13 3582
dino@33 3583 <h3 id="huerotateEquivalent">32.4 hue-rotate</h3>
dino@13 3584
dino@13 3585 <pre class="examplesource"> &lt;filter id="hue-rotate"&gt;
dino@13 3586 &lt;feColorMatrix type="hueRotate"
dino@13 3587 values="[angle]"/&gt;
dino@13 3588 &lt;/filter&gt; </pre>
dino@13 3589
dino@33 3590 <h3 id="invertEquivalent">32.5 invert</h3>
dino@13 3591
dino@13 3592 <pre class="examplesource"> &lt;filter id="invert"&gt;
dino@13 3593 &lt;feComponentTransfer&gt;
dino@13 3594 &lt;feFuncR type="table" tableValues="[amount] (1 - [amount])"/&gt;
dino@13 3595 &lt;feFuncG type="table" tableValues="[amount] (1 - [amount])"/&gt;
dino@13 3596 &lt;feFuncB type="table" tableValues="[amount] (1 - [amount])"/&gt;
dino@13 3597 &lt;/feComponentTransfer&gt;
dino@13 3598 &lt;/filter&gt; </pre>
dino@13 3599
dino@36 3600 <h3 id="opacityEquivalent">32.6 opacity</h3>
dino@36 3601
dino@36 3602 <pre class="examplesource"> &lt;filter id="opacity"&gt;
dino@36 3603 &lt;feComponentTransfer&gt;
dino@36 3604 &lt;feFuncA type="table" tableValues="0 [amount]"/&gt;
dino@36 3605 &lt;/feComponentTransfer&gt;
dino@36 3606 &lt;/filter&gt; </pre>
dino@36 3607
dino@36 3608 <h3 id="gammaEquivalent">32.7 gamma</h3>
dino@13 3609
dino@13 3610 <pre class="examplesource"> &lt;filter id="gamma"&gt;
dino@13 3611 &lt;feComponentTransfer&gt;
dino@13 3612 &lt;feFuncR type="gamma" amplitude="[amplitude]" exponent="[exponent]" offset="[offset]"/&gt;
dino@13 3613 &lt;feFuncG type="gamma" amplitude="[amplitude]" exponent="[exponent]" offset="[offset]"/&gt;
dino@13 3614 &lt;feFuncB type="gamma" amplitude="[amplitude]" exponent="[exponent]" offset="[offset]"/&gt;
dino@13 3615 &lt;/feComponentTransfer&gt;
dino@13 3616 &lt;/filter&gt; </pre>
dino@13 3617
dino@36 3618 <h3 id="blurEquivalent">32.8 blur</h3>
dino@13 3619
dino@13 3620 <pre class="examplesource"> &lt;filter id="blur"&gt;
dino@13 3621 &lt;feGaussianBlur stdDeviation="[radiusX radiusY]"&gt;
dino@13 3622 &lt;/filter&gt; </pre>
dino@13 3623
dino@36 3624 <h3 id="sharpenEquivalent">32.9 sharpen</h3>
dino@13 3625
dino@13 3626 <pre class="examplesource"> &lt;filter id="unsharp"&gt;
dino@13 3627 &lt;feUnsharpMask stdDeviation="[radius]" threshold="[threshold]" amount="[amount]"&gt;
dino@13 3628 &lt;/filter&gt; </pre>
dino@13 3629
dino@36 3630 <h3 id="dropshadowEquivalent">32.10 drop-shadow</h3>
dino@33 3631
dino@33 3632 <pre class="examplesource"> &lt;filter id="drop-shadow"&gt;
dino@33 3633 &lt;feGaussianBlur in="[alpha-channel-of-input]" stdDeviation="[radius]"/&gt;
dino@33 3634 &lt;feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/&gt;
dino@33 3635 &lt;feFlood flood-color="[color]"/&gt;
dino@33 3636 &lt;feComposite in2="offsetblur" operator="in"/&gt;
dino@33 3637 &lt;feMerge&gt;
dino@33 3638 &lt;feMergeNode/&gt;
dino@33 3639 &lt;feMergeNode in="input-image"/&gt;
dino@33 3640 &lt;/feMerge&gt;
dino@33 3641 &lt;/filter&gt; </pre>
dino@33 3642
dino@33 3643 <h2 id="DOMInterfaces">33 DOM interfaces</h2>
dino@13 3644
dino@11 3645 <div class="note">
dino@11 3646 The interfaces below will be made available in a IDL file for an upcoming draft.
dino@11 3647 </div>
dino@11 3648
dino@33 3649 <h3 id="InterfaceImageData">33.1 Interface ImageData</h3>
dino@11 3650
dino@11 3651
dino@11 3652 The ImageData interface corresponds to pixel data that can be used as input to the SVGFilterElement interface.
dino@11 3653 <pre class="idl">interface <b>ImageData</b> {
dino@11 3654 readonly attribute long <a href="#__svg__ImageData__width">width</a>;
dino@11 3655 readonly attribute long <a href="#__svg__ImageData__height">height</a>;
dino@11 3656 readonly attribute <a href="#__svg__ImageData__data">data</a>;
dino@11 3657 };</pre><dl class="interface"><dt>Attributes:</dt><dd><dl class="attributes">
dino@11 3658 <dt id="__svg__ImageData__width"><b>width</b><span class="idl-type-parenthetical"> (readonly long)</span></dt><dd><div>
dino@11 3659 The width of the bitmap that the ImageData represents.
dino@11 3660 </div></dd>
dino@11 3661 <dt id="__svg__ImageData__height"><b>height</b><span class="idl-type-parenthetical"> (readonly long)</span></dt><dd><div>
dino@11 3662 The height of the bitmap that the ImageData represents.
dino@11 3663 </div></dd>
dino@11 3664 <dt id="__svg__ImageData__data"><b>data</b><span class="idl-type-parenthetical"> (readonly )</span></dt><dd><div>
dino@11 3665 An array of pixel values that is the bitmap. This array must
dino@11 3666 always be in the form of width×height×4 integer values. The
dino@11 3667 pixel data is in left-to-right order, starting from the top-left
dino@11 3668 corner, and going row by row downwards. Every pixel is
dino@11 3669 represented by four integer values, red, green, blue and alpha,
dino@11 3670 in that order. The range of each color component is 0..255. The
dino@11 3671 intent is that this is compatible with the HTML5 [<a href="#ref-html5">HTML5</a>]
dino@11 3672 canvas interfaces, in particular see
dino@11 3673 <a href="http://www.w3.org/TR/html5/the-canvas.html#imagedata">ImageData</a>.
dino@11 3674 </div></dd></dl></dd></dl>
dino@11 3675
dino@33 3676 <h3 id="InterfaceSVGFilterElement">33.2 Interface SVGFilterElement</h3>
dino@11 3677
dino@11 3678
dino@11 3679
dino@11 3680 The <a class="idlinterface" href="#InterfaceSVGFilterElement">SVGFilterElement</a> interface corresponds to the <a href="#FilterElement"><span class="element-name">‘filter’</span></a>
dino@11 3681 element.
dino@11 3682 <pre class="idl">interface <b>SVGFilterElement</b> : ::svg::SVGElement,
dino@11 3683 ::svg::SVGURIReference,
dino@11 3684 ::svg::SVGLangSpace,
dino@11 3685 ::svg::SVGExternalResourcesRequired,
dino@11 3686 ::svg::SVGStylable,
dino@11 3687 ::svg::SVGUnitTypes {
dino@11 3688
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 3697
dino@11 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>);
dino@11 3699 <a class="idlinterface" href="#InterfaceImageData">ImageData</a> <a href="#__svg__SVGFilterElement__apply">apply</a>(in <a class="idlinterface" href="#InterfaceImageData">ImageData</a> source);
dino@11 3700 };</pre><dl class="interface"><dt>Attributes:</dt><dd><dl class="attributes">
dino@11 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>
dino@11 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>
dino@11 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>.
dino@11 3704 </div></dd>
dino@11 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>
dino@11 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>
dino@11 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>.
dino@11 3708 </div></dd>
dino@11 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>
dino@11 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.
dino@11 3711 </div></dd>
dino@11 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>
dino@11 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.
dino@11 3714 </div></dd>
dino@11 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>
dino@11 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.
dino@11 3717 </div></dd>
dino@11 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>
dino@11 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.
dino@11 3720 </div></dd>
dino@11 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>
dino@11 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>
dino@11 3723 element. Contains the X component of attribute <a href="#FilterElementFilterResAttribute"><span class="attr-name">‘filterRes’</span></a>.
dino@11 3724 </div></dd>
dino@11 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>
dino@11 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>
dino@11 3727 element. Contains the Y component (possibly computed automatically) of
dino@11 3728 attribute <a href="#FilterElementFilterResAttribute"><span class="attr-name">‘filterRes’</span></a>.
dino@11 3729 </div></dd></dl></dd><dt>Operations:</dt><dd><dl class="attributes">
dino@11 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>
dino@11 3731 Sets the values for attribute <a href="#FilterElementFilterResAttribute"><span class="attr-name">‘filterRes’</span></a>.
dino@11 3732
dino@11 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>.
dino@11 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>.
dino@11 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
dino@11 3736 to change the value of a readonly attribute.
dino@11 3737 </dd></dl></dd></dl></dd>
dino@11 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>
dino@11 3739 Applies the filter to the given ImageData object and returns the result.
dino@11 3740
dino@11 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.
dino@11 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.
dino@11 3743 </div></dd></dl></dd></dl></dd></dl>
dino@11 3744
dino@11 3745
dino@33 3746 <h3 id="InterfaceSVGFilterPrimitiveStandardAttributes">33.3 Interface SVGFilterPrimitiveStandardAttributes</h3>
dino@11 3747
dino@11 3748
dino@11 3749
dino@11 3750 This interface defines the set of DOM attributes that are common across
dino@11 3751 the filter primitive interfaces.
dino@11 3752 <pre class="idl">interface <b>SVGFilterPrimitiveStandardAttributes</b> : ::svg::SVGStylable {
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 3758 };</pre><dl class="interface"><dt>Attributes:</dt><dd><dl class="attributes">
dino@11 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>
dino@11 3760 Corresponds to attribute <a href="filters.html#FilterPrimitiveXAttribute"><span class="attr-name">‘x’</span></a> on the given element.
dino@11 3761 </div></dd>
dino@11 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>
dino@11 3763 Corresponds to attribute <a href="filters.html#FilterPrimitiveYAttribute"><span class="attr-name">‘y’</span></a> on the given element.
dino@11 3764 </div></dd>
dino@11 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>
dino@11 3766 Corresponds to attribute <a href="filters.html#FilterPrimitiveWidthAttribute"><span class="attr-name">‘width’</span></a> on the given element.
dino@11 3767 </div></dd>
dino@11 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>
dino@11 3769 Corresponds to attribute <a href="filters.html#FilterPrimitiveHeightAttribute"><span class="attr-name">‘height’</span></a> on the given element.
dino@11 3770 </div></dd>
dino@11 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>
dino@11 3772 Corresponds to attribute <a href="filters.html#FilterPrimitiveResultAttribute"><span class="attr-name">‘result’</span></a> on the given element.
dino@11 3773 </div></dd></dl></dd></dl>
dino@11 3774
dino@11 3775
dino@33 3776 <h3 id="InterfaceSVGFEBlendElement">33.4 Interface SVGFEBlendElement</h3>
dino@11 3777
dino@11 3778
dino@11 3779
dino@11 3780 The <a class="idlinterface" href="#InterfaceSVGFEBlendElement">SVGFEBlendElement</a> interface corresponds to the <a href="#feBlendElement"><span class="element-name">‘feBlend’</span></a>
dino@11 3781 element.
dino@11 3782 <pre class="idl">interface <b>SVGFEBlendElement</b> : ::svg::SVGElement,
dino@11 3783 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
dino@11 3784
dino@11 3785 // Blend Mode Types
dino@11 3786 const unsigned short <a href="#__svg__SVGFEBlendElement__SVG_FEBLEND_MODE_UNKNOWN">SVG_FEBLEND_MODE_UNKNOWN</a> = 0;
dino@11 3787 const unsigned short <a href="#__svg__SVGFEBlendElement__SVG_FEBLEND_MODE_NORMAL">SVG_FEBLEND_MODE_NORMAL</a> = 1;
dino@11 3788 const unsigned short <a href="#__svg__SVGFEBlendElement__SVG_FEBLEND_MODE_MULTIPLY">SVG_FEBLEND_MODE_MULTIPLY</a> = 2;
dino@11 3789 const unsigned short <a href="#__svg__SVGFEBlendElement__SVG_FEBLEND_MODE_SCREEN">SVG_FEBLEND_MODE_SCREEN</a> = 3;
dino@11 3790 const unsigned short <a href="#__svg__SVGFEBlendElement__SVG_FEBLEND_MODE_DARKEN">SVG_FEBLEND_MODE_DARKEN</a> = 4;
dino@11 3791 const unsigned short <a href="#__svg__SVGFEBlendElement__SVG_FEBLEND_MODE_LIGHTEN">SVG_FEBLEND_MODE_LIGHTEN</a> = 5;
dino@11 3792
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 3796 };</pre><dl class="interface"><dt>Constants in group “Blend Mode Types”:</dt><dd><dl class="constants">
dino@11 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>
dino@11 3798 The type is not one of predefined types. It is invalid to attempt to
dino@11 3799 define a new value of this type or to attempt to switch an existing
dino@11 3800 value to this type.
dino@11 3801
dino@11 3802 </div></dd>
dino@11 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>
dino@11 3804 Corresponds to value <span class="attr-value">'normal'</span>.
dino@11 3805
dino@11 3806 </div></dd>
dino@11 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>
dino@11 3808 Corresponds to value <span class="attr-value">'multiply'</span>.
dino@11 3809
dino@11 3810 </div></dd>
dino@11 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>
dino@11 3812 Corresponds to value <span class="attr-value">'screen'</span>.
dino@11 3813
dino@11 3814 </div></dd>
dino@11 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>
dino@11 3816 Corresponds to value <span class="attr-value">'darken'</span>.
dino@11 3817
dino@11 3818 </div></dd>
dino@11 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>
dino@11 3820 Corresponds to value <span class="attr-value">'lighten'</span>.
dino@11 3821
dino@11 3822 </div></dd></dl></dd><dt>Attributes:</dt><dd><dl class="attributes">
dino@11 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>
dino@11 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>
dino@11 3825 element.
dino@11 3826 </div></dd>
dino@11 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>
dino@11 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>
dino@11 3829 element.
dino@11 3830 </div></dd>
dino@11 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>
dino@11 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>
dino@11 3833 element. Takes one of the SVG_FEBLEND_MODE_* constants defined on
dino@11 3834 this interface.
dino@11 3835 </div></dd></dl></dd></dl>
dino@11 3836
dino@11 3837
dino@33 3838 <h3 id="InterfaceSVGFEColorMatrixElement">33.5 Interface SVGFEColorMatrixElement</h3>
dino@11 3839
dino@11 3840
dino@11 3841
dino@11 3842 The <a class="idlinterface" href="#InterfaceSVGFEColorMatrixElement">SVGFEColorMatrixElement</a> interface corresponds to the
dino@11 3843 <a href="#feColorMatrixElement"><span class="element-name">‘feColorMatrix’</span></a> element.
dino@11 3844 <pre class="idl">interface <b>SVGFEColorMatrixElement</b> : ::svg::SVGElement,
dino@11 3845 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
dino@11 3846
dino@11 3847 // Color Matrix Types
dino@11 3848 const unsigned short <a href="#__svg__SVGFEColorMatrixElement__SVG_FECOLORMATRIX_TYPE_UNKNOWN">SVG_FECOLORMATRIX_TYPE_UNKNOWN</a> = 0;
dino@11 3849 const unsigned short <a href="#__svg__SVGFEColorMatrixElement__SVG_FECOLORMATRIX_TYPE_MATRIX">SVG_FECOLORMATRIX_TYPE_MATRIX</a> = 1;
dino@11 3850 const unsigned short <a href="#__svg__SVGFEColorMatrixElement__SVG_FECOLORMATRIX_TYPE_SATURATE">SVG_FECOLORMATRIX_TYPE_SATURATE</a> = 2;
dino@11 3851 const unsigned short <a href="#__svg__SVGFEColorMatrixElement__SVG_FECOLORMATRIX_TYPE_HUEROTATE">SVG_FECOLORMATRIX_TYPE_HUEROTATE</a> = 3;
dino@11 3852 const unsigned short <a href="#__svg__SVGFEColorMatrixElement__SVG_FECOLORMATRIX_TYPE_LUMINANCETOALPHA">SVG_FECOLORMATRIX_TYPE_LUMINANCETOALPHA</a> = 4;
dino@11 3853
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 3857 };</pre><dl class="interface"><dt>Constants in group “Color Matrix Types”:</dt><dd><dl class="constants">
dino@11 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>
dino@11 3859 The type is not one of predefined types. It is invalid to attempt to
dino@11 3860 define a new value of this type or to attempt to switch an existing
dino@11 3861 value to this type.
dino@11 3862
dino@11 3863 </div></dd>
dino@11 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>
dino@11 3865 Corresponds to value <span class="attr-value">'matrix'</span>.
dino@11 3866
dino@11 3867 </div></dd>
dino@11 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>
dino@11 3869 Corresponds to value <span class="attr-value">'saturate'</span>.
dino@11 3870
dino@11 3871 </div></dd>
dino@11 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>
dino@11 3873 Corresponds to value <span class="attr-value">'hueRotate'</span>.
dino@11 3874
dino@11 3875 </div></dd>
dino@11 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>
dino@11 3877 Corresponds to value <span class="attr-value">'luminanceToAlpha'</span>.
dino@11 3878
dino@11 3879 </div></dd></dl></dd><dt>Attributes:</dt><dd><dl class="attributes">
dino@11 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>
dino@11 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>
dino@11 3882 element.
dino@11 3883 </div></dd>
dino@11 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>
dino@11 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>
dino@11 3886 element. Takes one of the SVG_FECOLORMATRIX_TYPE_* constants defined
dino@11 3887 on this interface.
dino@11 3888 </div></dd>
dino@11 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>
dino@11 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>
dino@11 3891 element.
dino@11 3892 </div></dd></dl></dd></dl>
dino@11 3893
dino@11 3894
dino@33 3895 <h3 id="InterfaceSVGFEComponentTransferElement">33.6 Interface SVGFEComponentTransferElement</h3>
dino@11 3896
dino@11 3897
dino@11 3898
dino@11 3899 The <a class="idlinterface" href="#InterfaceSVGFEComponentTransferElement">SVGFEComponentTransferElement</a> interface corresponds to the
dino@11 3900 <a href="#feComponentTransferElement"><span class="element-name">‘feComponentTransfer’</span></a> element.
dino@11 3901 <pre class="idl">interface <b>SVGFEComponentTransferElement</b> : ::svg::SVGElement,
dino@11 3902 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
dino@11 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>;
dino@11 3904 };</pre><dl class="interface"><dt>Attributes:</dt><dd><dl class="attributes">
dino@11 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>
dino@11 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>
dino@11 3907 element.
dino@11 3908 </div></dd></dl></dd></dl>
dino@11 3909
dino@11 3910
dino@33 3911 <h3 id="InterfaceSVGComponentTransferFunctionElement">33.7 Interface SVGComponentTransferFunctionElement</h3>
dino@11 3912
dino@11 3913
dino@11 3914
dino@11 3915 This interface defines a base interface used by the component transfer
dino@11 3916 function interfaces.
dino@11 3917 <pre class="idl">interface <b>SVGComponentTransferFunctionElement</b> : ::svg::SVGElement {
dino@11 3918
dino@11 3919 // Component Transfer Types
dino@11 3920 const unsigned short <a href="#__svg__SVGComponentTransferFunctionElement__SVG_FECOMPONENTTRANSFER_TYPE_UNKNOWN">SVG_FECOMPONENTTRANSFER_TYPE_UNKNOWN</a> = 0;
dino@11 3921 const unsigned short <a href="#__svg__SVGComponentTransferFunctionElement__SVG_FECOMPONENTTRANSFER_TYPE_IDENTITY">SVG_FECOMPONENTTRANSFER_TYPE_IDENTITY</a> = 1;
dino@11 3922 const unsigned short <a href="#__svg__SVGComponentTransferFunctionElement__SVG_FECOMPONENTTRANSFER_TYPE_TABLE">SVG_FECOMPONENTTRANSFER_TYPE_TABLE</a> = 2;
dino@11 3923 const unsigned short <a href="#__svg__SVGComponentTransferFunctionElement__SVG_FECOMPONENTTRANSFER_TYPE_DISCRETE">SVG_FECOMPONENTTRANSFER_TYPE_DISCRETE</a> = 3;
dino@11 3924 const unsigned short <a href="#__svg__SVGComponentTransferFunctionElement__SVG_FECOMPONENTTRANSFER_TYPE_LINEAR">SVG_FECOMPONENTTRANSFER_TYPE_LINEAR</a> = 4;
dino@11 3925 const unsigned short <a href="#__svg__SVGComponentTransferFunctionElement__SVG_FECOMPONENTTRANSFER_TYPE_GAMMA">SVG_FECOMPONENTTRANSFER_TYPE_GAMMA</a> = 5;
dino@11 3926
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 3934 };</pre><dl class="interface"><dt>Constants in group “Component Transfer Types”:</dt><dd><dl class="constants">
dino@11 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>
dino@11 3936 The type is not one of predefined types. It is invalid to attempt to
dino@11 3937 define a new value of this type or to attempt to switch an existing
dino@11 3938 value to this type.
dino@11 3939
dino@11 3940 </div></dd>
dino@11 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>
dino@11 3942 Corresponds to value <span class="attr-value">'identity'</span>.
dino@11 3943
dino@11 3944 </div></dd>
dino@11 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>
dino@11 3946 Corresponds to value <span class="attr-value">'table'</span>.
dino@11 3947
dino@11 3948 </div></dd>
dino@11 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>
dino@11 3950 Corresponds to value <span class="attr-value">'discrete'</span>.
dino@11 3951
dino@11 3952 </div></dd>
dino@11 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>
dino@11 3954 Corresponds to value <span class="attr-value">'linear'</span>.
dino@11 3955
dino@11 3956 </div></dd>
dino@11 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>
dino@11 3958 Corresponds to value <span class="attr-value">'gamma'</span>.
dino@11 3959
dino@11 3960 </div></dd></dl></dd><dt>Attributes:</dt><dd><dl class="attributes">
dino@11 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>
dino@11 3962 Corresponds to attribute <a href="#feComponentTransferTypeAttribute"><span class="attr-name">‘type’</span></a> on the given
dino@11 3963 element. Takes one of the SVG_FECOMPONENTTRANSFER_TYPE_* constants defined
dino@11 3964 on this interface.
dino@11 3965 </div></dd>
dino@11 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>
dino@11 3967 Corresponds to attribute <a href="#feComponentTransferTableValuesAttribute"><span class="attr-name">‘tableValues’</span></a> on the given element.
dino@11 3968 </div></dd>
dino@11 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>
dino@11 3970 Corresponds to attribute <a href="#feComponentTransferSlopeAttribute"><span class="attr-name">‘slope’</span></a> on the given element.
dino@11 3971 </div></dd>
dino@11 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>
dino@11 3973 Corresponds to attribute <a href="#feComponentTransferInterceptAttribute"><span class="attr-name">‘intercept’</span></a> on the given element.
dino@11 3974 </div></dd>
dino@11 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>
dino@11 3976 Corresponds to attribute <a href="#feComponentTransferAmplitudeAttribute"><span class="attr-name">‘amplitude’</span></a> on the given element.
dino@11 3977 </div></dd>
dino@11 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>
dino@11 3979 Corresponds to attribute <a href="#feComponentTransferExponentAttribute"><span class="attr-name">‘exponent’</span></a> on the given element.
dino@11 3980 </div></dd>
dino@11 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>
dino@11 3982 Corresponds to attribute <a href="#feComponentTransferOffsetAttribute"><span class="attr-name">‘offset’</span></a> on the given element.
dino@11 3983 </div></dd></dl></dd></dl>
dino@11 3984
dino@11 3985
dino@33 3986 <h3 id="InterfaceSVGFEFuncRElement">33.8 Interface SVGFEFuncRElement</h3>
dino@11 3987
dino@11 3988
dino@11 3989
dino@11 3990 The <a class="idlinterface" href="#InterfaceSVGFEFuncRElement">SVGFEFuncRElement</a> interface corresponds to the <a href=""><span class="element-name">‘feFuncR’</span></a>
dino@11 3991 element.
dino@11 3992 <pre class="idl">interface <b>SVGFEFuncRElement</b> : <a class="idlinterface" href="#InterfaceSVGComponentTransferFunctionElement">SVGComponentTransferFunctionElement</a> {
dino@11 3993 };</pre>
dino@11 3994
dino@11 3995
dino@33 3996 <h3 id="InterfaceSVGFEFuncGElement">33.9 Interface SVGFEFuncGElement</h3>
dino@11 3997
dino@11 3998
dino@11 3999
dino@11 4000 The <a class="idlinterface" href="#InterfaceSVGFEFuncRElement">SVGFEFuncRElement</a> interface corresponds to the <a href=""><span class="element-name">‘feFuncG’</span></a>
dino@11 4001 element.
dino@11 4002 <pre class="idl">interface <b>SVGFEFuncGElement</b> : <a class="idlinterface" href="#InterfaceSVGComponentTransferFunctionElement">SVGComponentTransferFunctionElement</a> {
dino@11 4003 };</pre>
dino@11 4004
dino@11 4005
dino@33 4006 <h3 id="InterfaceSVGFEFuncBElement">33.10 Interface SVGFEFuncBElement</h3>
dino@11 4007
dino@11 4008
dino@11 4009
dino@11 4010 The <a class="idlinterface" href="#InterfaceSVGFEFuncBElement">SVGFEFuncBElement</a> interface corresponds to the <a href=""><span class="element-name">‘feFuncB’</span></a>
dino@11 4011 element.
dino@11 4012 <pre class="idl">interface <b>SVGFEFuncBElement</b> : <a class="idlinterface" href="#InterfaceSVGComponentTransferFunctionElement">SVGComponentTransferFunctionElement</a> {
dino@11 4013 };</pre>
dino@11 4014
dino@11 4015
dino@33 4016 <h3 id="InterfaceSVGFEFuncAElement">33.11 Interface SVGFEFuncAElement</h3>
dino@11 4017
dino@11 4018
dino@11 4019
dino@11 4020 The <a class="idlinterface" href="#InterfaceSVGFEFuncAElement">SVGFEFuncAElement</a> interface corresponds to the <a href=""><span class="element-name">‘feFuncA’</span></a>
dino@11 4021 element.
dino@11 4022 <pre class="idl">interface <b>SVGFEFuncAElement</b> : <a class="idlinterface" href="#InterfaceSVGComponentTransferFunctionElement">SVGComponentTransferFunctionElement</a> {
dino@11 4023 };</pre>
dino@11 4024
dino@11 4025
dino@33 4026 <h3 id="InterfaceSVGFECompositeElement">33.12 Interface SVGFECompositeElement</h3>
dino@11 4027
dino@11 4028
dino@11 4029
dino@11 4030 The <a class="idlinterface" href="#InterfaceSVGFECompositeElement">SVGFECompositeElement</a> interface corresponds to the
dino@11 4031 <a href="#feCompositeElement"><span class="element-name">‘feComposite’</span></a> element.
dino@11 4032 <pre class="idl">interface <b>SVGFECompositeElement</b> : ::svg::SVGElement,
dino@11 4033 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
dino@11 4034
dino@11 4035 // Composite Operators
dino@11 4036 const unsigned short <a href="#__svg__SVGFECompositeElement__SVG_FECOMPOSITE_OPERATOR_UNKNOWN">SVG_FECOMPOSITE_OPERATOR_UNKNOWN</a> = 0;
dino@11 4037 const unsigned short <a href="#__svg__SVGFECompositeElement__SVG_FECOMPOSITE_OPERATOR_OVER">SVG_FECOMPOSITE_OPERATOR_OVER</a> = 1;
dino@11 4038 const unsigned short <a href="#__svg__SVGFECompositeElement__SVG_FECOMPOSITE_OPERATOR_IN">SVG_FECOMPOSITE_OPERATOR_IN</a> = 2;
dino@11 4039 const unsigned short <a href="#__svg__SVGFECompositeElement__SVG_FECOMPOSITE_OPERATOR_OUT">SVG_FECOMPOSITE_OPERATOR_OUT</a> = 3;
dino@11 4040 const unsigned short <a href="#__svg__SVGFECompositeElement__SVG_FECOMPOSITE_OPERATOR_ATOP">SVG_FECOMPOSITE_OPERATOR_ATOP</a> = 4;
dino@11 4041 const unsigned short <a href="#__svg__SVGFECompositeElement__SVG_FECOMPOSITE_OPERATOR_XOR">SVG_FECOMPOSITE_OPERATOR_XOR</a> = 5;
dino@11 4042 const unsigned short <a href="#__svg__SVGFECompositeElement__SVG_FECOMPOSITE_OPERATOR_ARITHMETIC">SVG_FECOMPOSITE_OPERATOR_ARITHMETIC</a> = 6;
dino@11 4043
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 4051 };</pre><dl class="interface"><dt>Constants in group “Composite Operators”:</dt><dd><dl class="constants">
dino@11 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>
dino@11 4053 The type is not one of predefined types. It is invalid to attempt to
dino@11 4054 define a new value of this type or to attempt to switch an existing
dino@11 4055 value to this type.
dino@11 4056
dino@11 4057 </div></dd>
dino@11 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>
dino@11 4059 Corresponds to value <span class="attr-value">'over'</span>.
dino@11 4060
dino@11 4061 </div></dd>
dino@11 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>
dino@11 4063 Corresponds to value <span class="attr-value">'in'</span>.
dino@11 4064
dino@11 4065 </div></dd>
dino@11 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>
dino@11 4067 Corresponds to value <span class="attr-value">'out'</span>.
dino@11 4068
dino@11 4069 </div></dd>
dino@11 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>
dino@11 4071 Corresponds to value <span class="attr-value">'atop'</span>.
dino@11 4072
dino@11 4073 </div></dd>
dino@11 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>
dino@11 4075 Corresponds to value <span class="attr-value">'xor'</span>.
dino@11 4076
dino@11 4077 </div></dd>
dino@11 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>
dino@11 4079 Corresponds to value <span class="attr-value">'arithmetic'</span>.
dino@11 4080
dino@11 4081 </div></dd></dl></dd><dt>Attributes:</dt><dd><dl class="attributes">
dino@11 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>
dino@11 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>
dino@11 4084 element.
dino@11 4085 </div></dd>
dino@11 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>
dino@11 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>
dino@11 4088 element.
dino@11 4089 </div></dd>
dino@11 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>
dino@11 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>
dino@11 4092 element. Takes one of the SVG_FECOMPOSITE_OPERATOR_* constants defined
dino@11 4093 on this interface.
dino@11 4094 </div></dd>
dino@11 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>
dino@11 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>
dino@11 4097 element.
dino@11 4098 </div></dd>
dino@11 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>
dino@11 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>
dino@11 4101 element.
dino@11 4102 </div></dd>
dino@11 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>
dino@11 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>
dino@11 4105 element.
dino@11 4106 </div></dd>
dino@11 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>
dino@11 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>
dino@11 4109 element.
dino@11 4110 </div></dd></dl></dd></dl>
dino@11 4111
dino@11 4112
dino@33 4113 <h3 id="InterfaceSVGFEConvolveMatrixElement">33.13 Interface SVGFEConvolveMatrixElement</h3>
dino@11 4114
dino@11 4115
dino@11 4116
dino@11 4117 The <a class="idlinterface" href="#InterfaceSVGFEConvolveMatrixElement">SVGFEConvolveMatrixElement</a> interface corresponds to the
dino@11 4118 <a href="#feConvolveMatrixElement"><span class="element-name">‘feConvolveMatrix’</span></a> element.
dino@11 4119 <pre class="idl">interface <b>SVGFEConvolveMatrixElement</b> : ::svg::SVGElement,
dino@11 4120 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
dino@11 4121
dino@11 4122 // Edge Mode Values
dino@11 4123 const unsigned short <a href="#__svg__SVGFEConvolveMatrixElement__SVG_EDGEMODE_UNKNOWN">SVG_EDGEMODE_UNKNOWN</a> = 0;
dino@11 4124 const unsigned short <a href="#__svg__SVGFEConvolveMatrixElement__SVG_EDGEMODE_DUPLICATE">SVG_EDGEMODE_DUPLICATE</a> = 1;
dino@11 4125 const unsigned short <a href="#__svg__SVGFEConvolveMatrixElement__SVG_EDGEMODE_WRAP">SVG_EDGEMODE_WRAP</a> = 2;
dino@11 4126 const unsigned short <a href="#__svg__SVGFEConvolveMatrixElement__SVG_EDGEMODE_NONE">SVG_EDGEMODE_NONE</a> = 3;
dino@11 4127
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 4140 };</pre><dl class="interface"><dt>Constants in group “Edge Mode Values”:</dt><dd><dl class="constants">
dino@11 4141 <dt id="__svg__SVGFEConvolveMatrixElement__SVG_EDGEMODE_UNKNOWN"><b>SVG_EDGEMODE_UNKNOWN</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
dino@11 4142 The type is not one of predefined types. It is invalid to attempt to
dino@11 4143 define a new value of this type or to attempt to switch an existing
dino@11 4144 value to this type.
dino@11 4145
dino@11 4146 </div></dd>
dino@11 4147 <dt id="__svg__SVGFEConvolveMatrixElement__SVG_EDGEMODE_DUPLICATE"><b>SVG_EDGEMODE_DUPLICATE</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
dino@11 4148 Corresponds to value <span class="attr-value">'duplicate'</span>.
dino@11 4149
dino@11 4150 </div></dd>
dino@11 4151 <dt id="__svg__SVGFEConvolveMatrixElement__SVG_EDGEMODE_WRAP"><b>SVG_EDGEMODE_WRAP</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
dino@11 4152 Corresponds to value <span class="attr-value">'wrap'</span>.
dino@11 4153
dino@11 4154 </div></dd>
dino@11 4155 <dt id="__svg__SVGFEConvolveMatrixElement__SVG_EDGEMODE_NONE"><b>SVG_EDGEMODE_NONE</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
dino@11 4156 Corresponds to value <span class="attr-value">'none'</span>.
dino@11 4157
dino@11 4158 </div></dd></dl></dd><dt>Attributes:</dt><dd><dl class="attributes">
dino@11 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>
dino@11 4160 Corresponds to attribute <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a> on the given
dino@11 4161 <a href="#feConvolveMatrixElement"><span class="element-name">‘feConvolveMatrix’</span></a> element.
dino@11 4162 </div></dd>
dino@11 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>
dino@11 4164 Corresponds to attribute <a href="#feConvolveMatrixElementOrderAttribute"><span class="attr-name">‘order’</span></a> on the given
dino@11 4165 <a href="#feConvolveMatrixElement"><span class="element-name">‘feConvolveMatrix’</span></a> element.
dino@11 4166 </div></dd>
dino@11 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>
dino@11 4168 Corresponds to attribute <a href="#feConvolveMatrixElementOrderAttribute"><span class="attr-name">‘order’</span></a> on the given
dino@11 4169 <a href="#feConvolveMatrixElement"><span class="element-name">‘feConvolveMatrix’</span></a> element.
dino@11 4170 </div></dd>
dino@11 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>
dino@11 4172 Corresponds to attribute <a href="#feConvolveMatrixElementKernelMatrixAttribute"><span class="attr-name">‘kernelMatrix’</span></a> on the given
dino@11 4173 <a href="#feConvolveMatrixElement"><span class="element-name">‘feConvolveMatrix’</span></a> element.
dino@11 4174 </div></dd>
dino@11 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>
dino@11 4176 Corresponds to attribute <a href="#feConvolveMatrixElementDivisorAttribute"><span class="attr-name">‘divisor’</span></a> on the given
dino@11 4177 <a href="#feConvolveMatrixElement"><span class="element-name">‘feConvolveMatrix’</span></a> element.
dino@11 4178 </div></dd>
dino@11 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>
dino@11 4180 Corresponds to attribute <a href="#feConvolveMatrixElementBiasAttribute"><span class="attr-name">‘bias’</span></a> on the given
dino@11 4181 <a href="#feConvolveMatrixElement"><span class="element-name">‘feConvolveMatrix’</span></a> element.
dino@11 4182 </div></dd>
dino@11 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>
dino@11 4184 Corresponds to attribute <a href="#feConvolveMatrixElementTargetXAttribute"><span class="attr-name">‘targetX’</span></a> on the given
dino@11 4185 <a href="#feConvolveMatrixElement"><span class="element-name">‘feConvolveMatrix’</span></a> element.
dino@11 4186 </div></dd>
dino@11 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>
dino@11 4188 Corresponds to attribute <a href="#feConvolveMatrixElementTargetYAttribute"><span class="attr-name">‘targetY’</span></a> on the given
dino@11 4189 <a href="#feConvolveMatrixElement"><span class="element-name">‘feConvolveMatrix’</span></a> element.
dino@11 4190 </div></dd>
dino@11 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>
dino@11 4192 Corresponds to attribute <a href="#feConvolveMatrixElementEdgeModeAttribute"><span class="attr-name">‘edgeMode’</span></a> on the given
dino@11 4193 <a href="#feConvolveMatrixElement"><span class="element-name">‘feConvolveMatrix’</span></a> element. Takes one of the SVG_EDGEMODE_*
dino@11 4194 constants defined on this interface.
dino@11 4195 </div></dd>
dino@11 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>
dino@11 4197 Corresponds to attribute <a href="#feConvolveMatrixElementKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a> on the given
dino@11 4198 <a href="#feConvolveMatrixElement"><span class="element-name">‘feConvolveMatrix’</span></a> element.
dino@11 4199 </div></dd>
dino@11 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>
dino@11 4201 Corresponds to attribute <a href="#feConvolveMatrixElementKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a> on the given
dino@11 4202 <a href="#feConvolveMatrixElement"><span class="element-name">‘feConvolveMatrix’</span></a> element.
dino@11 4203 </div></dd>
dino@11 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>
dino@11 4205 Corresponds to attribute <a href="#feConvolveMatrixElementPreserveAlphaAttribute"><span class="attr-name">‘preserveAlpha’</span></a> on the given
dino@11 4206 <a href="#feConvolveMatrixElement"><span class="element-name">‘feConvolveMatrix’</span></a> element.
dino@11 4207 </div></dd></dl></dd></dl>
dino@11 4208
dino@11 4209
dino@33 4210 <h3 id="InterfaceSVGFEDiffuseLightingElement">33.14 Interface SVGFEDiffuseLightingElement</h3>
dino@11 4211
dino@11 4212
dino@11 4213
dino@11 4214 The <a class="idlinterface" href="#InterfaceSVGFEDiffuseLightingElement">SVGFEDiffuseLightingElement</a> interface corresponds to the
dino@11 4215 <a href="#feDiffuseLightingElement"><span class="element-name">‘feDiffuseLighting’</span></a> element.
dino@11 4216 <pre class="idl">interface <b>SVGFEDiffuseLightingElement</b> : ::svg::SVGElement,
dino@11 4217 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 4223 };</pre><dl class="interface"><dt>Attributes:</dt><dd><dl class="attributes">
dino@11 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>
dino@11 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>
dino@11 4226 element.
dino@11 4227 </div></dd>
dino@11 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>
dino@11 4229 Corresponds to attribute <a href="#feDiffuseLightingSurfaceScaleAttribute"><span class="attr-name">‘surfaceScale’</span></a> on the given
dino@11 4230 <a href="#feDiffuseLightingElement"><span class="element-name">‘feDiffuseLighting’</span></a> element.
dino@11 4231 </div></dd>
dino@11 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>
dino@11 4233 Corresponds to attribute <a href="#feDiffuseLightingDiffuseConstantAttribute"><span class="attr-name">‘diffuseConstant’</span></a> on the given
dino@11 4234 <a href="#feDiffuseLightingElement"><span class="element-name">‘feDiffuseLighting’</span></a> element.
dino@11 4235 </div></dd>
dino@11 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>
dino@11 4237 Corresponds to attribute <a href="#feDiffuseLightingKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a> on the given
dino@11 4238 <a href="#feDiffuseLightingElement"><span class="element-name">‘feDiffuseLighting’</span></a> element.
dino@11 4239 </div></dd>
dino@11 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>
dino@11 4241 Corresponds to attribute <a href="#feDiffuseLightingKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a> on the given
dino@11 4242 <a href="#feDiffuseLightingElement"><span class="element-name">‘feDiffuseLighting’</span></a> element.
dino@11 4243 </div></dd></dl></dd></dl>
dino@11 4244
dino@11 4245
dino@33 4246 <h3 id="InterfaceSVGFEDistantLightElement">33.15 Interface SVGFEDistantLightElement</h3>
dino@11 4247
dino@11 4248
dino@11 4249
dino@11 4250 The <a class="idlinterface" href="#InterfaceSVGFEDistantLightElement">SVGFEDistantLightElement</a> interface corresponds to the
dino@11 4251 <a href="#feDistantLightElement"><span class="element-name">‘feDistantLight’</span></a> element.
dino@11 4252 <pre class="idl">interface <b>SVGFEDistantLightElement</b> : ::svg::SVGElement {
dino@11 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>;
dino@11 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>;
dino@11 4255 };</pre><dl class="interface"><dt>Attributes:</dt><dd><dl class="attributes">
dino@11 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>
dino@11 4257 Corresponds to attribute <a href="#feDistantLightAzimuthAttribute"><span class="attr-name">‘azimuth’</span></a> on the given
dino@11 4258 <a href="#feDistantLightElement"><span class="element-name">‘feDistantLight’</span></a> element.
dino@11 4259 </div></dd>
dino@11 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>
dino@11 4261 Corresponds to attribute <a href="#feDistantLightElevationAttribute"><span class="attr-name">‘elevation’</span></a> on the given
dino@11 4262 <a href="#feDistantLightElement"><span class="element-name">‘feDistantLight’</span></a> element.
dino@11 4263 </div></dd></dl></dd></dl>
dino@11 4264
dino@11 4265
dino@33 4266 <h3 id="InterfaceSVGFEPointLightElement">33.16 Interface SVGFEPointLightElement</h3>
dino@11 4267
dino@11 4268
dino@11 4269
dino@11 4270 The <a class="idlinterface" href="#InterfaceSVGFEPointLightElement">SVGFEPointLightElement</a> interface corresponds to the
dino@11 4271 <a href="#fePointLightElement"><span class="element-name">‘fePointLight’</span></a> element.
dino@11 4272 <pre class="idl">interface <b>SVGFEPointLightElement</b> : ::svg::SVGElement {
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 4276 };</pre><dl class="interface"><dt>Attributes:</dt><dd><dl class="attributes">
dino@11 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>
dino@11 4278 Corresponds to attribute <a href="#fePointLightXAttribute"><span class="attr-name">‘x’</span></a> on the given
dino@11 4279 <a href="#fePointLightElement"><span class="element-name">‘fePointLight’</span></a> element.
dino@11 4280 </div></dd>
dino@11 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>
dino@11 4282 Corresponds to attribute <a href="#fePointLightYAttribute"><span class="attr-name">‘y’</span></a> on the given
dino@11 4283 <a href="#fePointLightElement"><span class="element-name">‘fePointLight’</span></a> element.
dino@11 4284 </div></dd>
dino@11 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>
dino@11 4286 Corresponds to attribute <a href="#fePointLightZAttribute"><span class="attr-name">‘z’</span></a> on the given
dino@11 4287 <a href="#fePointLightElement"><span class="element-name">‘fePointLight’</span></a> element.
dino@11 4288 </div></dd></dl></dd></dl>
dino@11 4289
dino@11 4290
dino@33 4291 <h3 id="InterfaceSVGFESpotLightElement">33.17 Interface SVGFESpotLightElement</h3>
dino@11 4292
dino@11 4293
dino@11 4294
dino@11 4295 The <a class="idlinterface" href="#InterfaceSVGFESpotLightElement">SVGFESpotLightElement</a> interface corresponds to the
dino@11 4296 <a href="#feSpotLightElement"><span class="element-name">‘feSpotLight’</span></a> element.
dino@11 4297 <pre class="idl">interface <b>SVGFESpotLightElement</b> : ::svg::SVGElement {
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 4306 };</pre><dl class="interface"><dt>Attributes:</dt><dd><dl class="attributes">
dino@11 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>
dino@11 4308 Corresponds to attribute <a href="#feSpotLightXAttribute"><span class="attr-name">‘x’</span></a> on the given
dino@11 4309 <a href="#feSpotLightElement"><span class="element-name">‘feSpotLight’</span></a> element.
dino@11 4310 </div></dd>
dino@11 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>
dino@11 4312 Corresponds to attribute <a href="#feSpotLightYAttribute"><span class="attr-name">‘y’</span></a> on the given
dino@11 4313 <a href="#feSpotLightElement"><span class="element-name">‘feSpotLight’</span></a> element.
dino@11 4314 </div></dd>
dino@11 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>
dino@11 4316 Corresponds to attribute <a href="#feSpotLightZAttribute"><span class="attr-name">‘z’</span></a> on the given
dino@11 4317 <a href="#feSpotLightElement"><span class="element-name">‘feSpotLight’</span></a> element.
dino@11 4318 </div></dd>
dino@11 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>
dino@11 4320 Corresponds to attribute <a href="#feSpotLightPointsAtXAttribute"><span class="attr-name">‘pointsAtX’</span></a> on the given
dino@11 4321 <a href="#feSpotLightElement"><span class="element-name">‘feSpotLight’</span></a> element.
dino@11 4322 </div></dd>
dino@11 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>
dino@11 4324 Corresponds to attribute <a href="#feSpotLightPointsAtYAttribute"><span class="attr-name">‘pointsAtY’</span></a> on the given
dino@11 4325 <a href="#feSpotLightElement"><span class="element-name">‘feSpotLight’</span></a> element.
dino@11 4326 </div></dd>
dino@11 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>
dino@11 4328 Corresponds to attribute <a href="#feSpotLightPointsAtZAttribute"><span class="attr-name">‘pointsAtZ’</span></a> on the given
dino@11 4329 <a href="#feSpotLightElement"><span class="element-name">‘feSpotLight’</span></a> element.
dino@11 4330 </div></dd>
dino@11 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>
dino@11 4332 Corresponds to attribute <a href="#feSpotLightSpecularExponentAttribute"><span class="attr-name">‘specularExponent’</span></a> on the given
dino@11 4333 <a href="#feSpotLightElement"><span class="element-name">‘feSpotLight’</span></a> element.
dino@11 4334 </div></dd>
dino@11 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>
dino@11 4336 Corresponds to attribute <a href="#feSpotLightLimitingConeAngleAttribute"><span class="attr-name">‘limitingConeAngle’</span></a> on the given
dino@11 4337 <a href="#feSpotLightElement"><span class="element-name">‘feSpotLight’</span></a> element.
dino@11 4338 </div></dd></dl></dd></dl>
dino@11 4339
dino@11 4340
dino@33 4341 <h3 id="InterfaceSVGFEDisplacementMapElement">33.18 Interface SVGFEDisplacementMapElement</h3>
dino@11 4342
dino@11 4343
dino@11 4344
dino@11 4345 The <a class="idlinterface" href="#InterfaceSVGFEDisplacementMapElement">SVGFEDisplacementMapElement</a> interface corresponds to the
dino@11 4346 <a href="#feDisplacementMapElement"><span class="element-name">‘feDisplacementMap’</span></a> element.
dino@11 4347 <pre class="idl">interface <b>SVGFEDisplacementMapElement</b> : ::svg::SVGElement,
dino@11 4348 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
dino@11 4349
dino@11 4350 // Channel Selectors
dino@11 4351 const unsigned short <a href="#__svg__SVGFEDisplacementMapElement__SVG_CHANNEL_UNKNOWN">SVG_CHANNEL_UNKNOWN</a> = 0;
dino@11 4352 const unsigned short <a href="#__svg__SVGFEDisplacementMapElement__SVG_CHANNEL_R">SVG_CHANNEL_R</a> = 1;
dino@11 4353 const unsigned short <a href="#__svg__SVGFEDisplacementMapElement__SVG_CHANNEL_G">SVG_CHANNEL_G</a> = 2;
dino@11 4354 const unsigned short <a href="#__svg__SVGFEDisplacementMapElement__SVG_CHANNEL_B">SVG_CHANNEL_B</a> = 3;
dino@11 4355 const unsigned short <a href="#__svg__SVGFEDisplacementMapElement__SVG_CHANNEL_A">SVG_CHANNEL_A</a> = 4;
dino@11 4356
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 4362 };</pre><dl class="interface"><dt>Constants in group “Channel Selectors”:</dt><dd><dl class="constants">
dino@11 4363 <dt id="__svg__SVGFEDisplacementMapElement__SVG_CHANNEL_UNKNOWN"><b>SVG_CHANNEL_UNKNOWN</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
dino@11 4364 The type is not one of predefined types. It is invalid to attempt to
dino@11 4365 define a new value of this type or to attempt to switch an existing
dino@11 4366 value to this type.
dino@11 4367
dino@11 4368 </div></dd>
dino@11 4369 <dt id="__svg__SVGFEDisplacementMapElement__SVG_CHANNEL_R"><b>SVG_CHANNEL_R</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
dino@11 4370 Corresponds to value <span class="attr-value">'R'</span>.
dino@11 4371
dino@11 4372 </div></dd>
dino@11 4373 <dt id="__svg__SVGFEDisplacementMapElement__SVG_CHANNEL_G"><b>SVG_CHANNEL_G</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
dino@11 4374 Corresponds to value <span class="attr-value">'G'</span>.
dino@11 4375
dino@11 4376 </div></dd>
dino@11 4377 <dt id="__svg__SVGFEDisplacementMapElement__SVG_CHANNEL_B"><b>SVG_CHANNEL_B</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
dino@11 4378 Corresponds to value <span class="attr-value">'B'</span>.
dino@11 4379
dino@11 4380 </div></dd>
dino@11 4381 <dt id="__svg__SVGFEDisplacementMapElement__SVG_CHANNEL_A"><b>SVG_CHANNEL_A</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
dino@11 4382 Corresponds to value <span class="attr-value">'A'</span>.
dino@11 4383
dino@11 4384 </div></dd></dl></dd><dt>Attributes:</dt><dd><dl class="attributes">
dino@11 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>
dino@11 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>
dino@11 4387 element.
dino@11 4388 </div></dd>
dino@11 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>
dino@11 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>
dino@11 4391 element.
dino@11 4392 </div></dd>
dino@11 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>
dino@11 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>
dino@11 4395 element.
dino@11 4396 </div></dd>
dino@11 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>
dino@11 4398 Corresponds to attribute <a href="#feDisplacementMapXChannelSelectorAttribute"><span class="attr-name">‘xChannelSelector’</span></a> on the given
dino@11 4399 <a href="#feDisplacementMapElement"><span class="element-name">‘feDisplacementMap’</span></a> element. Takes one of the SVG_CHANNEL_*
dino@11 4400 constants defined on this interface.
dino@11 4401 </div></dd>
dino@11 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>
dino@11 4403 Corresponds to attribute <a href="#feDisplacementMapYChannelSelectorAttribute"><span class="attr-name">‘yChannelSelector’</span></a> on the given
dino@11 4404 <a href="#feDisplacementMapElement"><span class="element-name">‘feDisplacementMap’</span></a> element. Takes one of the SVG_CHANNEL_*
dino@11 4405 constants defined on this interface.
dino@11 4406 </div></dd></dl></dd></dl>
dino@11 4407
dino@11 4408
dino@33 4409 <h3 id="InterfaceSVGFEFloodElement">33.19 Interface SVGFEFloodElement</h3>
dino@11 4410
dino@11 4411
dino@11 4412
dino@11 4413 The <a class="idlinterface" href="#InterfaceSVGFEFloodElement">SVGFEFloodElement</a> interface corresponds to the
dino@11 4414 <a href="#feFloodElement"><span class="element-name">‘feFlood’</span></a> element.
dino@11 4415 <pre class="idl">interface <b>SVGFEFloodElement</b> : ::svg::SVGElement,
dino@11 4416 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
dino@11 4417 };</pre>
dino@11 4418
dino@11 4419
dino@33 4420 <h3 id="InterfaceSVGFEGaussianBlurElement">33.20 Interface SVGFEGaussianBlurElement</h3>
dino@11 4421
dino@11 4422
dino@11 4423
dino@11 4424 The <a class="idlinterface" href="#InterfaceSVGFEGaussianBlurElement">SVGFEGaussianBlurElement</a> interface corresponds to the
dino@11 4425 <a href="#feGaussianBlurElement"><span class="element-name">‘feGaussianBlur’</span></a> element.
dino@11 4426 <pre class="idl">interface <b>SVGFEGaussianBlurElement</b> : ::svg::SVGElement,
dino@11 4427 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
dino@11 4428
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 4432
dino@11 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>);
dino@11 4434 };</pre><dl class="interface"><dt>Attributes:</dt><dd><dl class="attributes">
dino@11 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>
dino@11 4436 Corresponds to attribute <a href="#FilterPrimitiveInAttribute"><span class="attr-name">‘in’</span></a> on the given
dino@11 4437 <a href="#feGaussianBlurElement"><span class="element-name">‘feGaussianBlur’</span></a> element.
dino@11 4438 </div></dd>
dino@11 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>
dino@11 4440 Corresponds to attribute <a href="#feGaussianBlurStdDeviationAttribute"><span class="attr-name">‘stdDeviation’</span></a> on the given
dino@11 4441 <a href="#feGaussianBlurElement"><span class="element-name">‘feGaussianBlur’</span></a> element. Contains the X component
dino@11 4442 of attribute <a href="#feGaussianBlurStdDeviationAttribute"><span class="attr-name">‘stdDeviation’</span></a>.
dino@11 4443 </div></dd>
dino@11 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>
dino@11 4445 Corresponds to attribute <a href="#feGaussianBlurStdDeviationAttribute"><span class="attr-name">‘stdDeviation’</span></a> on the given
dino@11 4446 <a href="#feGaussianBlurElement"><span class="element-name">‘feGaussianBlur’</span></a> element. Contains the Y component
dino@11 4447 (possibly computed automatically) of attribute <a href="#feGaussianBlurStdDeviationAttribute"><span class="attr-name">‘stdDeviation’</span></a>.
dino@11 4448 </div></dd></dl></dd><dt>Operations:</dt><dd><dl class="attributes">
dino@11 4449 <dt id="__svg__SVGFEGaussianBlurElement__setStdDeviation">void <b>setStdDeviation</b>(in float <var>stdDeviationX</var>, in float <var>stdDeviationY</var>)</dt><dd><div>
dino@11 4450 Sets the values for attribute <a href="#feGaussianBlurStdDeviationAttribute"><span class="attr-name">‘stdDeviation’</span></a>.
dino@11 4451
dino@11 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>.
dino@11 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>.
dino@11 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
dino@11 4455 to change the value of a readonly attribute.
dino@11 4456 </dd></dl></dd></dl></dd></dl></dd></dl>
dino@11 4457
dino@11 4458
dino@33 4459 <h3 id="InterfaceSVGFEImageElement">33.21 Interface SVGFEImageElement</h3>
dino@11 4460
dino@11 4461
dino@11 4462
dino@11 4463 The <a class="idlinterface" href="#InterfaceSVGFEImageElement">SVGFEImageElement</a> interface corresponds to the
dino@11 4464 <a href="#feImageElement"><span class="element-name">‘feImage’</span></a> element.
dino@11 4465 <pre class="idl">interface <b>SVGFEImageElement</b> : ::svg::SVGElement,
dino@11 4466 ::svg::SVGURIReference,
dino@11 4467 ::svg::SVGLangSpace,
dino@11 4468 ::svg::SVGExternalResourcesRequired,
dino@11 4469 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
dino@11 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>;
dino@11 4471 };</pre><dl class="interface"><dt>Attributes:</dt><dd><dl class="attributes">
dino@11 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>
dino@11 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
dino@11 4474 <a href="#feImageElement"><span class="element-name">‘feImage’</span></a> element.
dino@11 4475 </div></dd></dl></dd></dl>
dino@11 4476
dino@11 4477
dino@33 4478 <h3 id="InterfaceSVGFEMergeElement">33.22 Interface SVGFEMergeElement</h3>
dino@11 4479
dino@11 4480
dino@11 4481
dino@11 4482 The <a class="idlinterface" href="#InterfaceSVGFEMergeElement">SVGFEMergeElement</a> interface corresponds to the
dino@11 4483 <a href="#feMergeElement"><span class="element-name">‘feMerge’</span></a> element.
dino@11 4484 <pre class="idl">interface <b>SVGFEMergeElement</b> : ::svg::SVGElement,
dino@11 4485 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
dino@11 4486 };</pre>
dino@11 4487
dino@11 4488
dino@33 4489 <h3 id="InterfaceSVGFEMergeNodeElement">33.23 Interface SVGFEMergeNodeElement</h3>
dino@11 4490
dino@11 4491
dino@11 4492
dino@11 4493 The <a class="idlinterface" href="#InterfaceSVGFEMergeNodeElement">SVGFEMergeNodeElement</a> interface corresponds to the
dino@11 4494 <a href="#feMergeNodeElement"><span class="element-name">‘feMergeNode’</span></a> element.
dino@11 4495 <pre class="idl">interface <b>SVGFEMergeNodeElement</b> : ::svg::SVGElement {
dino@11 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>;
dino@11 4497 };</pre><dl class="interface"><dt>Attributes:</dt><dd><dl class="attributes">
dino@11 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>
dino@11 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>
dino@11 4500 element.
dino@11 4501 </div></dd></dl></dd></dl>
dino@11 4502
dino@11 4503
dino@33 4504 <h3 id="InterfaceSVGFEMorphologyElement">33.24 Interface SVGFEMorphologyElement</h3>
dino@11 4505
dino@11 4506
dino@11 4507
dino@11 4508 The <a class="idlinterface" href="#InterfaceSVGFEMorphologyElement">SVGFEMorphologyElement</a> interface corresponds to the
dino@11 4509 <a href="#feMorphologyElement"><span class="element-name">‘feMorphology’</span></a> element.
dino@11 4510 <pre class="idl">interface <b>SVGFEMorphologyElement</b> : ::svg::SVGElement,
dino@11 4511 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
dino@11 4512
dino@11 4513 // Morphology Operators
dino@11 4514 const unsigned short <a href="#__svg__SVGFEMorphologyElement__SVG_MORPHOLOGY_OPERATOR_UNKNOWN">SVG_MORPHOLOGY_OPERATOR_UNKNOWN</a> = 0;
dino@11 4515 const unsigned short <a href="#__svg__SVGFEMorphologyElement__SVG_MORPHOLOGY_OPERATOR_ERODE">SVG_MORPHOLOGY_OPERATOR_ERODE</a> = 1;
dino@11 4516 const unsigned short <a href="#__svg__SVGFEMorphologyElement__SVG_MORPHOLOGY_OPERATOR_DILATE">SVG_MORPHOLOGY_OPERATOR_DILATE</a> = 2;
dino@11 4517
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 4522 };</pre><dl class="interface"><dt>Constants in group “Morphology Operators”:</dt><dd><dl class="constants">
dino@11 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>
dino@11 4524 The type is not one of predefined types. It is invalid to attempt to
dino@11 4525 define a new value of this type or to attempt to switch an existing
dino@11 4526 value to this type.
dino@11 4527
dino@11 4528 </div></dd>
dino@11 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>
dino@11 4530 Corresponds to value <span class="attr-value">'erode'</span>.
dino@11 4531
dino@11 4532 </div></dd>
dino@11 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>
dino@11 4534 Corresponds to value <span class="attr-value">'dilate'</span>.
dino@11 4535
dino@11 4536 </div></dd></dl></dd><dt>Attributes:</dt><dd><dl class="attributes">
dino@11 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>
dino@11 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>
dino@11 4539 element.
dino@11 4540 </div></dd>
dino@11 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>
dino@11 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>
dino@11 4543 element. Takes one of the SVG_MORPHOLOGY_OPERATOR_* constants
dino@11 4544 defined on this interface.
dino@11 4545 </div></dd>
dino@11 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>
dino@11 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>
dino@11 4548 element.
dino@11 4549 </div></dd>
dino@11 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>
dino@11 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>
dino@11 4552 element.
dino@11 4553 </div></dd></dl></dd></dl>
dino@11 4554
dino@11 4555
dino@33 4556 <h3 id="InterfaceSVGFEOffsetElement">33.25 Interface SVGFEOffsetElement</h3>
dino@11 4557
dino@11 4558
dino@11 4559
dino@11 4560 The <a class="idlinterface" href="#InterfaceSVGFEOffsetElement">SVGFEOffsetElement</a> interface corresponds to the
dino@11 4561 <a href="#feOffsetElement"><span class="element-name">‘feOffset’</span></a> element.
dino@11 4562 <pre class="idl">interface <b>SVGFEOffsetElement</b> : ::svg::SVGElement,
dino@11 4563 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 4567 };</pre><dl class="interface"><dt>Attributes:</dt><dd><dl class="attributes">
dino@11 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>
dino@11 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>
dino@11 4570 element.
dino@11 4571 </div></dd>
dino@11 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>
dino@11 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>
dino@11 4574 element.
dino@11 4575 </div></dd>
dino@11 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>
dino@11 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>
dino@11 4578 element.
dino@11 4579 </div></dd></dl></dd></dl>
dino@11 4580
dino@11 4581
dino@33 4582 <h3 id="InterfaceSVGFESpecularLightingElement">33.26 Interface SVGFESpecularLightingElement</h3>
dino@11 4583
dino@11 4584
dino@11 4585
dino@11 4586 The <a class="idlinterface" href="#InterfaceSVGFESpecularLightingElement">SVGFESpecularLightingElement</a> interface corresponds to the
dino@11 4587 <a href="#feSpecularLightingElement"><span class="element-name">‘feSpecularLighting’</span></a> element.
dino@11 4588 <pre class="idl">interface <b>SVGFESpecularLightingElement</b> : ::svg::SVGElement,
dino@11 4589 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 4596 };</pre><dl class="interface"><dt>Attributes:</dt><dd><dl class="attributes">
dino@11 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>
dino@11 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>
dino@11 4599 element.
dino@11 4600 </div></dd>
dino@11 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>
dino@11 4602 Corresponds to attribute <a href="#feSpecularLightingSurfaceScaleAttribute"><span class="attr-name">‘surfaceScale’</span></a> on the given
dino@11 4603 <a href="#feSpecularLightingElement"><span class="element-name">‘feSpecularLighting’</span></a> element.
dino@11 4604 </div></dd>
dino@11 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>
dino@11 4606 Corresponds to attribute <a href="#feSpecularLightingSpecularConstantAttribute"><span class="attr-name">‘specularConstant’</span></a> on the given
dino@11 4607 <a href="#feSpecularLightingElement"><span class="element-name">‘feSpecularLighting’</span></a> element.
dino@11 4608 </div></dd>
dino@11 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>
dino@11 4610 Corresponds to attribute <a href="#feSpecularLightingSpecularExponentAttribute"><span class="attr-name">‘specularExponent’</span></a> on the given
dino@11 4611 <a href="#feSpecularLightingElement"><span class="element-name">‘feSpecularLighting’</span></a> element.
dino@11 4612 </div></dd>
dino@11 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>
dino@11 4614 Corresponds to attribute <a href="#feSpecularLightingKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a> on the given
dino@11 4615 <a href="#feSpecularLightingElement"><span class="element-name">‘feSpecularLighting’</span></a> element.
dino@11 4616 </div></dd>
dino@11 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>
dino@11 4618 Corresponds to attribute <a href="#feSpecularLightingKernelUnitLengthAttribute"><span class="attr-name">‘kernelUnitLength’</span></a> on the given
dino@11 4619 <a href="#feSpecularLightingElement"><span class="element-name">‘feSpecularLighting’</span></a> element.
dino@11 4620 </div></dd></dl></dd></dl>
dino@11 4621
dino@11 4622
dino@33 4623 <h3 id="InterfaceSVGFETileElement">33.27 Interface SVGFETileElement</h3>
dino@11 4624
dino@11 4625
dino@11 4626
dino@11 4627 The <a class="idlinterface" href="#InterfaceSVGFETileElement">SVGFETileElement</a> interface corresponds to the
dino@11 4628 <a href="#feTileElement"><span class="element-name">‘feTile’</span></a> element.
dino@11 4629 <pre class="idl">interface <b>SVGFETileElement</b> : ::svg::SVGElement,
dino@11 4630 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
dino@11 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>;
dino@11 4632 };</pre><dl class="interface"><dt>Attributes:</dt><dd><dl class="attributes">
dino@11 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>
dino@11 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>
dino@11 4635 element.
dino@11 4636 </div></dd></dl></dd></dl>
dino@11 4637
dino@11 4638
dino@33 4639 <h3 id="InterfaceSVGFETurbulenceElement">33.28 Interface SVGFETurbulenceElement</h3>
dino@11 4640
dino@11 4641
dino@11 4642
dino@11 4643 The <a class="idlinterface" href="#InterfaceSVGFETurbulenceElement">SVGFETurbulenceElement</a> interface corresponds to the
dino@11 4644 <a href="#feTurbulenceElement"><span class="element-name">‘feTurbulence’</span></a> element.
dino@11 4645 <pre class="idl">interface <b>SVGFETurbulenceElement</b> : ::svg::SVGElement,
dino@11 4646 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
dino@11 4647
dino@11 4648 // Turbulence Types
dino@11 4649 const unsigned short <a href="#__svg__SVGFETurbulenceElement__SVG_TURBULENCE_TYPE_UNKNOWN">SVG_TURBULENCE_TYPE_UNKNOWN</a> = 0;
dino@11 4650 const unsigned short <a href="#__svg__SVGFETurbulenceElement__SVG_TURBULENCE_TYPE_FRACTALNOISE">SVG_TURBULENCE_TYPE_FRACTALNOISE</a> = 1;
dino@11 4651 const unsigned short <a href="#__svg__SVGFETurbulenceElement__SVG_TURBULENCE_TYPE_TURBULENCE">SVG_TURBULENCE_TYPE_TURBULENCE</a> = 2;
dino@11 4652
dino@11 4653 // Stitch Options
dino@11 4654 const unsigned short <a href="#__svg__SVGFETurbulenceElement__SVG_STITCHTYPE_UNKNOWN">SVG_STITCHTYPE_UNKNOWN</a> = 0;
dino@11 4655 const unsigned short <a href="#__svg__SVGFETurbulenceElement__SVG_STITCHTYPE_STITCH">SVG_STITCHTYPE_STITCH</a> = 1;
dino@11 4656 const unsigned short <a href="#__svg__SVGFETurbulenceElement__SVG_STITCHTYPE_NOSTITCH">SVG_STITCHTYPE_NOSTITCH</a> = 2;
dino@11 4657
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 4664 };</pre><dl class="interface"><dt>Constants in group “Turbulence Types”:</dt><dd><dl class="constants">
dino@11 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>
dino@11 4666 The type is not one of predefined types. It is invalid to attempt to
dino@11 4667 define a new value of this type or to attempt to switch an existing
dino@11 4668 value to this type.
dino@11 4669
dino@11 4670 </div></dd>
dino@11 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>
dino@11 4672 Corresponds to value <span class="attr-value">'fractalNoise'</span>.
dino@11 4673
dino@11 4674 </div></dd>
dino@11 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>
dino@11 4676 Corresponds to value <span class="attr-value">'turbulence'</span>.
dino@11 4677
dino@11 4678 </div></dd></dl></dd><dt>Constants in group “Stitch Options”:</dt><dd><dl class="constants">
dino@11 4679 <dt id="__svg__SVGFETurbulenceElement__SVG_STITCHTYPE_UNKNOWN"><b>SVG_STITCHTYPE_UNKNOWN</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
dino@11 4680 The type is not one of predefined types. It is invalid to attempt to
dino@11 4681 define a new value of this type or to attempt to switch an existing
dino@11 4682 value to this type.
dino@11 4683
dino@11 4684 </div></dd>
dino@11 4685 <dt id="__svg__SVGFETurbulenceElement__SVG_STITCHTYPE_STITCH"><b>SVG_STITCHTYPE_STITCH</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
dino@11 4686 Corresponds to value <span class="attr-value">'stitch'</span>.
dino@11 4687
dino@11 4688 </div></dd>
dino@11 4689 <dt id="__svg__SVGFETurbulenceElement__SVG_STITCHTYPE_NOSTITCH"><b>SVG_STITCHTYPE_NOSTITCH</b><span class="idl-type-parenthetical"> (unsigned short)</span></dt><dd><div>
dino@11 4690 Corresponds to value <span class="attr-value">'noStitch'</span>.
dino@11 4691
dino@11 4692 </div></dd></dl></dd><dt>Attributes:</dt><dd><dl class="attributes">
dino@11 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>
dino@11 4694 Corresponds to attribute <a href="#feTurbulenceBaseFrequencyAttribute"><span class="attr-name">‘baseFrequency’</span></a> on the given
dino@11 4695 <a href="#feTurbulenceElement"><span class="element-name">‘feTurbulence’</span></a> element. Contains the X component of the
dino@11 4696 <a href="#feTurbulenceBaseFrequencyAttribute"><span class="attr-name">‘baseFrequency’</span></a> attribute.
dino@11 4697 </div></dd>
dino@11 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>
dino@11 4699 Corresponds to attribute <a href="#feTurbulenceBaseFrequencyAttribute"><span class="attr-name">‘baseFrequency’</span></a> on the given
dino@11 4700 <a href="#feTurbulenceElement"><span class="element-name">‘feTurbulence’</span></a> element. Contains the Y component of the
dino@11 4701 (possibly computed automatically) <a href="#feTurbulenceBaseFrequencyAttribute"><span class="attr-name">‘baseFrequency’</span></a> attribute.
dino@11 4702 </div></dd>
dino@11 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>
dino@11 4704 Corresponds to attribute <a href="#feTurbulenceNumOctavesAttribute"><span class="attr-name">‘numOctaves’</span></a> on the given
dino@11 4705 <a href="#feTurbulenceElement"><span class="element-name">‘feTurbulence’</span></a> element.
dino@11 4706 </div></dd>
dino@11 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>
dino@11 4708 Corresponds to attribute <a href="#feTurbulenceSeedAttribute"><span class="attr-name">‘seed’</span></a> on the given
dino@11 4709 <a href="#feTurbulenceElement"><span class="element-name">‘feTurbulence’</span></a> element.
dino@11 4710 </div></dd>
dino@11 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>
dino@11 4712 Corresponds to attribute <a href="#feTurbulenceStitchTilesAttribute"><span class="attr-name">‘stitchTiles’</span></a> on the given
dino@11 4713 <a href="#feTurbulenceElement"><span class="element-name">‘feTurbulence’</span></a> element. Takes one of the SVG_STITCHTYPE_*
dino@11 4714 constants defined on this interface.
dino@11 4715 </div></dd>
dino@11 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>
dino@11 4717 Corresponds to attribute <a href="#feTurbulenceTypeAttribute"><span class="attr-name">‘type’</span></a> on the given
dino@11 4718 <a href="#feTurbulenceElement"><span class="element-name">‘feTurbulence’</span></a> element. Takes one of the SVG_TURBULENCE_TYPE_*
dino@11 4719 constants defined on this interface.
dino@11 4720 </div></dd></dl></dd></dl>
dino@11 4721
dino@11 4722
dino@33 4723 <h3 id="InterfaceSVGFEDropShadowElement">33.29 Interface SVGFEDropShadowElement</h3>
dino@11 4724
dino@11 4725
dino@11 4726
dino@11 4727 The <a class="idlinterface" href="#InterfaceSVGFEDropShadowElement">SVGFEDropShadowElement</a> interface corresponds to the
dino@11 4728 <a href="#feDropShadowElement"><span class="element-name">‘feDropShadow’</span></a> element.
dino@11 4729 <pre class="idl">interface <b>SVGFEDropShadowElement</b> : ::svg::SVGElement,
dino@11 4730 <a class="idlinterface" href="#InterfaceSVGFilterPrimitiveStandardAttributes">SVGFilterPrimitiveStandardAttributes</a> {
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 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>;
dino@11 4736 };</pre><dl class="interface"><dt>Attributes:</dt><dd><dl class="attributes">
dino@11 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>
dino@11 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>
dino@11 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>
dino@11 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>
dino@11 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>
dino@11 4742
dino@11 4743
dino@33 4744 <h2 id="references1">34 References</h2>
dino@33 4745 <h3 id="normref">34.1 Normative References</h3>
dino@11 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>,
dino@13 4747 Bert Bos, Tantek Çelik, Ian Hickson, Håkon Wium Lie, eds.,
dino@13 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:
dino@11 4749 Namespace-based Validation Dispatching Language — NVDL. ISO/IEC FCD
dino@11 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>
dino@11 4751 </dd><dt id="ref-PORTERDUFF"><strong class="normref">[PORTERDUFF]</strong></dt><dd><strong>Compositing Digital Images</strong>, T. Porter, T. Duff,
dino@11 4752 SIGGRAPH '84 Conference Proceedings, Association for Computing
ed@27 4753 Machinery, Volume 18, Number 3, July 1984. </dd><dt id="ref-SVG-COMPOSITING"><strong class="normref">[SVG-COMPOSITING]</strong></dt><dd>
ed@27 4754 <cite class="w3cwd"><a href="http://www.w3.org/TR/2009/WD-SVGCompositing-20090430/">SVG Compositing Specification</a></cite>,
ed@27 4755 A. Grasso, ed.
ed@27 4756 World Wide Web Consortium, 30 April 2009.
ed@27 4757 <br/>This edition of SVG Compositing is http://www.w3.org/TR/2009/WD-SVGCompositing-20090430/.
ed@27 4758 <br/>The <a href="http://www.w3.org/TR/SVGCompositing/">latest edition of SVG Compositing</a> is available at
ed@27 4759 http://www.w3.org/TR/SVGCompositing/.
ed@27 4760 </dd><dt id="ref-RNG"><strong class="normref">[RelaxNG]</strong></dt><dd><strong>Document Schema Definition Languages (DSDL) — Part 2:
dino@11 4761 Regular grammar- based validation — RELAX NG. ISO/IEC FDIS
dino@11 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>
dino@11 4763 </dd><dt id="ref-Schema2"><strong class="normref">[Schema2]</strong></dt><dd><strong>XML Schema Part 2: Datatypes Second Edition</strong>, P.
dino@11 4764 Biron, A. Malhotra, eds. W3C, 28 October 2004 (Recommendation). Latest
dino@11 4765 version available at <a href="http://www.w3.org/TR/xmlschema-2/">http://www.w3.org/TR/xmlschema-2/</a>.
dino@11 4766 See also <a href="http://www.w3.org/TR/2005/NOTE-xml11schema10-20050511/">Processing
dino@11 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>,
dino@11 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>
dino@11 4769 </dd><dt id="ref-svgt12"><strong class="normref">[SVGT12]</strong></dt><dd><strong>Scalable Vector Graphics (SVG) Tiny 1.2 Specification</strong>,
dino@11 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>
dino@11 4771 </dd></dl>
dino@11 4772
dino@33 4773 <h3 id="informref">34.2 Informative References</h3>
dino@11 4774 <dl><dt id="ref-html5"><strong class="informref">[HTML5]</strong></dt><dd><strong>HTML5</strong>, Ian Hickson editor, Google,
dino@11 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>
dino@11 4776 </dd></dl>
dino@11 4777
dino@33 4778 <h2 id="changes">35 Changes</h2>
dino@11 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>
dino@11 4780 <script src="style/expanders.js" type="text/javascript"> </script></body></html>

mercurial