Wed, 07 Sep 2011 10:26:03 +1000
- 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 <image> 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 <image> 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"><filter-primitive-reference></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"><filter-function></a> [ <a href="#FilterFunction"><filter-function></a> ]* </td></tr><tr valign="baseline"><td><em>Initial:</em> </td><td>none</td></tr><tr valign="baseline"><td><em>Applies to:</em> </td><td>All elements</td></tr><tr valign="baseline"><td><em>Inherited:</em> </td><td>no</td></tr><tr valign="baseline"><td><em>Percentages:</em> </td><td>N/A</td></tr><tr valign="baseline"><td><em>Media:</em> </td><td>visual</td></tr><tr valign="baseline"><td><em>Animatable:</em> </td><td>yes</td></tr></tbody></table> |
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 <filter-functions> |
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"><FuncIRI></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(<shadow>) |
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 <shadow> (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"><number-optional-number></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"><coordinate></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"><coordinate></a></em>"</dt><dd>See <a href="#FilterEffectsRegion"><span class="svg-term">filter effects region</span></a>.</dd><dt id="FilterElementWidthAttribute"><span class="adef">width</span> = |
dino@11 | 502 | "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeLength"><length></a></em>"</dt><dd>See <a href="#FilterEffectsRegion"><span class="svg-term">filter effects region</span></a>.</dd><dt id="FilterElementHeightAttribute"><span class="adef">height</span> = |
ed@14 | 503 | "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeLength"><length></a></em>"</dt><dd>See <a href="#FilterEffectsRegion"><span class="svg-term">filter effects region</span></a>.</dd><dt id="FilterElementFilterResAttribute"><span class="adef">filterRes</span> = "<em><a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumberOptionalNumber"><number-optional-number></a></em>" |
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"><IRI></span>"</dt><dd>An <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermIRIReference"><span class="svg-term">IRI reference</span></a> |
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"><?xml version="1.0" standalone="no"?> |
dino@11 | 725 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" |
dino@11 | 726 | "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> |
dino@11 | 727 | <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"> |
dino@11 | 729 | <title>Example enable-background01</title> |
dino@11 | 730 | <desc>This test case shows five pictures which illustrate the rules |
dino@11 | 731 | for background image processing.</desc> |
dino@11 | 732 | |
dino@11 | 733 | <defs> |
dino@11 | 734 | <filter id="ShiftBGAndBlur" |
dino@11 | 735 | filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="400"> |
dino@11 | 736 | <desc> |
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 | </desc> |
dino@11 | 741 | <feOffset in="BackgroundImage" dx="0" dy="125" /> |
dino@11 | 742 | <feGaussianBlur stdDeviation="8" /> |
dino@11 | 743 | </filter> |
dino@11 | 744 | <filter id="ShiftBGAndBlur_WithSourceGraphic" |
dino@11 | 745 | filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="400"> |
dino@11 | 746 | <desc> |
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 | </desc> |
dino@11 | 750 | <feOffset in="BackgroundImage" dx="0" dy="125" /> |
dino@11 | 751 | <feGaussianBlur stdDeviation="8" result="blur" /> |
dino@11 | 752 | <feMerge> |
dino@11 | 753 | <feMergeNode in="blur"/> |
dino@11 | 754 | <feMergeNode in="SourceGraphic"/> |
dino@11 | 755 | </feMerge> |
dino@11 | 756 | </filter> |
dino@11 | 757 | </defs> |
dino@11 | 758 | |
dino@11 | 759 | <g transform="translate(0,0)"> |
dino@11 | 760 | <desc>The first picture is our reference graphic without filters.</desc> |
dino@11 | 761 | <rect x="25" y="25" width="100" height="100" fill="red"/> |
dino@11 | 762 | <g opacity=".5"> |
dino@11 | 763 | <circle cx="125" cy="75" r="45" fill="green"/> |
dino@11 | 764 | <polygon points="160,25 160,125 240,75" fill="blue"/> |
dino@11 | 765 | </g> |
dino@11 | 766 | <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/> |
dino@11 | 767 | </g> |
dino@11 | 768 | |
dino@11 | 769 | <g enable-background="new" transform="translate(270,0)"> |
dino@11 | 770 | <desc>The second adds an empty 'g' element which invokes ShiftBGAndBlur.</desc> |
dino@11 | 771 | <rect x="25" y="25" width="100" height="100" fill="red"/> |
dino@11 | 772 | <g opacity=".5"> |
dino@11 | 773 | <circle cx="125" cy="75" r="45" fill="green"/> |
dino@11 | 774 | <polygon points="160,25 160,125 240,75" fill="blue"/> |
dino@11 | 775 | </g> |
dino@11 | 776 | <g filter="url(#ShiftBGAndBlur)"/> |
dino@11 | 777 | <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/> |
dino@11 | 778 | </g> |
dino@11 | 779 | |
dino@11 | 780 | <g enable-background="new" transform="translate(540,0)"> |
dino@11 | 781 | <desc>The third invokes ShiftBGAndBlur on the inner group.</desc> |
dino@11 | 782 | <rect x="25" y="25" width="100" height="100" fill="red"/> |
dino@11 | 783 | <g filter="url(#ShiftBGAndBlur)" opacity=".5"> |
dino@11 | 784 | <circle cx="125" cy="75" r="45" fill="green"/> |
dino@11 | 785 | <polygon points="160,25 160,125 240,75" fill="blue"/> |
dino@11 | 786 | </g> |
dino@11 | 787 | <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/> |
dino@11 | 788 | </g> |
dino@11 | 789 | |
dino@11 | 790 | <g enable-background="new" transform="translate(810,0)"> |
dino@11 | 791 | <desc>The fourth invokes ShiftBGAndBlur on the triangle.</desc> |
dino@11 | 792 | <rect x="25" y="25" width="100" height="100" fill="red"/> |
dino@11 | 793 | <g opacity=".5"> |
dino@11 | 794 | <circle cx="125" cy="75" r="45" fill="green"/> |
dino@11 | 795 | <polygon points="160,25 160,125 240,75" fill="blue" |
dino@11 | 796 | filter="url(#ShiftBGAndBlur)"/> |
dino@11 | 797 | </g> |
dino@11 | 798 | <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/> |
dino@11 | 799 | </g> |
dino@11 | 800 | |
dino@11 | 801 | <g enable-background="new" transform="translate(1080,0)"> |
dino@11 | 802 | <desc>The fifth invokes ShiftBGAndBlur_WithSourceGraphic on the triangle.</desc> |
dino@11 | 803 | <rect x="25" y="25" width="100" height="100" fill="red"/> |
dino@11 | 804 | <g opacity=".5"> |
dino@11 | 805 | <circle cx="125" cy="75" r="45" fill="green"/> |
dino@11 | 806 | <polygon points="160,25 160,125 240,75" fill="blue" |
dino@11 | 807 | filter="url(#ShiftBGAndBlur_WithSourceGraphic)"/> |
dino@11 | 808 | </g> |
dino@11 | 809 | <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/> |
dino@11 | 810 | </g> |
dino@11 | 811 | </svg></pre><table summary="Example "><caption align="bottom">Example </caption><tr><td><img alt="Example " src="examples/enable-background-01.png"/></td></tr></table><p class="view-as-svg"><a href="examples/enable-background-01.svg">View this example as SVG (SVG-enabled browsers only)</a></p> |
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"><coordinate></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"><coordinate></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"><length></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"><length></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"><filter-primitive-reference></a></em>"</dt><dd><p>Assigned name for this <a href="#TermFilterPrimitiveElement"><span class="svg-term">filter primitive</span></a>. If supplied, then graphics |
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"><filter-primitive-reference></a> is not an XML |
dino@11 | 930 | ID; instead, a <a href="#TermFilterPrimitiveReference"><filter-primitive-reference></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"><filter-primitive-reference></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"><filter-primitive-reference></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"><filter-primitive-reference></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"><svg width="400" height="400" xmlns="http://www.w3.org/2000/svg"> |
dino@11 | 1061 | <defs> |
dino@11 | 1062 | <filter id="flood" x="0" y="0" width="100%" height="100%" primitiveUnits="objectBoundingBox"> |
dino@11 | 1063 | <feFlood x="25%" y="25%" width="50%" height="50%" |
dino@11 | 1064 | flood-color="green" flood-opacity="0.75"/> |
dino@11 | 1065 | </filter> |
dino@11 | 1066 | <filter id="blend" primitiveUnits="objectBoundingBox"> |
dino@11 | 1067 | <feBlend x="25%" y="25%" width="50%" height="50%" |
dino@11 | 1068 | in2="SourceGraphic" mode="multiply"/> |
dino@11 | 1069 | </filter> |
dino@11 | 1070 | <filter id="merge" primitiveUnits="objectBoundingBox"> |
dino@11 | 1071 | <feMerge x="25%" y="25%" width="50%" height="50%"> |
dino@11 | 1072 | <feMergeNode in="SourceGraphic"/> |
dino@11 | 1073 | <feMergeNode in="FillPaint"/> |
dino@11 | 1074 | </feMerge> |
dino@11 | 1075 | </filter> |
dino@11 | 1076 | </defs> |
dino@11 | 1077 | |
dino@11 | 1078 | <g fill="none" stroke="blue" stroke-width="4"> |
dino@11 | 1079 | <rect width="200" height="200"/> |
dino@11 | 1080 | <line x2="200" y2="200"/> |
dino@11 | 1081 | <line x1="200" y2="200"/> |
dino@11 | 1082 | </g> |
dino@11 | 1083 | <circle fill="green" filter="url(#flood)" cx="100" cy="100" r="90"/> |
dino@11 | 1084 | |
dino@11 | 1085 | <g transform="translate(200 0)"> |
dino@11 | 1086 | <g fill="none" stroke="blue" stroke-width="4"> |
dino@11 | 1087 | <rect width="200" height="200"/> |
dino@11 | 1088 | <line x2="200" y2="200"/> |
dino@11 | 1089 | <line x1="200" y2="200"/> |
dino@11 | 1090 | </g> |
dino@11 | 1091 | <circle fill="green" filter="url(#blend)" cx="100" cy="100" r="90"/> |
dino@11 | 1092 | </g> |
dino@11 | 1093 | |
dino@11 | 1094 | <g transform="translate(0 200)"> |
dino@11 | 1095 | <g fill="none" stroke="blue" stroke-width="4"> |
dino@11 | 1096 | <rect width="200" height="200"/> |
dino@11 | 1097 | <line x2="200" y2="200"/> |
dino@11 | 1098 | <line x1="200" y2="200"/> |
dino@11 | 1099 | </g> |
dino@11 | 1100 | <circle fill="green" fill-opacity="0.5" filter="url(#merge)" cx="100" cy="100" r="90"/> |
dino@11 | 1101 | </g> |
dino@11 | 1102 | </svg></pre><table summary="Example "><caption align="bottom">Example </caption><tr><td><img alt="Example " src="examples/filtersubregion00.png"/></td></tr></table><p class="view-as-svg"><a href="examples/filtersubregion00.svg">View this example as SVG (SVG-enabled browsers only)</a></p> |
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"><number></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"><number></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"><number></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"><number></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"><number></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"><number></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"><number></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"><number></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"><number></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"><number></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"><number></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"><number></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"><number></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"><color></a> |
dino@11 | 1237 | [<a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeICCColor"><icccolor></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"><?xml version="1.0"?> |
dino@11 | 1289 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" |
dino@11 | 1290 | "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> |
dino@11 | 1291 | <svg width="5cm" height="5cm" viewBox="0 0 500 500" |
dino@11 | 1292 | xmlns="http://www.w3.org/2000/svg" version="1.1"> |
dino@11 | 1293 | <title>Example feBlend - Examples of feBlend modes</title> |
dino@11 | 1294 | <desc>Five text strings blended into a gradient, |
dino@11 | 1295 | with one text string for each of the five feBlend modes.</desc> |
dino@11 | 1296 | <defs> |
dino@11 | 1297 | <linearGradient id="MyGradient" gradientUnits="userSpaceOnUse" |
dino@11 | 1298 | x1="100" y1="0" x2="300" y2="0"> |
dino@11 | 1299 | <stop offset="0" stop-color="#000000" /> |
dino@11 | 1300 | <stop offset=".33" stop-color="#ffffff" /> |
dino@11 | 1301 | <stop offset=".67" stop-color="#ff0000" /> |
dino@11 | 1302 | <stop offset="1" stop-color="#808080" /> |
dino@11 | 1303 | </linearGradient> |
dino@11 | 1304 | <filter id="Normal"> |
dino@11 | 1305 | <feBlend mode="normal" in2="BackgroundImage" in="SourceGraphic"/> |
dino@11 | 1306 | </filter> |
dino@11 | 1307 | <filter id="Multiply"> |
dino@11 | 1308 | <feBlend mode="multiply" in2="BackgroundImage" in="SourceGraphic"/> |
dino@11 | 1309 | </filter> |
dino@11 | 1310 | <filter id="Screen"> |
dino@11 | 1311 | <feBlend mode="screen" in2="BackgroundImage" in="SourceGraphic"/> |
dino@11 | 1312 | </filter> |
dino@11 | 1313 | <filter id="Darken"> |
dino@11 | 1314 | <feBlend mode="darken" in2="BackgroundImage" in="SourceGraphic"/> |
dino@11 | 1315 | </filter> |
dino@11 | 1316 | <filter id="Lighten"> |
dino@11 | 1317 | <feBlend mode="lighten" in2="BackgroundImage" in="SourceGraphic"/> |
dino@11 | 1318 | </filter> |
dino@11 | 1319 | </defs> |
dino@11 | 1320 | <rect fill="none" stroke="blue" |
dino@11 | 1321 | x="1" y="1" width="498" height="498"/> |
dino@11 | 1322 | <g enable-background="new" > |
dino@11 | 1323 | <rect x="100" y="20" width="300" height="460" fill="url(#MyGradient)" /> |
dino@11 | 1324 | <g font-family="Verdana" font-size="75" fill="#888888" fill-opacity=".6" > |
dino@11 | 1325 | <text x="50" y="90" filter="url(#Normal)" >Normal</text> |
dino@11 | 1326 | <text x="50" y="180" filter="url(#Multiply)" >Multiply</text> |
dino@11 | 1327 | <text x="50" y="270" filter="url(#Screen)" >Screen</text> |
dino@11 | 1328 | <text x="50" y="360" filter="url(#Darken)" >Darken</text> |
dino@11 | 1329 | <text x="50" y="450" filter="url(#Lighten)" >Lighten</text> |
dino@11 | 1330 | </g> |
dino@11 | 1331 | </g> |
dino@11 | 1332 | </svg></pre><table summary="Example "><caption align="bottom">Example </caption><tr><td><img alt="Example " src="examples/feBlend.png"/></td></tr></table><p class="view-as-svg"><a href="examples/feBlend.svg">View this example as SVG (SVG-enabled browsers only)</a></p> |
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"><number></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"><?xml version="1.0"?> |
dino@11 | 1448 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" |
dino@11 | 1449 | "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> |
dino@11 | 1450 | <svg width="8cm" height="5cm" viewBox="0 0 800 500" |
dino@11 | 1451 | xmlns="http://www.w3.org/2000/svg" version="1.1"> |
dino@11 | 1452 | <title>Example feColorMatrix - Examples of feColorMatrix operations</title> |
dino@11 | 1453 | <desc>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.</desc> |
dino@11 | 1459 | <defs> |
dino@11 | 1460 | <linearGradient id="MyGradient" gradientUnits="userSpaceOnUse" |
dino@11 | 1461 | x1="100" y1="0" x2="500" y2="0"> |
dino@11 | 1462 | <stop offset="0" stop-color="#ff00ff" /> |
dino@11 | 1463 | <stop offset=".33" stop-color="#88ff88" /> |
dino@11 | 1464 | <stop offset=".67" stop-color="#2020ff" /> |
dino@11 | 1465 | <stop offset="1" stop-color="#d00000" /> |
dino@11 | 1466 | </linearGradient> |
dino@11 | 1467 | <filter id="Matrix" filterUnits="objectBoundingBox" |
dino@11 | 1468 | x="0%" y="0%" width="100%" height="100%"> |
dino@11 | 1469 | <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"/> |
dino@11 | 1474 | </filter> |
dino@11 | 1475 | <filter id="Saturate40" filterUnits="objectBoundingBox" |
dino@11 | 1476 | x="0%" y="0%" width="100%" height="100%"> |
dino@11 | 1477 | <feColorMatrix type="saturate" in="SourceGraphic" values="0.4"/> |
dino@11 | 1478 | </filter> |
dino@11 | 1479 | <filter id="HueRotate90" filterUnits="objectBoundingBox" |
dino@11 | 1480 | x="0%" y="0%" width="100%" height="100%"> |
dino@11 | 1481 | <feColorMatrix type="hueRotate" in="SourceGraphic" values="90"/> |
dino@11 | 1482 | </filter> |
dino@11 | 1483 | <filter id="LuminanceToAlpha" filterUnits="objectBoundingBox" |
dino@11 | 1484 | x="0%" y="0%" width="100%" height="100%"> |
dino@11 | 1485 | <feColorMatrix type="luminanceToAlpha" in="SourceGraphic" result="a"/> |
dino@11 | 1486 | <feComposite in="SourceGraphic" in2="a" operator="in" /> |
dino@11 | 1487 | </filter> |
dino@11 | 1488 | </defs> |
dino@11 | 1489 | <rect fill="none" stroke="blue" |
dino@11 | 1490 | x="1" y="1" width="798" height="498"/> |
dino@11 | 1491 | <g font-family="Verdana" font-size="75" |
dino@11 | 1492 | font-weight="bold" fill="url(#MyGradient)" > |
dino@11 | 1493 | <rect x="100" y="0" width="500" height="20" /> |
dino@11 | 1494 | <text x="100" y="90">Unfiltered</text> |
dino@11 | 1495 | <text x="100" y="190" filter="url(#Matrix)" >Matrix</text> |
dino@11 | 1496 | <text x="100" y="290" filter="url(#Saturate40)" >Saturate</text> |
dino@11 | 1497 | <text x="100" y="390" filter="url(#HueRotate90)" >HueRotate</text> |
dino@11 | 1498 | <text x="100" y="490" filter="url(#LuminanceToAlpha)" >Luminance</text> |
dino@11 | 1499 | </g> |
dino@11 | 1500 | </svg></pre><table summary="Example "><caption align="bottom">Example </caption><tr><td><img alt="Example " src="examples/feColorMatrix.png"/></td></tr></table><p class="view-as-svg"><a href="examples/feColorMatrix.svg">View this example as SVG (SVG-enabled browsers only)</a></p> |
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 < 1</code> find <code>k</code> such that:</p> |
ed@24 | 1578 | <p class="filterformula">k/n <= C < (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 < 1</code> find <code>k</code> such that:</p> |
ed@24 | 1592 | <p class="filterformula">k/n <= C < (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 <= C < (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"><number></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"><number></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"><number></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"><number></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"><number></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"><number></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"><number></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"><?xml version="1.0"?> |
dino@11 | 1634 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" |
dino@11 | 1635 | "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> |
dino@11 | 1636 | <svg width="8cm" height="4cm" viewBox="0 0 800 400" |
dino@11 | 1637 | xmlns="http://www.w3.org/2000/svg" version="1.1"> |
dino@11 | 1638 | <title>Example feComponentTransfer - Examples of feComponentTransfer operations</title> |
dino@11 | 1639 | <desc>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.</desc> |
dino@11 | 1644 | <defs> |
dino@11 | 1645 | <linearGradient id="MyGradient" gradientUnits="userSpaceOnUse" |
dino@11 | 1646 | x1="100" y1="0" x2="600" y2="0"> |
dino@11 | 1647 | <stop offset="0" stop-color="#ff0000" /> |
dino@11 | 1648 | <stop offset=".33" stop-color="#00ff00" /> |
dino@11 | 1649 | <stop offset=".67" stop-color="#0000ff" /> |
dino@11 | 1650 | <stop offset="1" stop-color="#000000" /> |
dino@11 | 1651 | </linearGradient> |
dino@11 | 1652 | <filter id="Identity" filterUnits="objectBoundingBox" |
dino@11 | 1653 | x="0%" y="0%" width="100%" height="100%"> |
dino@11 | 1654 | <feComponentTransfer> |
dino@11 | 1655 | <feFuncR type="identity"/> |
dino@11 | 1656 | <feFuncG type="identity"/> |
dino@11 | 1657 | <feFuncB type="identity"/> |
dino@11 | 1658 | <feFuncA type="identity"/> |
dino@11 | 1659 | </feComponentTransfer> |
dino@11 | 1660 | </filter> |
dino@11 | 1661 | <filter id="Table" filterUnits="objectBoundingBox" |
dino@11 | 1662 | x="0%" y="0%" width="100%" height="100%"> |
dino@11 | 1663 | <feComponentTransfer> |
dino@11 | 1664 | <feFuncR type="table" tableValues="0 0 1 1"/> |
dino@11 | 1665 | <feFuncG type="table" tableValues="1 1 0 0"/> |
dino@11 | 1666 | <feFuncB type="table" tableValues="0 1 1 0"/> |
dino@11 | 1667 | </feComponentTransfer> |
dino@11 | 1668 | </filter> |
dino@11 | 1669 | <filter id="Linear" filterUnits="objectBoundingBox" |
dino@11 | 1670 | x="0%" y="0%" width="100%" height="100%"> |
dino@11 | 1671 | <feComponentTransfer> |
dino@11 | 1672 | <feFuncR type="linear" slope=".5" intercept=".25"/> |
dino@11 | 1673 | <feFuncG type="linear" slope=".5" intercept="0"/> |
dino@11 | 1674 | <feFuncB type="linear" slope=".5" intercept=".5"/> |
dino@11 | 1675 | </feComponentTransfer> |
dino@11 | 1676 | </filter> |
dino@11 | 1677 | <filter id="Gamma" filterUnits="objectBoundingBox" |
dino@11 | 1678 | x="0%" y="0%" width="100%" height="100%"> |
dino@11 | 1679 | <feComponentTransfer> |
dino@11 | 1680 | <feFuncR type="gamma" amplitude="2" exponent="5" offset="0"/> |
dino@11 | 1681 | <feFuncG type="gamma" amplitude="2" exponent="3" offset="0"/> |
dino@11 | 1682 | <feFuncB type="gamma" amplitude="2" exponent="1" offset="0"/> |
dino@11 | 1683 | </feComponentTransfer> |
dino@11 | 1684 | </filter> |
dino@11 | 1685 | </defs> |
dino@11 | 1686 | <rect fill="none" stroke="blue" |
dino@11 | 1687 | x="1" y="1" width="798" height="398"/> |
dino@11 | 1688 | <g font-family="Verdana" font-size="75" |
dino@11 | 1689 | font-weight="bold" fill="url(#MyGradient)" > |
dino@11 | 1690 | <rect x="100" y="0" width="600" height="20" /> |
dino@11 | 1691 | <text x="100" y="90">Identity</text> |
dino@11 | 1692 | <text x="100" y="190" filter="url(#Table)" >TableLookup</text> |
dino@11 | 1693 | <text x="100" y="290" filter="url(#Linear)" >LinearFunc</text> |
dino@11 | 1694 | <text x="100" y="390" filter="url(#Gamma)" >GammaFunc</text> |
dino@11 | 1695 | </g> |
dino@11 | 1696 | </svg></pre><table summary="Example "><caption align="bottom">Example </caption><tr><td><img alt="Example " src="examples/feComponentTransfer.png"/></td></tr></table><p class="view-as-svg"><a href="examples/feComponentTransfer.svg">View this example as SVG (SVG-enabled browsers only)</a></p> |
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"><number></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"><number></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"><number></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"><number></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"><?xml version="1.0"?> |
dino@11 | 1749 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" |
dino@11 | 1750 | "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> |
dino@11 | 1751 | <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"> |
dino@11 | 1753 | <title>Example feComposite - Examples of feComposite operations</title> |
dino@11 | 1754 | <desc>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.</desc> |
dino@11 | 1757 | <defs> |
dino@11 | 1758 | <desc>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").</desc> |
dino@11 | 1763 | <filter id="overFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> |
dino@11 | 1764 | <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/> |
dino@11 | 1765 | <feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/> |
dino@11 | 1766 | <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge> |
dino@11 | 1767 | </filter> |
dino@11 | 1768 | <filter id="inFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> |
dino@11 | 1769 | <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/> |
dino@11 | 1770 | <feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/> |
dino@11 | 1771 | <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge> |
dino@11 | 1772 | </filter> |
dino@11 | 1773 | <filter id="outFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> |
dino@11 | 1774 | <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/> |
dino@11 | 1775 | <feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/> |
dino@11 | 1776 | <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge> |
dino@11 | 1777 | </filter> |
dino@11 | 1778 | <filter id="atopFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> |
dino@11 | 1779 | <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/> |
dino@11 | 1780 | <feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/> |
dino@11 | 1781 | <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge> |
dino@11 | 1782 | </filter> |
dino@11 | 1783 | <filter id="xorFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> |
dino@11 | 1784 | <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/> |
dino@11 | 1785 | <feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/> |
dino@11 | 1786 | <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge> |
dino@11 | 1787 | </filter> |
dino@11 | 1788 | <filter id="arithmeticFlood" filterUnits="objectBoundingBox" |
dino@11 | 1789 | x="-5%" y="-5%" width="110%" height="110%"> |
dino@11 | 1790 | <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/> |
dino@11 | 1791 | <feComposite in="SourceGraphic" in2="BackgroundImage" result="comp" |
dino@11 | 1792 | operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/> |
dino@11 | 1793 | <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge> |
dino@11 | 1794 | </filter> |
dino@11 | 1795 | <filter id="overNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> |
dino@11 | 1796 | <feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/> |
dino@11 | 1797 | </filter> |
dino@11 | 1798 | <filter id="inNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> |
dino@11 | 1799 | <feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/> |
dino@11 | 1800 | </filter> |
dino@11 | 1801 | <filter id="outNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> |
dino@11 | 1802 | <feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/> |
dino@11 | 1803 | </filter> |
dino@11 | 1804 | <filter id="atopNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> |
dino@11 | 1805 | <feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/> |
dino@11 | 1806 | </filter> |
dino@11 | 1807 | <filter id="xorNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%"> |
dino@11 | 1808 | <feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/> |
dino@11 | 1809 | </filter> |
dino@11 | 1810 | <filter id="arithmeticNoFlood" filterUnits="objectBoundingBox" |
dino@11 | 1811 | x="-5%" y="-5%" width="110%" height="110%"> |
dino@11 | 1812 | <feComposite in="SourceGraphic" in2="BackgroundImage" result="comp" |
dino@11 | 1813 | operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/> |
dino@11 | 1814 | </filter> |
dino@11 | 1815 | <path id="Blue100" d="M 0 0 L 100 0 L 100 100 z" fill="#00ffff" /> |
dino@11 | 1816 | <path id="Red100" d="M 0 0 L 0 100 L 100 0 z" fill="#ff00ff" /> |
dino@11 | 1817 | <path id="Blue50" d="M 0 125 L 100 125 L 100 225 z" fill="#00ffff" fill-opacity=".5" /> |
dino@11 | 1818 | <path id="Red50" d="M 0 125 L 0 225 L 100 125 z" fill="#ff00ff" fill-opacity=".5" /> |
dino@11 | 1819 | <g id="TwoBlueTriangles"> |
dino@11 | 1820 | <use xlink:href="#Blue100"/> |
dino@11 | 1821 | <use xlink:href="#Blue50"/> |
dino@11 | 1822 | </g> |
dino@11 | 1823 | <g id="BlueTriangles"> |
dino@11 | 1824 | <use transform="translate(275,25)" xlink:href="#TwoBlueTriangles"/> |
dino@11 | 1825 | <use transform="translate(400,25)" xlink:href="#TwoBlueTriangles"/> |
dino@11 | 1826 | <use transform="translate(525,25)" xlink:href="#TwoBlueTriangles"/> |
dino@11 | 1827 | <use transform="translate(650,25)" xlink:href="#TwoBlueTriangles"/> |
dino@11 | 1828 | <use transform="translate(775,25)" xlink:href="#TwoBlueTriangles"/> |
dino@11 | 1829 | <use transform="translate(900,25)" xlink:href="#TwoBlueTriangles"/> |
dino@11 | 1830 | </g> |
dino@11 | 1831 | </defs> |
dino@11 | 1832 | |
dino@11 | 1833 | <rect fill="none" stroke="blue" x="1" y="1" width="1098" height="648"/> |
dino@11 | 1834 | <g font-family="Verdana" font-size="40" shape-rendering="crispEdges"> |
dino@11 | 1835 | <desc>Render the examples using the filters that draw on top of |
dino@11 | 1836 | an opaque white surface, thus obliterating the background.</desc> |
dino@11 | 1837 | <g enable-background="new"> |
dino@11 | 1838 | <text x="15" y="75">opacity 1.0</text> |
dino@11 | 1839 | <text x="15" y="115" font-size="27">(with feFlood)</text> |
dino@11 | 1840 | <text x="15" y="200">opacity 0.5</text> |
dino@11 | 1841 | <text x="15" y="240" font-size="27">(with feFlood)</text> |
dino@11 | 1842 | <use xlink:href="#BlueTriangles"/> |
dino@11 | 1843 | <g transform="translate(275,25)"> |
dino@11 | 1844 | <use xlink:href="#Red100" filter="url(#overFlood)" /> |
dino@11 | 1845 | <use xlink:href="#Red50" filter="url(#overFlood)" /> |
dino@11 | 1846 | <text x="5" y="275">over</text> |
dino@11 | 1847 | </g> |
dino@11 | 1848 | <g transform="translate(400,25)"> |
dino@11 | 1849 | <use xlink:href="#Red100" filter="url(#inFlood)" /> |
dino@11 | 1850 | <use xlink:href="#Red50" filter="url(#inFlood)" /> |
dino@11 | 1851 | <text x="35" y="275">in</text> |
dino@11 | 1852 | </g> |
dino@11 | 1853 | <g transform="translate(525,25)"> |
dino@11 | 1854 | <use xlink:href="#Red100" filter="url(#outFlood)" /> |
dino@11 | 1855 | <use xlink:href="#Red50" filter="url(#outFlood)" /> |
dino@11 | 1856 | <text x="15" y="275">out</text> |
dino@11 | 1857 | </g> |
dino@11 | 1858 | <g transform="translate(650,25)"> |
dino@11 | 1859 | <use xlink:href="#Red100" filter="url(#atopFlood)" /> |
dino@11 | 1860 | <use xlink:href="#Red50" filter="url(#atopFlood)" /> |
dino@11 | 1861 | <text x="10" y="275">atop</text> |
dino@11 | 1862 | </g> |
dino@11 | 1863 | <g transform="translate(775,25)"> |
dino@11 | 1864 | <use xlink:href="#Red100" filter="url(#xorFlood)" /> |
dino@11 | 1865 | <use xlink:href="#Red50" filter="url(#xorFlood)" /> |
dino@11 | 1866 | <text x="15" y="275">xor</text> |
dino@11 | 1867 | </g> |
dino@11 | 1868 | <g transform="translate(900,25)"> |
dino@11 | 1869 | <use xlink:href="#Red100" filter="url(#arithmeticFlood)" /> |
dino@11 | 1870 | <use xlink:href="#Red50" filter="url(#arithmeticFlood)" /> |
dino@11 | 1871 | <text x="-25" y="275">arithmetic</text> |
dino@11 | 1872 | </g> |
dino@11 | 1873 | </g> |
dino@11 | 1874 | <g transform="translate(0,325)" enable-background="new"> |
dino@11 | 1875 | <desc>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").</desc> |
dino@11 | 1879 | <text x="15" y="75">opacity 1.0</text> |
dino@11 | 1880 | <text x="15" y="115" font-size="27">(without feFlood)</text> |
dino@11 | 1881 | <text x="15" y="200">opacity 0.5</text> |
dino@11 | 1882 | <text x="15" y="240" font-size="27">(without feFlood)</text> |
dino@11 | 1883 | <use xlink:href="#BlueTriangles"/> |
dino@11 | 1884 | <g transform="translate(275,25)"> |
dino@11 | 1885 | <use xlink:href="#Red100" filter="url(#overNoFlood)" /> |
dino@11 | 1886 | <use xlink:href="#Red50" filter="url(#overNoFlood)" /> |
dino@11 | 1887 | <text x="5" y="275">over</text> |
dino@11 | 1888 | </g> |
dino@11 | 1889 | <g transform="translate(400,25)"> |
dino@11 | 1890 | <use xlink:href="#Red100" filter="url(#inNoFlood)" /> |
dino@11 | 1891 | <use xlink:href="#Red50" filter="url(#inNoFlood)" /> |
dino@11 | 1892 | <text x="35" y="275">in</text> |
dino@11 | 1893 | </g> |
dino@11 | 1894 | <g transform="translate(525,25)"> |
dino@11 | 1895 | <use xlink:href="#Red100" filter="url(#outNoFlood)" /> |
dino@11 | 1896 | <use xlink:href="#Red50" filter="url(#outNoFlood)" /> |
dino@11 | 1897 | <text x="15" y="275">out</text> |
dino@11 | 1898 | </g> |
dino@11 | 1899 | <g transform="translate(650,25)"> |
dino@11 | 1900 | <use xlink:href="#Red100" filter="url(#atopNoFlood)" /> |
dino@11 | 1901 | <use xlink:href="#Red50" filter="url(#atopNoFlood)" /> |
dino@11 | 1902 | <text x="10" y="275">atop</text> |
dino@11 | 1903 | </g> |
dino@11 | 1904 | <g transform="translate(775,25)"> |
dino@11 | 1905 | <use xlink:href="#Red100" filter="url(#xorNoFlood)" /> |
dino@11 | 1906 | <use xlink:href="#Red50" filter="url(#xorNoFlood)" /> |
dino@11 | 1907 | <text x="15" y="275">xor</text> |
dino@11 | 1908 | </g> |
dino@11 | 1909 | <g transform="translate(900,25)"> |
dino@11 | 1910 | <use xlink:href="#Red100" filter="url(#arithmeticNoFlood)" /> |
dino@11 | 1911 | <use xlink:href="#Red50" filter="url(#arithmeticNoFlood)" /> |
dino@11 | 1912 | <text x="-25" y="275">arithmetic</text> |
dino@11 | 1913 | </g> |
dino@11 | 1914 | </g> |
dino@11 | 1915 | </g> |
dino@11 | 1916 | </svg></pre><table summary="Example "><caption align="bottom">Example </caption><tr><td><img alt="Example " src="examples/feComposite.png"/></td></tr></table><p class="view-as-svg"><a href="examples/feComposite.svg">View this example as SVG (SVG-enabled browsers only)</a></p> |
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"><number-optional-number></a></span>"</dt><dd>Indicates the number of cells in each dimension for <a href="#feConvolveMatrixElementKernelMatrixAttribute"><span class="attr-name">‘kernelMatrix’</span></a>. The values provided must be |
dino@11 | 2021 | <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeInteger"><integer></a> |
dino@11 | 2022 | s greater than zero. The first number, <orderX>, indicates the |
dino@11 | 2023 | number of columns in the matrix. The second number, <orderY>, |
dino@11 | 2024 | indicates the number of rows in the matrix. If <orderY> is not |
dino@11 | 2025 | provided, it defaults to <orderX>.<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"><list of |
dino@11 | 2033 | numbers></span>"</dt><dd>The list of <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></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 <orderX> times <orderY>.<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"><number></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"><number></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"><integer></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 <= |
dino@11 | 2054 | targetX < 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"><integer></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 <= targetY < |
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"><number-optional-number></a></span>"</dt><dd>The first number is the <dx> value. The second number is the |
dino@11 | 2108 | <dy> value. If the <dy> value is not specified, it defaults |
dino@11 | 2109 | to the same value as <dx>. 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 < 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"><number></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"><number></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"><number-optional-number></a></span>"</dt><dd>The first number is the <dx> value. The second number is the |
dino@11 | 2441 | <dy> value. If the <dy> value is not specified, it defaults |
dino@11 | 2442 | to the same value as <dx>. 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"><number></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 <paint> 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"><color></a> |
dino@11 | 2556 | [<a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeICCColor"><icccolor></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><opacity-value> | <a class="noxref" href="http://www.w3.org/TR/2009/CR-CSS2-20090423/cascade.html#value-def-inherit"><span class="value-inst-inherit noxref">inherit</span></a></td></tr><tr valign="baseline"><td><em>Initial:</em> </td><td>1</td></tr><tr valign="baseline"><td><em>Applies to:</em> </td><td><a href="#feFloodElement"><span class="element-name">‘feFlood’</span></a> and <a href="#feDropShadowElement"><span class="element-name">‘feDropShadow’</span></a> elements</td></tr><tr valign="baseline"><td><em>Inherited:</em> </td><td>no</td></tr><tr valign="baseline"><td><em>Percentages:</em> </td><td>N/A</td></tr><tr valign="baseline"><td><em>Media:</em> </td><td>visual</td></tr><tr valign="baseline"><td><em>Animatable:</em> </td><td>yes</td></tr></tbody></table> |
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 >= 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"><number-optional-number></a></em>"</dt><dd>The standard deviation for the blur operation. If two <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a> |
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"><IRI></span>"</dt><dd>An <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/intro.html#TermIRIReference"><span class="svg-term">IRI reference</span></a> |
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] <align> [<meetOrSlice>]</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"><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"> |
ed@23 | 2723 | <title>Example feImage - Examples of feImage use</title> |
ed@23 | 2724 | <desc>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.</desc> |
ed@23 | 2728 | <defs> |
ed@23 | 2729 | <filter id="Default"> |
ed@23 | 2730 | <feImage xlink:href="smiley.png" /> |
ed@23 | 2731 | </filter> |
ed@23 | 2732 | <filter id="Fitted" primitiveUnits="objectBoundingBox"> |
ed@23 | 2733 | <feImage xlink:href="smiley.png" |
ed@23 | 2734 | x="0" y="0" width="100%" height="100%" |
ed@23 | 2735 | preserveAspectRatio="none"/> |
ed@23 | 2736 | </filter> |
ed@23 | 2737 | <filter id="Shifted"> |
ed@23 | 2738 | <feImage xlink:href="smiley.png" |
ed@23 | 2739 | x="500" y="5"/> |
ed@23 | 2740 | </filter> |
ed@23 | 2741 | </defs> |
ed@23 | 2742 | <rect fill="none" stroke="blue" |
ed@23 | 2743 | x="1" y="1" width="598" height="248"/> |
ed@23 | 2744 | <g> |
ed@23 | 2745 | <rect x="50" y="25" width="100" height="200" filter="url(#Default)"/> |
ed@23 | 2746 | <rect x="50" y="25" width="100" height="200" fill="none" stroke="green"/> |
ed@23 | 2747 | <rect x="250" y="25" width="100" height="200" filter="url(#Fitted)"/> |
ed@23 | 2748 | <rect x="250" y="25" width="100" height="200" fill="none" stroke="green"/> |
ed@23 | 2749 | <rect x="450" y="25" width="100" height="200" filter="url(#Shifted)"/> |
ed@23 | 2750 | <rect x="450" y="25" width="100" height="200" fill="none" stroke="green"/> |
ed@23 | 2751 | </g> |
ed@23 | 2752 | </svg></pre><table summary="Example "><caption align="bottom">Example feImage</caption><tr><td><img alt="Example feImage — Examples of feImage use" src="examples/feImage-01.png"/></td></tr></table><p class="view-as-svg"><a href="examples/feImage-01.svg">View this example as SVG (SVG-enabled browsers only)</a></p> |
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"><number-optional-number></a></em>"</dt><dd>The radius (or radii) for the operation. If two <a href="http://www.w3.org/TR/2003/REC-SVG11-20030114/types.html#DataTypeNumber"><number></a> |
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"><?xml version="1.0"?> |
dino@11 | 2844 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" |
dino@11 | 2845 | "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> |
dino@11 | 2846 | <svg width="5cm" height="7cm" viewBox="0 0 700 500" |
dino@11 | 2847 | xmlns="http://www.w3.org/2000/svg" version="1.1"> |
dino@11 | 2848 | <title>Example feMorphology - Examples of erode and dilate</title> |
dino@11 | 2849 | <desc>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'.</desc> |
dino@11 | 2852 | <defs> |
dino@11 | 2853 | <filter id="Erode3"> |
dino@11 | 2854 | <feMorphology operator="erode" in="SourceGraphic" radius="3" /> |
dino@11 | 2855 | </filter> |
dino@11 | 2856 | <filter id="Erode6"> |
dino@11 | 2857 | <feMorphology operator="erode" in="SourceGraphic" radius="6" /> |
dino@11 | 2858 | </filter> |
dino@11 | 2859 | <filter id="Dilate3"> |
dino@11 | 2860 | <feMorphology operator="dilate" in="SourceGraphic" radius="3" /> |
dino@11 | 2861 | </filter> |
dino@11 | 2862 | <filter id="Dilate6"> |
dino@11 | 2863 | <feMorphology operator="dilate" in="SourceGraphic" radius="6" /> |
dino@11 | 2864 | </filter> |
dino@11 | 2865 | </defs> |
dino@11 | 2866 | <rect fill="none" stroke="blue" stroke-width="2" |
dino@11 | 2867 | x="1" y="1" width="698" height="498"/> |
dino@11 | 2868 | <g enable-background="new" > |
dino@11 | 2869 | <g font-family="Verdana" font-size="75" |
dino@11 | 2870 | fill="none" stroke="black" stroke-width="6" > |
dino@11 | 2871 | <text x="50" y="90">Unfiltered</text> |
dino@11 | 2872 | <text x="50" y="180" filter="url(#Erode3)" >Erode radius 3</text> |
dino@11 | 2873 | <text x="50" y="270" filter="url(#Erode6)" >Erode radius 6</text> |
dino@11 | 2874 | <text x="50" y="360" filter="url(#Dilate3)" >Dilate radius 3</text> |
dino@11 | 2875 | <text x="50" y="450" filter="url(#Dilate6)" >Dilate radius 6</text> |
dino@11 | 2876 | </g> |
dino@11 | 2877 | </g> |
dino@11 | 2878 | </svg></pre><table summary="Example "><caption align="bottom">Example </caption><tr><td><img alt="Example " src="examples/feMorphology.png"/></td></tr></table><p class="view-as-svg"><a href="examples/feMorphology.svg">View this example as SVG (SVG-enabled browsers only)</a></p> |
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"><number></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"><number></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"><number></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"><number></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"><number></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"><number-optional-number></a></span>"</dt><dd>The first number is the <dx> value. The second number is the |
dino@11 | 2995 | <dy> value. If the <dy> value is not specified, it defaults |
dino@11 | 2996 | to the same value as <dx>. 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 & 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 <= 0) lSeed = -(lSeed % (RAND_m - 1)) + 1; |
dino@11 | 3109 | if (lSeed > 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 <= 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 < 4; k++) |
dino@11 | 3139 | { |
dino@11 | 3140 | for(i = 0; i < BSize; i++) |
dino@11 | 3141 | { |
dino@11 | 3142 | uLatticeSelector[i] = i; |
dino@11 | 3143 | for (j = 0; j < 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 < BSize + 2; i++) |
dino@11 | 3157 | { |
dino@11 | 3158 | uLatticeSelector[BSize + i] = uLatticeSelector[i]; |
dino@11 | 3159 | for(k = 0; k < 4; k++) |
dino@11 | 3160 | for(j = 0; j < 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 >= pStitchInfo->nWrapX) |
dino@11 | 3185 | bx0 -= pStitchInfo->nWidth; |
dino@11 | 3186 | if(bx1 >= pStitchInfo->nWrapX) |
dino@11 | 3187 | bx1 -= pStitchInfo->nWidth; |
dino@11 | 3188 | if(by0 >= pStitchInfo->nWrapY) |
dino@11 | 3189 | by0 -= pStitchInfo->nHeight; |
dino@11 | 3190 | if(by1 >= pStitchInfo->nWrapY) |
dino@11 | 3191 | by1 -= pStitchInfo->nHeight; |
dino@11 | 3192 | } |
dino@11 | 3193 | bx0 &= BM; |
dino@11 | 3194 | bx1 &= BM; |
dino@11 | 3195 | by0 &= BM; |
dino@11 | 3196 | by1 &= 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 < 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 < 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 = &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 < 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"><number-optional-number></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"><number></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"><integer></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"><number></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 < 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"><?xml version="1.0"?> |
dino@11 | 3332 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" |
dino@11 | 3333 | "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> |
dino@11 | 3334 | <svg width="450px" height="325px" viewBox="0 0 450 325" |
dino@11 | 3335 | xmlns="http://www.w3.org/2000/svg" version="1.1"> |
dino@11 | 3336 | <title>Example feTurbulence - Examples of feTurbulence operations</title> |
dino@11 | 3337 | <desc>Six rectangular areas showing the effects of |
dino@11 | 3338 | various parameter settings for feTurbulence.</desc> |
dino@11 | 3339 | <g font-family="Verdana" text-anchor="middle" font-size="10" > |
dino@11 | 3340 | <defs> |
dino@11 | 3341 | <filter id="Turb1" filterUnits="objectBoundingBox" |
dino@11 | 3342 | x="0%" y="0%" width="100%" height="100%"> |
dino@11 | 3343 | <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2"/> |
dino@11 | 3344 | </filter> |
dino@11 | 3345 | <filter id="Turb2" filterUnits="objectBoundingBox" |
dino@11 | 3346 | x="0%" y="0%" width="100%" height="100%"> |
dino@11 | 3347 | <feTurbulence type="turbulence" baseFrequency="0.1" numOctaves="2"/> |
dino@11 | 3348 | </filter> |
dino@11 | 3349 | <filter id="Turb3" filterUnits="objectBoundingBox" |
dino@11 | 3350 | x="0%" y="0%" width="100%" height="100%"> |
dino@11 | 3351 | <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="8"/> |
dino@11 | 3352 | </filter> |
dino@11 | 3353 | <filter id="Turb4" filterUnits="objectBoundingBox" |
dino@11 | 3354 | x="0%" y="0%" width="100%" height="100%"> |
dino@11 | 3355 | <feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="4"/> |
dino@11 | 3356 | </filter> |
dino@11 | 3357 | <filter id="Turb5" filterUnits="objectBoundingBox" |
dino@11 | 3358 | x="0%" y="0%" width="100%" height="100%"> |
dino@11 | 3359 | <feTurbulence type="fractalNoise" baseFrequency="0.4" numOctaves="4"/> |
dino@11 | 3360 | </filter> |
dino@11 | 3361 | <filter id="Turb6" filterUnits="objectBoundingBox" |
dino@11 | 3362 | x="0%" y="0%" width="100%" height="100%"> |
dino@11 | 3363 | <feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="1"/> |
dino@11 | 3364 | </filter> |
dino@11 | 3365 | </defs> |
dino@11 | 3366 | |
dino@11 | 3367 | <rect x="1" y="1" width="448" height="323" |
dino@11 | 3368 | fill="none" stroke="blue" stroke-width="1" /> |
dino@11 | 3369 | |
dino@11 | 3370 | <rect x="25" y="25" width="100" height="75" filter="url(#Turb1)" /> |
dino@11 | 3371 | <text x="75" y="117">type=turbulence</text> |
dino@11 | 3372 | <text x="75" y="129">baseFrequency=0.05</text> |
dino@11 | 3373 | <text x="75" y="141">numOctaves=2</text> |
dino@11 | 3374 | |
dino@11 | 3375 | <rect x="175" y="25" width="100" height="75" filter="url(#Turb2)" /> |
dino@11 | 3376 | <text x="225" y="117">type=turbulence</text> |
dino@11 | 3377 | <text x="225" y="129">baseFrequency=0.1</text> |
dino@11 | 3378 | <text x="225" y="141">numOctaves=2</text> |
dino@11 | 3379 | |
dino@11 | 3380 | <rect x="325" y="25" width="100" height="75" filter="url(#Turb3)" /> |
dino@11 | 3381 | <text x="375" y="117">type=turbulence</text> |
dino@11 | 3382 | <text x="375" y="129">baseFrequency=0.05</text> |
dino@11 | 3383 | <text x="375" y="141">numOctaves=8</text> |
dino@11 | 3384 | |
dino@11 | 3385 | <rect x="25" y="180" width="100" height="75" filter="url(#Turb4)" /> |
dino@11 | 3386 | <text x="75" y="272">type=fractalNoise</text> |
dino@11 | 3387 | <text x="75" y="284">baseFrequency=0.1</text> |
dino@11 | 3388 | <text x="75" y="296">numOctaves=4</text> |
dino@11 | 3389 | |
dino@11 | 3390 | <rect x="175" y="180" width="100" height="75" filter="url(#Turb5)" /> |
dino@11 | 3391 | <text x="225" y="272">type=fractalNoise</text> |
dino@11 | 3392 | <text x="225" y="284">baseFrequency=0.4</text> |
dino@11 | 3393 | <text x="225" y="296">numOctaves=4</text> |
dino@11 | 3394 | |
dino@11 | 3395 | <rect x="325" y="180" width="100" height="75" filter="url(#Turb6)" /> |
dino@11 | 3396 | <text x="375" y="272">type=fractalNoise</text> |
dino@11 | 3397 | <text x="375" y="284">baseFrequency=0.1</text> |
dino@11 | 3398 | <text x="375" y="296">numOctaves=1</text> |
dino@11 | 3399 | </g> |
dino@11 | 3400 | </svg></pre><table summary="Example "><caption align="bottom">Example </caption><tr><td><img alt="Example " src="examples/feTurbulence.png"/></td></tr></table><p class="view-as-svg"><a href="examples/feTurbulence.svg">View this example as SVG (SVG-enabled browsers only)</a></p> |
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 | <feGaussianBlur in="<b>alpha-channel-of-feDropShadow-in</b>" stdDeviation="<b>stdDeviation-of-feDropShadow</b>"/> |
dino@11 | 3418 | <feOffset dx="<b>dx-of-feDropShadow</b>" dy="<b>dy-of-feDropShadow</b>" result="offsetblur"/> |
dino@11 | 3419 | <feFlood flood-color="<b>flood-color-of-feDropShadow</b>" flood-opacity="<b>flood-opacity-of-feDropShadow</b>"/> |
dino@11 | 3420 | <feComposite in2="offsetblur" operator="in"/> |
dino@11 | 3421 | <feMerge> |
dino@11 | 3422 | <feMergeNode/> |
dino@11 | 3423 | <feMergeNode in="<b>in-of-feDropShadow</b>"/> |
dino@11 | 3424 | </feMerge> |
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"> <feGaussianBlur in="<b>alpha-channel-of-feDropShadow-in</b>" stdDeviation="<b>stdDeviation-of-feDropShadow</b>"/></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"> <feOffset dx="<b>dx-of-feDropShadow</b>" dy="<b>dy-of-feDropShadow</b>" result="offsetblur"/></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"> <feFlood flood-color="<b>flood-color-of-feDropShadow</b>" flood-opacity="<b>flood-opacity-of-feDropShadow</b>"/></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"> <feComposite in2="offsetblur" operator="in"/></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"> <feMerge> |
dino@13 | 3450 | <feMergeNode/> |
dino@13 | 3451 | <feMergeNode in="<b>in-of-feDropShadow</b>"/> |
dino@13 | 3452 | </feMerge></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"><number></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"><number></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"><number-optional-number></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 <image> value</h2> |
dino@33 | 3506 | |
dino@33 | 3507 | <p> |
dino@33 | 3508 | The filter() function produces a CSS <image> 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><filter></dfn> = filter( |
dino@33 | 3515 | <image>, |
dino@33 | 3516 | none | <filter-function> [ <filter-function> ]* |
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 <image> 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"> <filter id="grayscale"> |
dino@13 | 3559 | <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"/> |
dino@13 | 3564 | </filter> </pre> |
dino@13 | 3565 | |
dino@33 | 3566 | <h3 id="sepiaEquivalent">32.2 sepia</h3> |
dino@13 | 3567 | |
dino@13 | 3568 | <pre class="examplesource"> <filter id="sepia"> |
dino@13 | 3569 | <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"/> |
dino@13 | 3574 | </filter> </pre> |
dino@13 | 3575 | |
dino@33 | 3576 | <h3 id="saturateEquivalent">32.3 saturate</h3> |
dino@13 | 3577 | |
dino@13 | 3578 | <pre class="examplesource"> <filter id="saturate"> |
dino@13 | 3579 | <feColorMatrix type="saturate" |
dino@13 | 3580 | values="(1 - [amount])"/> |
dino@13 | 3581 | </filter> </pre> |
dino@13 | 3582 | |
dino@33 | 3583 | <h3 id="huerotateEquivalent">32.4 hue-rotate</h3> |
dino@13 | 3584 | |
dino@13 | 3585 | <pre class="examplesource"> <filter id="hue-rotate"> |
dino@13 | 3586 | <feColorMatrix type="hueRotate" |
dino@13 | 3587 | values="[angle]"/> |
dino@13 | 3588 | </filter> </pre> |
dino@13 | 3589 | |
dino@33 | 3590 | <h3 id="invertEquivalent">32.5 invert</h3> |
dino@13 | 3591 | |
dino@13 | 3592 | <pre class="examplesource"> <filter id="invert"> |
dino@13 | 3593 | <feComponentTransfer> |
dino@13 | 3594 | <feFuncR type="table" tableValues="[amount] (1 - [amount])"/> |
dino@13 | 3595 | <feFuncG type="table" tableValues="[amount] (1 - [amount])"/> |
dino@13 | 3596 | <feFuncB type="table" tableValues="[amount] (1 - [amount])"/> |
dino@13 | 3597 | </feComponentTransfer> |
dino@13 | 3598 | </filter> </pre> |
dino@13 | 3599 | |
dino@36 | 3600 | <h3 id="opacityEquivalent">32.6 opacity</h3> |
dino@36 | 3601 | |
dino@36 | 3602 | <pre class="examplesource"> <filter id="opacity"> |
dino@36 | 3603 | <feComponentTransfer> |
dino@36 | 3604 | <feFuncA type="table" tableValues="0 [amount]"/> |
dino@36 | 3605 | </feComponentTransfer> |
dino@36 | 3606 | </filter> </pre> |
dino@36 | 3607 | |
dino@36 | 3608 | <h3 id="gammaEquivalent">32.7 gamma</h3> |
dino@13 | 3609 | |
dino@13 | 3610 | <pre class="examplesource"> <filter id="gamma"> |
dino@13 | 3611 | <feComponentTransfer> |
dino@13 | 3612 | <feFuncR type="gamma" amplitude="[amplitude]" exponent="[exponent]" offset="[offset]"/> |
dino@13 | 3613 | <feFuncG type="gamma" amplitude="[amplitude]" exponent="[exponent]" offset="[offset]"/> |
dino@13 | 3614 | <feFuncB type="gamma" amplitude="[amplitude]" exponent="[exponent]" offset="[offset]"/> |
dino@13 | 3615 | </feComponentTransfer> |
dino@13 | 3616 | </filter> </pre> |
dino@13 | 3617 | |
dino@36 | 3618 | <h3 id="blurEquivalent">32.8 blur</h3> |
dino@13 | 3619 | |
dino@13 | 3620 | <pre class="examplesource"> <filter id="blur"> |
dino@13 | 3621 | <feGaussianBlur stdDeviation="[radiusX radiusY]"> |
dino@13 | 3622 | </filter> </pre> |
dino@13 | 3623 | |
dino@36 | 3624 | <h3 id="sharpenEquivalent">32.9 sharpen</h3> |
dino@13 | 3625 | |
dino@13 | 3626 | <pre class="examplesource"> <filter id="unsharp"> |
dino@13 | 3627 | <feUnsharpMask stdDeviation="[radius]" threshold="[threshold]" amount="[amount]"> |
dino@13 | 3628 | </filter> </pre> |
dino@13 | 3629 | |
dino@36 | 3630 | <h3 id="dropshadowEquivalent">32.10 drop-shadow</h3> |
dino@33 | 3631 | |
dino@33 | 3632 | <pre class="examplesource"> <filter id="drop-shadow"> |
dino@33 | 3633 | <feGaussianBlur in="[alpha-channel-of-input]" stdDeviation="[radius]"/> |
dino@33 | 3634 | <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/> |
dino@33 | 3635 | <feFlood flood-color="[color]"/> |
dino@33 | 3636 | <feComposite in2="offsetblur" operator="in"/> |
dino@33 | 3637 | <feMerge> |
dino@33 | 3638 | <feMergeNode/> |
dino@33 | 3639 | <feMergeNode in="input-image"/> |
dino@33 | 3640 | </feMerge> |
dino@33 | 3641 | </filter> </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> |