1. 序論
◎非規範的~filter効果は、 文書の中に描かれる際に要素に適用される,~graphicな演算である。 それは,画像に基づく効果であり、 入力として 0 個~以上の画像, および 何個かの当の効果に特有な~parameterをとり,出力として画像を生産する。 出力~画像は、 元の要素に代わって文書の中に描画されるか, 別の~filter効果の入力~画像として利用されるか, ~CSS画像~値として供される。 ◎ A filter effect is a graphical operation that is applied to an element as it is drawn into the document. It is an image-based effect, in that it takes zero or more images as input, a number of parameters specific to the effect, and then produces an image as output. The output image is either rendered into the document instead of the original element, used as an input image to another filter effect, or provided as a CSS image value.
~filter効果の単純な例として “塗潰し” 【 `feFlood$e 】がある。 それは、 画像を入力にとらないが,色を定義する~parameterをとる。 この効果は、 所与の色で完全に埋められた出力~画像を生産する。 もう少し複階的な例として, “反転” 【 `invert$f 】がある。 それは、 1 個の画像~入力(概して、 要素がその親の中に通常通り描画されたときの画像)をとり,各~画素の色~値が~~元と反対になるよう調整する。 ◎ A simple example of a filter effect is a “flood”. It takes no image inputs but has a parameter defining a color. The effect produces an output image that is completely filled with the given color. A slightly more complex example is an “inversion” which takes a single image input (typically an image of the element as it would normally be rendered into its parent) and adjusts each pixel such that they have the opposite color values.
~filter効果は、 次の 2 つの仕方で公開される: ◎ Filter effects are exposed with two levels of complexity:
- (A) 名前で与えられる,数種の`~filter関数$からなる “詰め合わせ”。 これらは特に強力ではないが,簡便で理解するのも容易であり、 ボカすなどの共通的な効果を,単純な~approachで達成できるようにする。 “詰め合わせ” の~filterは、 ~animateすることもできる `CSS3-ANIMATIONS$r 。 ◎ A small set of canned filter functions that are given by name. While not particularly powerful, these are convenient and easily understood and provide a simple approach to achieving common effects, such as blurring. The canned filters can also be animated by [CSS3-ANIMATIONS].
- (B) 総体的な効果を定義する~markupで述べられる,個々の~filter効果が成す~graph 【`原始filter~tree$】。 この~graphは、 どの内容にも効果を適用できる点で,入力を問わない。 そのような~graphは,いくつかの効果 — 個別的には単純なものも含まれる — の組合nであるが、 一体としての~graphは複階的な効果を生産できる。 ◎ A graph of individual filter effects described in markup that define an overall effect. The graph is agnostic to its input in that the effect can be applied to any content. While such graphs are the combination of effects that may be simple in isolation, the graph as a whole can produce complex effects. An example is given below.
(A) の例。 画像は `grayscale$ft ~filter関数で ~filterされる。 ◎ In this example, an image is filtered with the <grayscale()> filter function.
#image { filter: grayscale(100%); }
(B) の例: ◎ The following shows an example of graph of individual filter effects.
`filters01.svg$ex上の (B) 例には、 次に示す 6 個の~filter効果が利用されている: ◎ The filter effect used in the example above is repeated here with reference numbers in the left column before each of the six filter primitives:
<filter
id="MyFilter"
filterUnits="userSpaceOnUse"
x="0" y="0" width="200" height="120"
>
<desc>
~3D照明~効果を生産する。
◎
Produces a 3D lighting effect.
</desc>
<feGaussianBlur
in="SourceAlpha"
stdDeviation="4"
result="blur"
/>
<feOffset
in="blur"
dx="4" dy="4"
result="offsetBlur"
/>
<feSpecularLighting
in="blur"
surfaceScale="5"
specularConstant=".75"
specularExponent="20"
lighting-color="#bbbbbb"
result="specOut"
>
<fePointLight x="-5000" y="-10000" z="20000"/>
</feSpecularLighting>
<feComposite
in="specOut"
in2="SourceAlpha"
operator="in"
result="specOut"
/>
<feComposite
in="SourceGraphic"
in2="specOut"
operator="arithmetic"
k1="0" k2="1" k3="1" k4="0"
result="litPaint"
/>
<feMerge>
<feMergeNode in="offsetBlur"/>
<feMergeNode in="litPaint"/>
</feMerge>
</filter>
この 6 個の~filter要素それぞれからの中間~画像~結果を,同順に, 次の絵図に示す: ◎ The following pictures show the intermediate image results from each of the six filter elements:
- (1) 原始filter `feGaussianBlur$e は、 入力( `in$aP )として `SourceAlpha$v をとる — それは、 ~source~graphicの~alpha~channelを与える。 結果は、 `blur^v と命名された中間~画像に格納される( `result="blur"^c )。 `blur^v は、 原始filter (2), (3) 両者への入力として利用されることに注意。 ◎ Filter primitive feGaussianBlur takes input SourceAlpha, which is the alpha channel of the source graphic. The result is stored in a temporary buffer named "blur". Note that "blur" is used as input to both filter primitives 2 and 3.
- (2) 原始filter `feOffset$e は、 (1) の結果( `blur^v )を %x, %y ともに正な方向へズラす。 その効果は、 落影になる。 結果は、 新たな中間~画像 `offsetBlur^v に格納される。 ◎ Filter primitive feOffset takes buffer "blur", shifts the result in a positive direction in both x and y, and creates a new buffer named "offsetBlur". The effect is that of a drop shadow.
- (3) 原始filter `feSpecularLighting$e は、 (1) の結果( `blur^v )を標高~modelに利用して,単独の点光源による照明~効果を生成する。 結果は、 中間~画像 `specOut^v に格納される。 ◎ Filter primitive feSpecularLighting, uses buffer "blur" as a model of a surface elevation and generates a lighting effect from a single point source. The result is stored in buffer "specOut".
- (4) 原始filter `feComposite$e は、 (3) の結果( `specOut^v )を,元の~source~graphicの~alpha~channelによる~maskで切り抜く — 中間~結果が元の~source~graphicより大きくならないよう。 結果は、 同じ名前の別の中間~画像 `specOut^v に格納される。 ◎ Filter primitive feComposite masks out the result of filter primitive 3 by the original source graphics alpha channel so that the intermediate result is no bigger than the original source graphic.
- (5) 原始filter `feComposite$e は、 (4) の結果【 直近の `specOut^v 】と元の~source~graphicとを組成する。 結果は、 中間~画像 `litPaint^v に格納される。 ◎ Filter primitive feComposite composites the result of the specular lighting with the original source graphic.
- (6) 原始filter `feMerge$e は、[ (2) の結果(落影 `offsetBlur^v )を奥の層に, (5) の結果(照明~効果に基づく `litPaint^v )を手前の層 ]として共に組成する。 ◎ Filter primitive feMerge composites two layers together. The lower layer consists of the drop shadow result from filter primitive 2. The upper layer consists of the specular lighting result from filter primitive 5.
2. ~module間の相互作用
この仕様は、 適用された要素の視覚的な描画に影響するような,一連の~CSS~propを定義する — これらによる効果は、 `視覚-整形~model@~CSS2J#visuren$ `CSS21$r に則って,要素が~sizeされ, 位置された後に適用される。 これらの~propは、 `包含塊$や`積層~文脈$を作成させる値もとり得る。 ◎ This specification defines a set of CSS properties that affect the visual rendering of elements to which those properties are applied; these effects are applied after elements have been sized and positioned according to the Visual formatting model from [CSS21]. Some values of these properties result in the creation of a containing block, and/or the creation of a stacking context.
組成~modelは、 ~SVG組成~model `SVG11$r に従い,次の順に適用される ⇒# ~filter効果, 切抜き, ~masking, 不透明度 `CSS3COLOR$r ◎ The compositing model follows the SVG compositing model [SVG11]: first any filter effect is applied, then any clipping, masking and opacity [CSS3COLOR].\
これらの効果はどれも, `border$p `CSS3BG$r などの他のどの~CSS効果よりも後に適用される。 ◎ These effects all apply after any other CSS effects such as border [CSS3BG].
この仕様における[ ~prop/要素 ]定義には、 ~SVG 1.1 実装 `SVG11$r を要求するものもある。 ~SVGを~supportしない~UAは、 次に挙げるものを実装しないモノトスル:
- 次に挙げる~prop ⇒# `color-interpolation-filters$p, `flood-color$p, `flood-opacity$p, `lighting-color$p
- 次に挙げる要素 ⇒# `filter$e, `feMergeNode$e, `伝達t関数~要素$, `原始filter$
3. 値
【 この節の内容は `~CSS日本語訳 共通~page@~CSScommon#values$に移譲。 】
4. 各種用語
この節では、 この仕様を通して利用される用語の意味を与える。 ◎ When used in this specification, terms have the meanings assigned in this section.
- `原始filter@ ( `filter primitive^en )
- `filter$e 要素の出力を制御する`原始filter要素$。 【妥当でない原始filter要素( `filter$e 要素の子でないものなど)は、`原始filter$にはならない。】 ◎ The set of elements that control the output of a filter element,\
- `原始filter要素@
- 次に挙げる要素 ⇒# `feBlend$e, `feColorMatrix$e, `feComponentTransfer$e, `feComposite$e, `feConvolveMatrix$e, `feDiffuseLighting$e, `feDisplacementMap$e, `feDropShadow$e, `feFlood$e, `feGaussianBlur$e, `feImage$e, `feMerge$e, `feMorphology$e, `feOffset$e, `feSpecularLighting$e, `feTile$e, `feTurbulence$e ◎ particularly: feSpotLight, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDropShadow, feFlood, feGaussianBlur, feImage, feMerge, feMorphology, feOffset, feSpecularLighting, feTile, feTurbulence.
- 【原文には `feSpotLight$e も挙げられているが、誤記であろう。】
- `通過~filter@ ( `pass through filter^en )
- 通過~filterの出力は、 原始filterの首な入力【 `in$aP 】に等しい。 ◎ The pass through filter output is equal to the primary input of the filter primitive.
【原文には明示的に定義されていない/各所に分散して述べられている用語も以下に集約する:】
- `初期~値@ ( `initial value^en )
- `~SVGにて定義される@~SVGtypes#TermInitialValue$。
- (以下、 ~SVGから引用) [ 属性/~prop ] %A の初期~値は、[ %A に値が指定されていない, または %A の値は`妥当でない@~SVGtypes#TermInvalidValue$ ]ときに利用される値であり、 次の目的に利用されることになる ⇒# 描画する, ~animation値を計算する(補間する), DOM ~interfaceを介して %A に~accessする
- `number-optional-number@t = `number$t `number$t?
- 1 個または 2 個の実数を表す。
- この仕様では上の様な構文にされているが、 ~SVG 1.1 に定義される`同じ名前の生成規則@~SVG11/types.html#DataTypeNumberOptionalNumber$では, 分離子に~commaも許容されている — ~CSSの文脈では許容されないかもしれない。
- `list-of-numbers@t
- 実数の~listを表す。 原文には `list of <number>s^en と記されているが、 表記上の都合により, “`list-of-numbers^t” と記すことにする。
- 正確な生成規則は述べられていないが、 ~SVG 1.1 に定義される[ 生成規則の雛形 `list-of-Ts$t から %T として `number$t を与えて得られる生成規則 ]のように見受けられる(が、 `number-optional-number$t と同様,分離子に~commaも許容されるかどうかは述べられていない)。
- 中間~画像
- `~filter連鎖@#FilterPrimitiveTree$による各~演算を適用した途中結果を保持するために内部的に利用される,一時的な画像。 原文では,次に挙げるような様々な呼称で記されているが、 どれも同じ意味を表すと見受けられるので,この訳では一律に “中間~画像” と記す: `intermediate image / temporary off-screen image / offscreen/offscreen bitmap/intermediate offscreen/intermediate image offscreen bitmap/intermediate layer/intermediate 〜 images/intermediate filter results/buffer/temporary buffer/image buffer^en
- (厳密には、 ~bitmap画像に限らず,単色など画像を抽象的に表現するものもあり得る。)
- `呈示~属性@ ( `presentation attribute^en )
- 【 各~versionの~SVG仕様に定義される呈示~属性の~list( SVG 1.1 の`呈示~属性$1 / SVG 2 の`呈示~属性$2 )は、 ~versionごとに, および ここに挙げるものとは多少異なっている。 】
- 次に挙げる,要素の属性としても利用できる~prop ⇒# `alignment-baseline$p, `baseline-shift$p, `clip$p, `clip-path$p, `clip-rule$p, `color$p, `color-interpolation$p, `color-interpolation-filters$p, `color-rendering$p, `cursor$p, `direction$p, `display$p, `dominant-baseline$p, `enable-background$p, `fill$p, `fill-opacity$p, `fill-rule$p, `filter$p, `flood-color$p, `flood-opacity$p, `font$p, `font-family$p, `font-size$p, `font-size-adjust$p, `font-stretch$p, `font-style$p, `font-variant$p, `font-weight$p, `glyph-orientation-horizontal$p, `glyph-orientation-vertical$p, `image-rendering$p, `isolation$p, `kerning$p, `letter-spacing$p, `lighting-color$p, `marker$p, `marker-end$p, `marker-mid$p, `marker-start$p, `mask$p, `opacity$p, `overflow$p, `pointer-events$p, `shape-rendering$p, `stop-color$p, `stop-opacity$p, `stroke$p, `stroke-dasharray$p, `stroke-dashoffset$p, `stroke-linecap$p, `stroke-linejoin$p, `stroke-miterlimit$p, `stroke-opacity$p, `stroke-width$p, `text-anchor$p, `text-decoration$p, `text-rendering$p, `unicode-bidi$p, `visibility$p, `word-spacing$p, `writing-mode$p,
- `中核~属性@ ( `core attribute^en )
- 次に挙げる,どの要素にも共通な属性(参照: `SVG 2 仕様@~SVGstruct#TermCoreAttribute$ / `SVG 1.1 仕様@~SVG11/intro.html#TermCoreAttributes$ ) ⇒# `id@~SVGstruct#IDAttribute$a, `xml:base@~SVG11/struct.html#XMLBaseAttribute$a, `xml:lang@~SVGstruct#LangAttribute$a, `xml:space@~SVGstruct#XMLSpaceAttribute$a
- `記述的~要素@ ( `descriptive element^en )
- 次に挙げる,補足的な情報を与える要素(参照: `SVG 2 仕様@~SVGstruct#TermDescriptiveElement$ / `SVG 1.1 仕様@~SVG11/intro.html#TermDescriptiveElement$ ) ⇒# `desc$e, `title$e, `metadata$e
【この訳に特有な表記規約】
◎表記記号次に挙げる,算術~演算~用の数学~関数/表記も利用される:
- `sin^op() — 正弦
- `cos^op() — 余弦
- `sqrt^op() — 平方根
- `pow^op( %a, %b ) — べき乗: %a の %b 乗
- `exp^op( %b ) — 指数関数 ~EQ `pow^op( ネイピア数, %b )
- `floor^op( %v ) — %v 以下の最大な整数
- `ceil^op( %v ) — %v 以上の最小な整数
- 四則演算 ~PLUS, ~MINUS, ~MUL, ~DIV は~vectorの加算/~scalar積にも利用される。
- ⟨ %U, %V ⟩ — ~vector %U, %V の内積【原文では “%U.%V” のように記されている】
-
`Normalize^op( %V ) — ~vector %V と “同じ向きの単位~vector”。 次の式で得られる:
%V ~DIV `sqrt^op( ⟨ %V, %V ⟩ ) ( ~EQ %V ~DIV ( %V の長さ ) )
5. ~graphic~filter: `filter^p ~prop
`filter$p ~propの記述は、 次に従う: ◎ The description of the filter property is as follows:
◎名 `filter@p ◎値 `none$v | `filter-value-list$t ◎初 `none$v ◎適 すべての要素。 ~SVGにおいては、 `defs$e 要素~以外の`容器~要素$, すべての`~graphics要素$, `use$e 要素 ◎ All elements. In SVG, it applies to container elements without the defs element, all graphics elements and the use element. ◎継 されない ◎百 受容しない ◎算 指定されたとおり ◎順 文法に従う ◎ア `§ ~filterの~animation@#animation-of-filters$の注釈文を見よ ◎ See prose in Animation of Filters. ◎表終`filter-value-list@t = [ `filter-function$t | `url$t ]+
- `url@t
- `filter$e 要素への~filter参照 — 例: `url(commonfilters.svg#filter)^v 。 ~filter参照の参照~先の~objが[ 存在しない/ `filter$e 要素でない ]場合、 ~filter連鎖は一体として無視され,~objには~filterは適用されないことになる。 ◎ A filter reference to a filter element. For example url(commonfilters.svg#filter). If the filter references a non-existent object or the referenced object is not a filter element, then the whole filter chain is ignored. No filter is applied to the object.
- `filter-function$t
- § `~filter関数$を見よ。 ◎ See Filter Functions.
- `none@v
- どの~filter効果も適用されない。 ◎ No filter effect gets applied.
`filter$p ~prop用の `none$v 以外の値は、[ `position$p が[ `absolute^v / `fixed^v ]にされた有位置な子孫 ]用に当の要素の`包含塊$を作成させる — ただし、 要素が現在の`閲覧~文脈$における文書の根~要素である場合は除く。 ~listを成す各~関数は、 供された順序で適用される。 ◎ A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current browsing context. The list of functions are applied in the order provided.
この~list内の最初の[ `~filter関数$/ `filter$e 参照 ]は、 入力~画像として要素 ( `SourceGraphic$v )をとる。 後続な各~演算は、 その前の[ `~filter関数$/ `filter$e 参照 ]からの出力を入力~画像としてとる。 `filter$e 要素~参照~関数は,代替-入力を指定できるが、 依然として,前の出力を `SourceGraphic$v として利用する。 ◎ The first filter function or filter reference in the list takes the element (SourceGraphic) as the input image. Subsequent operations take the output from the previous filter function or filter reference as the input image. filter element reference functions can specify an alternate input, but still uses the previous output as its SourceGraphic.
`color-interpolation-filters$p は、 `~filter関数$には影響しない。 `~filter関数$は、 ~sRGB色~空間~内で演算するモノトスル。 ◎ color-interpolation-filters has no affect for Filter Functions. Filter Functions must operate in the sRGB color space.
`none^v 以外の算出d値による結果は、 ~CSS `opacity$p がするのと同じ仕方で`積層~文脈$を作成させる。 要素のすべての子孫は、 一体の~groupとして~filter効果が適用された上で,~groupとして描画される。 ◎ A computed value of other than none results in the creation of a stacking context [CSS21] the same way that CSS opacity does. All the elements descendants are rendered together as a group with the filter effect applied to the group as a whole.
`filter$p ~propは、 当の要素の`~ink~overflow区画$には寄与し得るが, 当の要素の~CSS~boxの幾何に対する効果は無い。 ◎ The filter property has no effect on the geometry of the target element’s CSS boxes, although filter can contribute to the element’s ink overflow area.
概念的には、 ~filter演算は,描かれたどの部位にも効果を及ぼす。 これには、 ~filterが適用される要素に加えて,要素の子孫の[ 内容, 背景, ~border, ~text装飾, 外形線, 可視な~scroll用の仕組み ]も含まれる。 ~filter演算は、 要素の`局所~座標系$にて適用される。 ◎ Conceptually, any parts of the drawing are effected by filter operations. This includes any content, background, borders, text decoration, outline and visible scrolling mechanism of the element to which the filter is applied, and those of its descendants. The filter operations are applied in the element’s local coordinate system.
組成~modelは、 `~SVG組成~model@~SVG11/render.html#Introduction$ `SVG11$r に従い,次の順に適用される ⇒# ~filter効果, 切抜き, ~masking, 不透明度 ◎ The compositing model follows the SVG compositing model [SVG11]: first any filter effect is applied, then any clipping, masking and opacity.\
~SVGに従い, `filter$p が適用されても接触判定に対する効果はない。 ◎ As per SVG, the application of filter has no effect on hit-testing.
`filter$p ~propは、 ~SVG要素~用の`呈示~属性$1である。 ◎ The filter property is a presentation attribute for SVG elements.
~filterは、 固定的な背景~画像に対してはどう挙動する? [`238$issue] ◎ How does filter behave on fixed background images? [Issue #238]
6. ~filter関数
6.1. ~supportされる~filter関数
`filter-function@t = `blur$ft | `brightness$ft | `contrast$ft | `drop-shadow$ft | `grayscale$ft | `hue-rotate$ft | `invert$ft | `opacity$ft | `sepia$ft | `saturate$ft
これらの各~関数の引数には、 省略されたときにとる `省略-時の既定~値@ に加え, `補間~用の初期~値@ も定義される。 後者は,[ `~filter関数~listの補間$にて補足される関数 ]に利用される引数の値を与え、 当の関数にその定義が与えられていない場合は,`省略-時の既定~値$と同じになるとする。 ◎ Unless defined otherwise, omitted values default to the initial value for interpolation.
【 これらの用語は、 この訳にて定義し直している。 原文における “初期~値” は、[ 引数ではなく,属性/~prop ]の`初期~値$を参照していて,惑わされる。 】
注記: 内容~作成者の便利のため、 ~filter関数には,引数の`省略-時の既定~値$と`補間~用の初期~値$とが相違するものもある。 例えば、[ `grayscale$ft, `sepia$ft, `invert$ft ]用の`省略-時の既定~値$は `1^v (効果 100% を適用する)になる一方で,`補間~用の初期~値$は `0^v (効果なし)になる。 ◎ Note: For some filter functions the default value for omitted values differes from their initial value for interpolation. For the convenience of content creators, the default value for omitted values for <grayscale()>, <sepia()> and <invert()> is 1 (apply the effect to 100%) while the initial value for interpolation is 0 (no effect).
- `blur@f = blur( `length$t? )
- 入力~画像に~Gaussianボカシを適用する。 ~parameterは、 ~Gaussian関数に対する標準偏差の値を定義する。 ~parameterには~CSS長さを指定できるが、 百分率~値は受容しない。 ◎ Applies a Gaussian blur to the input image. The passed parameter defines the value of the standard deviation to the Gaussian function. The parameter is specified a CSS length, but does not accept percentage values.\
- この関数に等価な~markupは、 `§ 原始filter表現 の中で与えられる@#blurEquivalent$。 ◎ The markup equivalent of this function is given below.
- 負な値は許容されない。 ◎ Negative values are not allowed.
- `省略-時の既定~値$は `0px^v とする。 ◎ Default value when omitted is 0px. ◎ The initial value for interpolation is 0px.
- 注記: 標準偏差は、 `box-shadow$p のボカシ半径とは異なる。 ◎ Note: Standard deviation is different to box-shadow s blur radius.
-
~Gaussianボカシ用の`~ink~overflow区画$は、 実装が描くボカシが占める領域になるとする (`~ink~overflow矩形$は、 それに基づく)。 ◎ The ink overflow rectangle for a Gaussian blur is the axis-aligned boundary of the area in which the implementation draws the blur.
注記: 本当の~Gaussianボカシは,理論~的には無限な拡がりであるが、 実施においては, すべての実装は, 有限な区画による近似を利用する。 これを書いた時点( 2024年 1 月)では、 主要なすべての実装は,馴染みな `three-pass^en 【 “3 階” 】 ~boxボカシによる近似を利用する — その拡がりは ⇒ ( ( 3 ~MUL `sqrt^op( 2 ~MUL π ) ~DIV 4 ) ~MUL σ【標準偏差】 ) ◎ Note: A true Gaussian blur has theoretically infinite extent, but in practice all implementations use a finite-area approximation of a Gaussian blur. At the time of writing (January 2024) all major implementations use the familiar three-pass box blur approximation, which has extent: ((3 * sqrt(2 * π) / 4) * σ).
- `brightness@f = brightness( [ `number$t | `percentage$t ]? )
- 入力~画像の明るさ( `brightness^en )を変える。 値 `0%^v は完全に黒の画像を作成させる。 値 `100%^v は入力を変更しない。 他の値による効果は線型になる。 100% を超える値も許容され、 より明るくする。 ◎ Applies a linear multiplier to input image, making it appear more or less bright. A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged. Other values are linear multipliers on the effect. Values of amount over 100% are allowed, providing brighter results.\
- この関数に等価な~markupは、 `§ 原始filter表現 の中で与えられる@#brightnessEquivalent$。 【したがって、~alpha成分は変わらないことになる。】 ◎ The markup equivalent of this function is given below.
- 負な値は許容されない。 ◎ Negative values are not allowed.
- `省略-時の既定~値$は `1^v とする。 ◎ Default value when omitted is 1. ◎ The initial value for interpolation is 1.
- `contrast@f = contrast( [ `number$t | `percentage$t ]? )
- 入力の~contrastを調整する。 値 `0%^v は 完全に~grayな画像を作成することになる。 値 `100%^v は入力を変更しない。 100% を超える値も許容され、 より~contrastが~~高い結果を供する。 ◎ Adjusts the contrast of the input. A value of 0% will create an image that is completely gray. A value of 100% leaves the input unchanged. Values of amount over 100% are allowed, providing results with more contrast.\
- この関数に等価な~markupは、 `§ 原始filter表現 の中で与えられる@#contrastEquivalent$。 ◎ The markup equivalent of this function is given below.
- 負な値は許容されない。 ◎ Negative values are not allowed.
- `省略-時の既定~値$は `1^v とする。 ◎ Default value when omitted is 1. ◎ The initial value for interpolation is 1.
- `drop-shadow@f = drop-shadow( [ `color$t? && `length$t{2,3} ] )
- 入力~画像に落影~効果を適用する。 落影は、 実質的に,[ 入力~画像の~alpha~maskを,特定0の色で描いて, ボカして, ~offsetしたもの ]であって,当の画像の下に組成されるものである。 値は `box-shadow$p `CSS3BG$r に対するときと同じに解釈されるが、 省略可能な 3 個目の `length$t 値は、 `ボカシ半径$に代えて標準偏差を与える。 ◎ Applies a drop shadow effect to the input image. A drop shadow is effectively a blurred, offset version of the input image’s alpha mask drawn in a particular color, composited below the image. Values are interpreted as for box-shadow [CSS3BG] but with the optional 3rd <length> value being the standard deviation instead of blur radius.\
- この関数に等価な~markupは、 `§ 原始filter表現 の中で与えられる@#dropshadowEquivalent$。 ◎ The markup equivalent of this function is given below.
- `省略-時の既定~値$は[ `length^t はすべて `0^v / `color^t は `color$p ~propからとる ]とする。 ◎ The default value for omitted values is missing length values set to 0 and the missing used color is taken from the color property.
- `補間~用の初期~値$は[ `length^t はすべて `0^v / `color^t は `transparent^v ]とする。 ◎ The initial value for interpolation is all length values set to 0 and the used color set to transparent.
- この~levelの仕様では、[ `拡幅~距離$/複数の影 ]は受容されないことに注意。 ◎ Note: Spread values or multiple shadows are not accepted for this level of the specification.
- 注記: 標準偏差は、 `box-shadow$p のボカシ半径とは異なる。 ◎ Note: Standard deviation is different to box-shadow s blur radius.
- 落影~用の`~ink~overflow矩形$は、 `blur$f 用に述べたとおり, ~offsetが成す拡がりにボカシ(もしあれば)が成す拡がりを加えたものになる。 ◎ The ink overflow rectangle for a drop shadow is the extent of the offsets, plus the extent of the blur (if any) as described for <blur()>.
- `grayscale@f = grayscale( [ `number$t | `percentage$t ]? )
- 入力~画像を~grayscaleに変換する。 ~parameterは、 変換の比率を定義する。 値 `100%^v は、 完全に~grayscaleになる。 値 `0%^v は入力を変更しない。 他の値による効果は線型になる。 `100%^v を超える値も許容されるが、 ~UAは値を `1^v に切詰めるモノトスル。 ◎ Converts the input image to grayscale. The passed parameter defines the proportion of the conversion. A value of 100% is completely grayscale. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. Values of amount over 100% are allowed but UAs must clamp the values to 1.\
- この関数に等価な~markupは、 `§ 原始filter表現 の中で与えられる@#grayscaleEquivalent$。 ◎ The markup equivalent of this function is given below.
- 負な値は許容されない。 ◎ Negative values are not allowed.
- `省略-時の既定~値$は `1^v とする。 ◎ Default value when omitted is 1.
- `補間~用の初期~値$は `0^v とする。 ◎ The initial value for interpolation is 0.
- `hue-rotate@f = hue-rotate( [ `angle$t | `zero$t ]? )
- 入力~画像に色相~回転を適用する。 ~parameterは、 色環の周における,入力~sampleを調整する度数を定義する。 値 `0deg^v は入力を変更しない。 `360deg^v を超える~animationを許容するため、 実装は, この値を【例えば 0 以上〜 360 未満に】正規化しないモノトスル。 ◎ Applies a hue rotation on the input image. The passed parameter defines the number of degrees around the color circle the input samples will be adjusted. A value of 0deg leaves the input unchanged. Implementations must not normalize this value in order to allow animations beyond 360deg.\
- この関数に等価な~markupは、 `§ 原始filter表現 の中で与えられる@#huerotateEquivalent$。 ◎ The markup equivalent of this function is given below.
- `angle$t が 0 の場合、 単位~識別子は省略されてもヨイ。 ◎ The unit identifier may be omitted if the <angle> is zero.
- `省略-時の既定~値$は `0deg^v とする。 ◎ Default value when omitted is 0deg. ◎ The initial value for interpolation is 0deg.
- `invert@f = invert( [ `number$t | `percentage$t ]? )
- 入力~画像~内の~sampleを反転する。 ~parameterは変換の比率を定義する。 値 100% は完全に反転する。 値 `0%^v は入力を変更しない。 他の値による効果は線型になる。 `100%^v を超える値も許容されるが、 ~UAは値を `1^v に切詰めるモノトスル。 ◎ Inverts the samples in the input image. The passed parameter defines the proportion of the conversion. A value of 100% is completely inverted. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. Values of amount over 100% are allowed but UAs must clamp the values to 1.\
- この関数に等価な~markupは、 `§ 原始filter表現 の中で与えられる@#invertEquivalent$。 ◎ The markup equivalent of this function is given below.
- 負な値は許容されない。 ◎ Negative values are not allowed.
- `省略-時の既定~値$は `1^v とする。 ◎ Default value when omitted is 1.
- `補間~用の初期~値$は `0^v とする。 ◎ The initial value for interpolation is 0.
- `opacity@f = opacity( [ `number$t | `percentage$t ]? )
- 入力~画像~内の~sampleに透明度を適用する。 ~parameterは、 変換の比率を定義する。 値 `0%^v は完全に透明になる。 値 `100%^v は入力を変更しない。 他の値による効果は線型になる。 これは、 入力~画像の~sampleをその量で乗算することと等価になる。 `100%^v を超える値も許容されるが、 ~UAは値を `1^v に切詰めるモノトスル。 ◎ Applies transparency to the samples in the input image. The passed parameter defines the proportion of the conversion. A value of 0% is completely transparent. A value of 100% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. This is equivalent to multiplying the input image samples by amount. Values of amount over 100% are allowed but UAs must clamp the values to 1.\
- この関数に等価な~markupは、 `§ 原始filter表現 の中で与えられる@#opacityEquivalent$。 ◎ The markup equivalent of this function is given below.
- 負な値は許容されない。 ◎ Negative values are not allowed.
- `省略-時の既定~値$は `1^v とする。 ◎ Default value when omitted is 1. ◎ The initial value for interpolation is 1.
- 注記: 不透明度~filter関数は、 `opacity$p ~propの略式になるものと意味されていない。 さらには、 次の原始filterに渡す前に,中間~原始filter結果の透明度を設定できるようにする。 不透明度~filter関数が最後の原始filterとして設定された場合、 `opacity$p ~propの値は その最後の結果に乗算され,より透明な内容になり得る。 ◎ Note: The opacity filter function is not meant to be a shorthand of the opacity property. Furthermore, it allows setting the transparency of intermediate filter primitive results before passing to the next filter primitive. If the opacity filter function is set as last filter primitive, the value of the opacity property is multiplied on top of the value of the filter function, which may result in a more transparent content.
- `saturate@f = saturate( [ `number$t | `percentage$t ]? )
- 入力~画像の彩度を変える。 ~parameterは、 変換の比率を定義する。 値 `0%^v は彩度なしにする。 値 `100%^v は入力を変更しない。 他の値による効果は線型になる。 `100%^v を超える値も許容され、 彩度をさらに上げる。 ◎ Saturates the input image. The passed parameter defines the proportion of the conversion. A value of 0% is completely un-saturated. A value of 100% leaves the input unchanged. Other values are linear multipliers on the effect. Values of amount over 100% are allowed, providing super-saturated results.\
- この関数に等価な~markupは、 `§ 原始filter表現 の中で与えられる@#saturateEquivalent$。 ◎ The markup equivalent of this function is given below.
- 負な値は許容されない。 ◎ Negative values are not allowed.
- `省略-時の既定~値$は `1^v とする。 ◎ Default value when omitted is 1. ◎ The initial value for interpolation is 1.
- `sepia@f = sepia( [ `number$t | `percentage$t ]? )
- 入力~画像を~sepiaに変換する。 ~parameterは、 変換の比率を定義する。 値 `100%^v は完全に~sepiaにする。 値 `0%^v は入力を変更しない。 他の値による効果は線型になる。 `100%^v を超える値も許容されるが、 ~UAは値を `1^v に切詰めるモノトスル。 ◎ Converts the input image to sepia. The passed parameter defines the proportion of the conversion. A value of 100% is completely sepia. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. Values of amount over 100% are allowed but UAs must clamp the values to 1.\
- この関数に等価な~markupは、 `§ 原始filter表現 の中で与えられる@#sepiaEquivalent$。 ◎ The markup equivalent of this function is given below.
- 負な値は許容されない。 ◎ Negative values are not allowed.
- `省略-時の既定~値$は `1^v とする。 ◎ Default value when omitted is 1.
- `補間~用の初期~値$は `0^v とする。 ◎ The initial value for interpolation is 0.
6.2. ~filter関数の算出d値
`filter-function$t 内の値は、 次の例外を除き,指定d値に算出される: ◎ The values in a <filter-function> are computed as specified, with these exceptions:
- 値が省略された場合、 `省略-時の既定~値$に算出された上で含められる。 ◎ Omitted values are included and compute to their defaults.
- `drop-shadow$f は、 次の順の並びになる ⇒ `color$t の算出d値, `length$t の算出d値 ◎ <drop-shadow()> starts with the computed value of <color> followed by the computed value of the <length> values.
6.3. ~filter関数の直列化
`filter-function$t を直列化するときは、 個々の文法にしたがって,次のように直列化する ⇒# 文法に書かれた順序で, 引数は指定されたままに, アリな所では `calc$f 式を避けて, アリな所では `calc$f 変形nを避けて, ~space等で分離された~tokenは 1 個の~spaceで連結して, 直列化された各~commaには 1 個の~spaceを後続させる ◎ To serialize the <filter-function>, serialize as per their individual grammars,\ in the order the grammars are written in,\ avoiding <calc()> expressions where possible,\ serialize filter arguments as specified, avoiding <calc()> transformations,\ joining space-separated tokens with a single space,\ and following each serialized comma with a single space.
6.4. ~filter関数の補間
`filter-function$t どうし補間では、 その種別に応じて[ 次に従って,互いの引数を補間する ]モノトスル: ◎ For interpolation of values in <filter-function>s, the steps corresponding to the first matching condition in the following list must be run:
- `blur$ft
- `長さ$aTとして補間する†。 ◎ Interpolate values as length.
- `brightness$ft
- `contrast$ft
- `grayscale$ft
- `invert$ft
- `opacity$ft
- `saturate$ft
- `sepia$ft
- 先ず,百分率~値は 0% 〜 100% を 0 〜 1 に線型に変換した上で、 `実数$aTとして補間する†。 ◎ Convert percentage values to numbers with 0% being relative to 0 and 100% relative to 1. Interpolate values number.
- `hue-rotate$ft
- `実数$aTとして補間する†。 ◎ Interpolate values as number.
- `drop-shadow$ft
- `影~list$aTとして補間する†。 ◎ Interpolate values as shadow list.
【† 原文による参照は[ 別の仕様( CSS Transition )の過去~versionに定義されていたが、 現在は廃され,存在しない定義 ]を指しているので、 この訳では新たな定義を指すように修正している。 】
7. ~SVG~filter~source: `filter^e 要素
◎要素名 `filter@e ◎分類 なし。 ◎内容 任意個数, 任意順序の,次に挙げる要素 ⇒# `記述的~要素$, `原始filter要素$, `animate$e, `script$e, `set$e ◎属性 `中核~属性$, `呈示~属性$, `class$a, `style$a, `externalResourcesRequired$a, `x$aF, `y$aF, `width$aF, `height$aF, `filterUnits$aF, `primitiveUnits$aF ◎界面 `SVGFilterElement$I ◎表終`filter$e 要素の記述は、 次に従う: ◎ The description of the filter element follows:
属性定義- `filterUnits@aF = "`userSpaceOnUse@v | `objectBoundingBox@v"
- `~filter領域$を見よ。 ◎ See filter region.
- `primitiveUnits@aF = "`userSpaceOnUse@vPU | `objectBoundingBox@vPU"
-
`原始filter$の中の種々の長さ値, および `原始filter下位領域$を定義する属性 用の座標系を指定する — `filter$p ~propを介して `filter$e 要素を参照している要素を %E で表すとするとき: ◎ Specifies the coordinate system for the various length values within the filter primitives and for the attributes that define the filter primitive subregion.
- 値 `userSpaceOnUse$vPU にされた場合 ⇒ ~filter定義の中の どの長さ値も, `filter$e 要素が参照された[ とき, 所 ]における現在の`局所~座標系$ — すなわち、 %E 用の利用元~座標系 — における値を表現する。 ◎ If primitiveUnits is equal to userSpaceOnUse, any length values within the filter definitions represent values in the current local coordinate system in place at the time when the filter element is referenced (i.e., the user coordinate system for the element referencing the filter element via a filter property).
- 値 `objectBoundingBox$vPU にされた場合 ⇒ ~filter定義の中の どの長さ値も %E の限界~boxに対する[ 割合分/百分率 ]を表現する(`~obj限界~box単位$を見よ)。 ~~対象になる長さ値が `number-optional-number$t 値から与えられていて,値に `number$t が 1 個だけ指定されていた場合、 2 個目の値は, `primitiveUnits$aF が算出される前に~~補填されることに注意。 ◎ If primitiveUnits is equal to objectBoundingBox, then any length values within the filter definitions represent fractions or percentages of the bounding box on the referencing element (see object bounding box units). Note that if only one number was specified in a <number-optional-number> value this number is expanded out before the primitiveUnits computation takes place.
以下では、 この座標系 — すなわち、 `filter$e 要素の `primitiveUnits$aF 属性により確立される座標系 — を指して, `~filter座標系@ と~~略記する。 【この用語は、他所を簡潔に述べるため,この訳にて導入している。】
- `初期~値$は `userSpaceOnUse$vPU とする。 ◎ The initial value for primitiveUnits is userSpaceOnUse.
- ~animate可能。 ◎ Animatable: yes.
- `x@aF = "`length-percentage$t"
- `y@aF = "`length-percentage$t"
- `width@aF = "`length-percentage$t"
- `height@aF = "`length-percentage$t"
- これらについては、 `~filter領域$を見よ。 ◎ See filter region.
- `filterRes@aF = "`number-optional-number$t"
- この属性は、 この仕様から除去された。 その定義は `SVG11$r を見よ。 ◎ The filterRes attribute was removed from the specification. See SVG 1.1 specification for the defintion [SVG11].
`filter$e 要素は、 先祖から~propを継承するが, `filter$e 要素を参照している要素からは継承しない。 ◎ Properties inherit into the filter element from its ancestors; properties do not inherit from the element referencing the filter element.
`filter$e 要素は、 直に描画されることは決してない。 その用途は `filter$p ~propを利用して参照できる何かとしてに限られる。 `display$p ~propは `filter$e 要素には適用されないので、[ `filter$e 要素, および その先祖 ]の `display$p ~propの値が何であれ、 `filter$e 要素は,直に描画されることはなく, また参照~用に可用になる。 ◎ filter elements are never rendered directly; their only usage is as something that can be referenced using the filter property. The display property does not apply to the filter element; thus, filter elements are not directly rendered even if the display property is set to a value other than none, and filter elements are available for referencing even when the display property on the filter element or any of its ancestors is set to none.
8. ~filter領域
`filter$e 要素は、 所与の~filterによる効果を適用する `~filter領域@ を,~canvas上に定義することもある。 また、 階調が連続的な中間~画像~用に,解像度を供することもある — それは、 ~rasterに基づく`原始filter$を処理するときに利用される。 `filter$e 要素は、 次に挙げる属性を有する — それらは、 共に働いて~filter領域を定義する: ◎ A filter element can define a filter region on the canvas to which a given filter effect applies and can provide a resolution for any intermediate continuous tone images used to process any raster-based filter primitives. The filter element has the following attributes which work together to define the filter region:
- `filterUnits$aF
- `x$aF, `y$aF, `width$aF, `height$aF 属性~用の座標系を定義する。 この座標系は、 属性の値[ `userSpaceOnUse$v / `objectBoundingBox$v ]に応じて,`~filter座標系$と同様に — すなわち `primitiveUnits$aF 属性の同じ名前の値[ `userSpaceOnUse$vPU / `objectBoundingBox$vPU ]と同様 — に定義される。 ◎ Defines the coordinate system for attributes x, y, width, height. ◎ If filterUnits is equal to userSpaceOnUse, x, y, width, height represent values in the current user coordinate system in place at the time when the filter element is referenced (i.e., the user coordinate system for the element referencing the filter element via a filter property). ◎ If filterUnits is equal to objectBoundingBox, then x, y, width, height represent fractions or percentages of the bounding box on the referencing element (see object bounding box units).
- `初期~値$は `objectBoundingBox$v とする。 ◎ The initial value for filterUnits is objectBoundingBox.
- ~animate可能。 ◎ Animatable: yes.
- `x$aF, `y$aF, `width$aF, `height$aF
- これらの属性は、 この~filterを適用する~canvas上の矩形な領域を定義する。 ◎ These attributes define a rectangular region on the canvas to which this filter applies.
- これらの属性~用の座標系は、 属性 `filterUnits$aF 値から与えられる。 ◎ The coordinate system for these attributes depends on the value for attribute filterUnits.
- この矩形な限界域は、 当の `filter$e 要素に含まれる`原始filter$すべてに対する切抜き領域として動作する — すなわち、 原始filterの効果が この限界域を超えて拡がる場合(これは、 大きい `stdDeviation$aGB を伴う `feGaussianBlur$e 原始filterを利用したときに起こり得る)、 超えた部位は切取られることになる。 ◎ The bounds of this rectangle act as a hard clipping region for each filter primitive included with a given filter element; thus, if the effect of a given filter primitive would extend beyond the bounds of the rectangle (this sometimes happens when using a feGaussianBlur filter primitive with a very large stdDeviation), parts of the effect will get clipped.
- `x$aF, `y$aF 用の`初期~値$は `-10%^v とする。 ◎ The initial value for x and y is -10%.
- `width$aF, `height$aF 用の`初期~値$は `120%^v とする。 ◎ The initial value for width and height is 120%. ◎ *誤記? ng of the element which referenced the filter.
- ~animate可能。 ◎ Animatable: yes.
注記: `filterUnits$aF の値がどちらであれ、 結果の`~filter領域$の座標系の[ ~X / ~Y ]軸は,[ ~filterの適用-先になる要素~用の`局所~座標系$ ]の[ ~X / ~Y ]軸に平行になる。 ◎ Note: Both of the two possible value for filterUnits (i.e., objectBoundingBox and userSpaceOnUse) result in a filter region whose coordinate system has its X-axis and Y-axis each parallel to the X-axis and Y-axis, respectively, of the local coordinate system for the element to which the filter will be applied.
注記: ~filter領域を機器~画素に直に対応付けれる場合、 実装者は,より高速な処理能を達成できることもある。 したがって作者には、 表示-機器に最良な処理能を得るためには[ ~UAが`~filter領域$の画素~格子が背景のそれに整列できるよう,それらの領域を定義する ]ことが示唆される。 特に,最良な~filter効果~処理能を得るためには、 利用元~座標系を[ 回転する/斜傾する ]のは避けるように。 ◎ Note: Sometimes implementers can achieve faster performance when the filter region can be mapped directly to device pixels; thus, for best performance on display devices, it is suggested that authors define their region such that the user agent can align the filter region pixel-for-pixel with the background. In particular, for best filter effects performance, avoid rotating or skewing the user coordinate system.
注記: ~filter効果は,所与の~objが緊密に収まる`限界~box$より ほんの少し外側に影響iすることもあるので、 その分の追加空間が必要yなことも多い。 この目的で、 ~filter領域の[ `x$aF, `y$aF / `width$aF, `height$aF ]用に[ `0%^v 未満の / `100%^v を超える ]百分率~値を供することもアリである — それが、 これらに対する既定が[ `-10%^v / `120%^v ]にされている~~理由でもある。 ◎ Note: It is often necessary to provide padding space because the filter effect might impact bits slightly outside the tight-fitting bounding box on a given object. For these purposes, it is possible to provide negative percentage values for x, y and percentages values greater than 100% for width, height. This, for example, is why the defaults for the filter region are x="-10%" y="-10%" width="120%" height="120%".
9. 原始filter
9.1. 概観
この節では、 特定0の~filter効果を達成するために組立てれる,種々の原始filterを述べる。 ◎ This section describes the various filter primitives that can be assembled to achieve a particular filter effect.
他が言明されない限り、 すべての画像~filterは,乗算済み~RGBA~sample上で演算する。 [ `feColorMatrix$e, `feComponentTransfer$e ]の様な一部の~filterは、 乗算済みでない~data上でより自然に働く。 各~filter演算の時点では、 すべての色~値は,現在の~filterに要求される色~乗算に一時的に変形するモノトスル。 ◎ Unless otherwise stated, all image filters operate on premultiplied RGBA samples. Some filters like feColorMatrix and feComponentTransfer work more naturally on non-premultiplied data. For the time of the filter operation, all color values must temporarily be transformed to the required color multiplication of the current filter.
注記: すべての入力~画像は、 乗算済み~RGBA内にあると見做される。 ~UAは、 乗算済みでない~dataを~bufferして,処理能を最適化してもヨイ。 ◎ Note: All input images are assumed to be in premultiplied RGBA. User agents may optimize performance by using non-premultiplied data buffering.
~filterを施す演算のうち,~raster効果を成すものは、 1 個~以上の入力~RGBA画像, および ~parameterとして追加的な属性をとり,単独の出力~RGBA画像を生産する。 ◎ All raster effect filtering operations take 1 to N input RGBA images, additional attributes as parameters, and produce a single output RGBA image.
各~原始filterからの~RGBA結果は、[ 色/不透明度 ]値~用に許容-可能な範囲~内に切詰められることになる。 したがって例えば、[ 所与の`原始filter$からの結果 ]における負な[ 色/不透明度 ]値は, 0 に調整されることになる。 ◎ The RGBA result from each filter primitive will be clamped into the allowable ranges for colors and opacity values. Thus, for example, the result from a given filter primitive will have any negative color values or opacity values adjusted up to color/opacity of zero.
各`原始filter$の演算は、 それぞれの `color-interpolation-filters$p ~propの値から決定される色~空間において遂行される。 それとは異なる `color-interpolation$p ~propは、 他の色~演算~用の色~空間を決定する。 これら 2 つの~propの初期~値は異なるので(前者は `linearRGB$v, 後者は `sRGB^v )、 事例によっては,一定の結果を達成するためには(例:~gradient補間と~filterを施す演算とを協調させるとき)、 明示的に,前者を `sRGB$v に, あるいは 後者を `linearRGB^v に設定することも必要yである。 下の例では、 この両~propとも明示的に設定していないので,それぞれの初期~値が適用されることに注意。 ◎ The color space in which a particular filter primitive performs its operations is determined by the value of the property color-interpolation-filters on the given filter primitive. A different property, color-interpolation determines the color space for other color operations. Because these two properties have different initial values (color-interpolation-filters has an initial value of linearRGB whereas color-interpolation has an initial value of sRGB), in some cases to achieve certain results (e.g., when coordinating gradient interpolation with a filtering operation) it will be necessary to explicitly set color-interpolation to linearRGB or color-interpolation-filters to sRGB on particular elements. Note that the examples below do not explicitly set either color-interpolation or color-interpolation-filters, so the initial values for these properties apply to the examples.
`原始filter$による結果の画素は未定義になることもある。 例えば原始filter `feOffset$e は、 画像を右下へズラすので,[ 上端/左端 ]にある画素は未定義なままにされ得る。 これらの事例における未定義な画素は、 `透明な黒$に設定される。 ◎ Sometimes filter primitives result in undefined pixels. For example, filter primitive feOffset can shift an image down and to the right, leaving undefined pixels at the top and left. In these cases, the undefined pixels are set to transparent black.
高品質な描画を供するためには、 すべての原始filterは,機器に依存する座標~空間~内で[ 機器~画素~密度, 利用者~空間の変形n, 拡縮表示 ]を織り込んだ上で,演算するべきである — この空間は、 `演算-時の座標~空間@ と称される。 ~platformに依存しない整列を供するためとして、[ 属性/~prop ]の値は,`~filter座標系$に相対的になることが多い。 ~UAは、 そのような相対的な値を`演算-時の座標~空間$に拡縮するモノトスル。 ◎ To provide high quality rendering, all filter primitives should operate in a device dependent coordinate space, the operating coordinate space, taking device pixel density, user space transformations and zooming into account. To provide a platform independent alignment, attribute and property values are often relative to a coordinate system described by the primitiveUnits attribute. User agents must scale these relative attributes and properties to the operating coordinate space.
注記: 解像度が高い機器~上では、 `~filter座標系$による[ 属性/~prop ]値は,通例的に拡大される必要がある。 ~UAは、 ~platform資源が制限されている下では,原始filterの解像度を抑制してもヨイ。 ◎ Note: On high resolution devices, attribute and property values that are relative to the primitiveUnits usually need to be scaled up. User agents may reduce the resolution of filter primitives on limited platform resources.
注記: [ 原始filter `feConvolveMatrix$e / `光源~要素$ ]の一部の[ 属性や~prop ]の値は、 `~filter座標系$から`演算-時の座標~空間$に対応付けれない。 ◎ Note: Some attribute or property values from the filter primitives feConvolveMatrix and light sources can not be mapped from the coordinate space defined by the primitiveUnits attribute to the operating coordinate space.
9.2. 共通な原始filter属性
次に挙げる `原始filter属性@ は、 すべての原始filterに可用である: ◎ The following filter primitive attributes are available for all filter primitives:
属性定義- `x@aP = "`length-percentage$t"
- `y@aP = "`length-percentage$t"
- 下位領域の[ ~X, ~Y ]座標の最小を与えて、 当の`原始filter$の計算と描画を制約する。 `原始filter下位領域$を見よ。 ◎ The minimum x coordinate for the subregion which restricts calculation and rendering of the given filter primitive. See filter primitive subregion.
- 両~属性とも,`初期~値$は `0%^v とする。 ◎ The initial value for x is 0%.
- ~animate可能。 ◎ Animatable: yes. ◎ y = "<length-percentage>" ◎ The minimum y coordinate for the subregion which restricts calculation and rendering of the given filter primitive. See filter primitive subregion. ◎ The initial value for y is 0%. ◎ Animatable: yes.
- `width@aP = "`length-percentage$t"
- `height@aP = "`length-percentage$t"
- 下位領域の[ 横幅, 縦幅 ]を与えて、 当の`原始filter$の計算と描画を制約する。 `原始filter下位領域$を見よ。 ◎ The width of the subregion which restricts calculation and rendering of the given filter primitive. See filter primitive subregion.
- 0 以下の値は、 当の原始filterの効果を不能化する(すなわち、 結果は`透明な黒$にされた画像になる)。 ◎ A negative or zero value disables the effect of the given filter primitive (i.e., the result is a transparent black image).
- 両~属性とも,`初期~値$は `100%^v とする。 ◎ The initial value for width is 100%.
- ~animate可能。 ◎ Animatable: yes. ◎ height = "<length-percentage>" ◎ The height of the subregion which restricts calculation and rendering of the given filter primitive. See filter primitive subregion. ◎ A negative or zero value must disable the effect of the given filter primitive (i.e., the result is a transparent black image). ◎ The initial value for height is 100%. ◎ Animatable: yes.
- `result@aP = "`filter-primitive-reference@t"
- `filter-primitive-reference$t は `custom-ident$t `CSS3VAL$r であり、 この`原始filter$に名前をアテガう。 給された場合、 この`原始filter$を処理した結果の~graphicsを,同じ `filter$e 要素の中で後続な原始filter上の `in$aP 属性から参照できるようになる。 値が供されない場合、 出力は,次の`原始filter$の中への暗黙的な入力として再利用するために限り可用になる — 次の`原始filter$が,その `in$aP 属性に値を供さないならば。 ◎ <filter-primitive-reference> is an <custom-ident> [CSS3VAL] and an assigned name for this filter primitive. If supplied, then graphics that result from processing this filter primitive can be referenced by an in attribute on a subsequent filter primitive within the same filter element. If no value is provided, the output will only be available for re-use as the implicit input into the next filter primitive if that filter primitive provides no value for its in attribute.
ほとんどの原始filterは、 他の原始filterの出力を入力にとる。 他の原始filterを参照する各種 入力~属性を代表して,次の属性が定義される 【したがって `in2^a 属性なども,同様に定義される】 : ◎ Most filter primitives take other filter primitives as input. The following attribute is representative for all input attributes to reference other filter primitives:
属性定義- `in@aP = "`SourceGraphic$v | `SourceAlpha$v | `BackgroundImage$v | `BackgroundAlpha$v | `FillPaint$v | `StrokePaint$v | `filter-primitive-reference$t"
- 所与の原始filter用の入力を与える。 とり得る値は、 6 種の~keywordのいずれか, または[ `filter$e 要素の中で先行する,ある同胞~原始filter ]の `result$aP 属性~値に合致する文字列。 値が供されていない場合、[ 最初の`原始filter$に対しては `SourceGraphic$v / ~ELSE_ 前の`原始filter$からの結果 ]を入力に利用することになる。 ◎ Identifies input for the given filter primitive. The value can be either one of six keywords or can be a string which matches a previous result attribute value within the same filter element. If no value is provided and this is the first filter primitive, then this filter primitive will use SourceGraphic as its input. If no value is provided and this is a subsequent filter primitive, then this filter primitive will use the result from the previous filter primitive as its input.
- 所与の `filter$e 要素の中で,同じ `result$aP 値が複数~回~現れる場合、 その結果への参照は,[ 先行する`原始filter$のうち,その値を `result$aP 属性にとる, かつ最も近いもの ]を利用することになる。 ◎ If the value for result appears multiple times within a given filter element, then a reference to that result will use the closest preceding filter primitive with the given value for attribute result.
- 結果への前方-参照は許容されない — そのようにした場合、 結果は指定されなかった 【すなわち、`in^aP 値は供されなかった】 かのように扱われることになる。 存在しない結果への参照も、 同様に扱われることになる。 ◎ Forward references to results are not allowed, and will be treated as if no result was specified. ◎ References to non-existent results will be treated as if no result was specified.
-
6 種の~keywordの定義は: ◎ Definitions for the six keywords:
- `SourceGraphic@v
- `filter$e 要素の中への元の入力であった~graphics要素を表現する。 ~raster効果`原始filter$に対しては、 ~graphics要素は,画像~空間において`透明な黒$にされた~rasterの中に~raster化されることになる。 元の~graphicにより触れられなかった画素は、 `透明な黒$のままになる。 画像は、 線型~RGBA画素~内に描画されるように指定される。 この画像の~alpha~channelは,~SVGにより指定される~anti-aliasingがあれば それを捕捉する。 (~rasterは線型なので、 この画像の~alpha~channelは,各~画素の正確な被覆率を表現することになる。) ◎ This keyword represents the graphics elements that were the original input into the filter element. For raster effects filter primitives, the graphics elements will be rasterized into an initially clear RGBA raster in image space. Pixels left untouched by the original graphic will be left clear. The image is specified to be rendered in linear RGBA pixels. The alpha channel of this image captures any anti-aliasing specified by SVG. (Since the raster is linear, the alpha channel of this image will represent the exact percent coverage of each pixel.)
- `SourceAlpha@v
- ~alpha~channelのみが利用されることを除き, `SourceGraphic$v と同じになる。 入力~画像は[ ~RGB~channelには暗黙的な黒~色~値, ~alpha~channelは `SourceGraphic$v と同じ ]にされた~RGBA画像になる。 ◎ This keyword represents the graphics elements that were the original input into the filter element. SourceAlpha has all of the same rules as SourceGraphic except that only the alpha channel is used. The input image is an RGBA image consisting of implicitly black color values for the RGB channels, but whose alpha channel is the same as SourceGraphic.
- 注記: この値が利用された場合、 実装によっては,~alpha~channelを抽出するために ~graphics要素を~raster化する必要が生じるかもしれない。 ◎ Note: If this option is used, then some implementations might need to rasterize the graphics elements in order to extract the alpha channel.
- `BackgroundImage@v
- 現在の`隔離~group$により定義される[ `filter$e 要素が呼出された時点での,`~filter領域$の背後にある`後景$ ]を表現する。 `isolation$p ~propを見よ。 `COMPOSITING-1$r ◎ This keyword represents the back drop defined by the current isolation group behind the filter region at the time that the filter element was invoked. See isolation property [COMPOSITING-1].
- `BackgroundAlpha@v
- ~alpha~channelのみが利用されることを除き, `BackgroundImage$v と同じになる。 [ `SourceAlpha$v 値, `isolation$p ~prop ]については、 `COMPOSITING-1$r を見よ。 ◎ Same as BackgroundImage except only the alpha channel is used. See SourceAlpha and the isolation property [COMPOSITING-1].
- `FillPaint@v
- ~filter効果が適用される要素の `fill$p ~propの値を表現する。 `FillPaint$v 画像は、 概念的に無限な拡がりである。 この画像はどこでも不透明にされることが多いが、 “塗り” 自体に~alphaがある場合には,そうならない — それ自体に不透明ではない部位が含まれる~gradientや~patternの事例など。 `fill$p が塗り~serverを参照する場合、 その塗り~serverの座標~空間は,~filterされる~obj用に定義された座標~空間になる。 例: 塗り~serverが~objの `objectBoundingBox$vPU を利用するよう要求する場合、 ~filterされる~objの`限界~box$が,塗り~server用の基準~sizeを定義する。 塗り~serverが `userSpaceOnUse$vPU を利用するよう要求する場合、 ~filterされる~objの`局所~座標系$に最も近い~viewportが,塗り~server用の基準~sizeを定義する。 ◎ This keyword represents the value of the fill property on the target element for the filter effect. The FillPaint image has conceptually infinite extent. Frequently this image is opaque everywhere, but it might not be if the "paint" itself has alpha, as in the case of a gradient or pattern which itself includes transparent or semi-transparent parts. If fill references a paint server, then the coordinate space of the paint server is the coordinate space defined for the filtered object. E.g if the paint server requires to use the objectBoundingBox of the object, the object bounding box of the filtered object defines the reference size of the paint server. If the paint server requires to use the userSpaceOnUse, the nearest viewport in the local coordinate system of the filtered object defines the reference size of the paint server.
- `StrokePaint@v
- ~filter効果が適用される要素の `stroke$p ~propの値を表現する。 `StrokePaint$v 画像は、 概念的に無限な拡がりである。 詳細は上の `FillPaint$v を見よ。 ◎ This keyword represents the value of the stroke property on the target element for the filter effect. The StrokePaint image has conceptually infinite extent. See FillPaint above for more details.
- ~animate可能。 ◎ Animatable: yes.
9.3. 原始filter~tree
0 個~以上の原始filter入力を伴う原始filterたちは、 共に,ある~filter連鎖に~linkできる。 ~filter連鎖の例として、 複数の `filter-function$t を伴う `filter-value-list$t が成す原始filter表現が挙げられる。 どの原始filterも,より前に現れる原始filterの結果を入力にとる。 ◎ Filter primitives with no or one filter primitive input can be linked together to a filter chain. E.g. the filter primitive representation of a <filter-value-list> with two or more <filter-function>s is an example of a filter chain. Every filter primitive takes the result of the previous filter primitive as input.
単純な、 一連の原始filterを子に持つ `filter$e 要素の例: ◎ A simple example of a filter element with its filter primitive children.
<filter id="filter"> <feColorMatrix type="hueRotate" values="45"/> <feOffset dx="10" dy="10"/> <feGaussianBlur stdDeviation="3"/> </filter>
[ `feColorMatrix$e, `feOffset$e, `feGaussianBlur$e ]は、 ~filter連鎖を作成する。 ◎ feColorMatrix, feOffset and feGaussianBlur create a filter chain.
`feColorMatrix$e は、 `SourceGraphic$v を入力にとる。 その結果は `feOffset$e の入力になり,その結果は `feGaussianBlur$e の入力になる。 ◎ feColorMatrix takes SourceGraphic as input. The result is the input of feOffset with its result being the input of feGaussianBlur.
一部の原始filterは、 `in$aP, `result$aP 属性の利用により,複数の原始filterを入力にとり得る。 複階的な~filter構造を成すように,複数の原始filterを組合せることもアリである。 原始filterは前方-参照できない制約があることに因り,どの~filter構造も `原始filter~tree@ と呼ばれる~treeとして表現できる。 原始filter~treeの根~原始filterは、 その原始filter~treeを成している原始filterのうち,最後に現れるものになる。 ◎ Some filter primitives may have more than one filter primitive inputs. With the use of the in and result attributes it is possible to combine multiple filter primitives to a complex filter structure. Due to the non-forward reference restriction of filter primitives, every filter structure can be represented as a tree, the filter primitive tree. The root filter primitive of the filter primitive tree is the most subsequential primitive of filter elements filter primitive children.
~filter連鎖は、 原始filter~treeでも表現できる~filter構造なので,原始filter~treeとも称される。 ◎ A filter chain is one possible filter structure that can also be represented in a filter primitive tree. Therefore, filter chains are referred to as filter primitive trees onwards as well.
`filter$e 要素は、 複数の原始filter~treeからなることもある。 原始filter~treeのうち,その根~原始filterは `filter$e 要素の最後の子~原始filterになるものは、 `首~原始filter~tree@ と呼ばれる。 ◎ A filter element may have one or more filter primitive trees. The filter primitive tree whose subsequent filter primitive is the last filter primitive child of the filter elements is the primary filter primitive tree.
首~原始filter~treeのみが~filter処理-に寄与する。 実装は、 他の原始filter~treeをすべて無視することにしてもヨイ。 ◎ Only the primary filter primitive tree contributes to the filter process. Implementations may chose to ignore all other possible filter primitive trees.
原始filter~treeを有さない `filter$e 要素に対しては、 その~filterの適用-先の要素は,描画されなくなる。 【~filterが適用されなくなるのみならず。】 ◎ If a filter element has no filter primitive tree then the element the filter applies to does not get rendered.
複数の原始filter~treeを有する例:
<filter id="filter"> <-- 最初の原始filter~tree。 ~filter処理-においては無視される。 ◎ The first filter primitive tree. Ignored for filter process. --> <feColorMatrix type="hueRotate" values="45"/> <feOffset dx="10" dy="10"/> <feGaussianBlur stdDeviation="3"/> <-- 首~原始filter~tree。 ◎ The primary filter primitive tree. --> <feFlood flood-color="green" result="flood"/> <feComposite operator="in" in="SourceAlpha" in2="flood"/> </filter>
上の~filterには、 2 つの原始filter~treeがある: ◎ The above filter has 2 filter primitive trees with the filter primitives:
- 次の原始filterを伴うもの ⇒# `feColorMatrix$e, `feOffset$e, `feGaussianBlur$e (根~原始filter) ◎ feColorMatrix, feOffset and feGaussianBlur (with feGaussianBlur being the root filter primitive of the tree) as well as
- 次の原始filterを伴うもの ⇒# `feFlood$e, `feComposite$e (根~原始filter) ◎ feFlood and feComposite (with feComposite as the root filter primitive of the tree).
2 つの原始filter~treeは、 接続されていない。 2 個目の首~原始filter~treeのみが~filter処理-に寄与する。 実装は、 1 個目の~treeを無視できる。 ◎ Both filter primitive trees are not connected. Only the 2nd, the primary filter primitive tree contributes to the filter process. The first tree can get ignored by implementations.
9.4. 原始filter下位領域
どの`原始filter$にも、 その計算と描画を制約する `原始filter下位領域@ が定義される: ◎ All filter primitives have attributes x, y, width and height which together identify a filter primitive subregion which restricts calculation and rendering of the given filter primitive.\
- それは、 `原始filter$の[ `x$aP, `y$aP, `width$aP, `height$aP ]属性から定められる。 これらの属性は、 他の`原始filter$の[ 座標, 長さ ]属性と同じく,`~filter座標系$における値を表現する。 ◎ The x, y, width and height attributes are defined according to the same rules as other filter primitives coordinate and length attributes and thus represent values in the coordinate system established by attribute primitiveUnits on the filter element.
- 属性が指定されなかった場合の既定の下位領域は、 次項に該当するものを除き,参照~先~node【当の原始filterの入力を与える他の原始filter】 用に定義された下位領域すべてが最も緊密に収まる限界~boxから定まる。 【一部の属性だけ指定された場合、指定された属性とこの限界~boxの混成になる。】 ◎ x, y, width and height default to the union (i.e., tightest fitting bounding box) of the subregions defined for all referenced nodes.\
-
次に該当する`原始filter$に対しては、 既定の下位領域は `0%^v, `0%^v, `100%^v, `100%^v になる:
- 参照~先~nodeが無いもの(例: `feImage$e / `feTurbulence$e 用)
- いずれかの参照~先~nodeが,標準の入力( `SourceGraphic$v / `SourceAlpha$v / `BackgroundImage$v / `BackgroundAlpha$v / `FillPaint$v / `StrokePaint$v )をとるもの
- `feTile$e (これは、 参照~先~nodeを[ ~X, ~Y ]両方向に反復的に複写して,通例的により大きい結果を生産するので、 特別である)。
これらに対する百分率は、 特例として `~filter領域$の寸法に相対的になり,既定の`原始filter下位領域$は`~filter領域$に等しくなる。
◎ If there are no referenced nodes (e.g., for feImage or feTurbulence), or one or more of the referenced nodes is a standard input (one of SourceGraphic, SourceAlpha, BackgroundImage, BackgroundAlpha, FillPaint or StrokePaint), or for feTile (which is special because its principal function is to replicate the referenced node in X and Y and thereby produce a usually larger result), the default subregion is 0%, 0%, 100%, 100%, where as a special-case the percentages are relative to the dimensions of the filter region, thus making the default filter primitive subregion equal to the filter region.
`原始filter下位領域$の[ 横幅/縦幅 ]が 0 以下の場合、 当の原始filterによる効果は不能化される。 【不能化-の意味は `width$aP に述べられている。】 ◎ If the filter primitive subregion has a negative or zero width or height, the effect of the filter primitive is disabled.
原始filterの入力~画像に対しては、 `~filter領域$を超える部分は切取られる。 ◎ The filter region acts as a hard clip clipping rectangle on the filter primitive’s input image(s).
原始filterの結果に対しては、 `原始filter下位領域$を超える部分は切取られる。 ◎ The filter primitive subregion acts as a hard clip clipping rectangle on the filter primitive result.
すべての中間~画像は、 `原始filter下位領域$と`~filter領域$の交差域を超過しないように 定義される。 [ `~filter領域$ /原始filter下位領域 ] %R は、[ 【 %R に関与する】どの中間~画像も, %R に一部でも交差する画素すべてを収容するに十分な大きさになる ]ように設定しておかれる。 ◎ All intermediate offscreens are defined to not exceed the intersection of the filter primitive subregion with the filter region. The filter region and any of the filter primitive subregions are to be set up such that all offscreens are made big enough to accommodate any pixels which even partly intersect with either the filter region or the filter primitive subregions.
`feTile$e は、 参照~先の原始filterの`原始filter下位領域$に基づいて ~tileたちを縫合して,自前の`原始filter下位領域$を埋める。 ◎ feTile references a previous filter primitive and then stitches the tiles together based on the filter primitive subregion of the referenced filter primitive in order to fill its own filter primitive subregion.
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" > <defs> <filter id="flood" x="0" y="0" width="100%" height="100%" primitiveUnits="objectBoundingBox" > <feFlood x="25%" y="25%" width="50%" height="50%" flood-color="green" flood-opacity="0.75" /> </filter> <filter id="blend" primitiveUnits="objectBoundingBox" > <feBlend x="25%" y="25%" width="50%" height="50%" in2="SourceGraphic" mode="multiply" /> </filter> <filter id="merge" primitiveUnits="objectBoundingBox" > <feMerge x="25%" y="25%" width="50%" height="50%" > <feMergeNode in="SourceGraphic"/> <feMergeNode in="FillPaint"/> </feMerge> </filter> </defs> <g fill="none" stroke="blue" stroke-width="4"> <rect width="200" height="200"/> <line x2="200" y2="200"/> <line x1="200" y2="200"/> </g> <circle fill="green" filter="url(#flood)" cx="100" cy="100" r="90" /> <g transform="translate(200 0)"> <g fill="none" stroke="blue" stroke-width="4"> <rect width="200" height="200"/> <line x2="200" y2="200"/> <line x1="200" y2="200"/> </g> <circle fill="green" filter="url(#blend)" cx="100" cy="100" r="90" /> </g> <g transform="translate(0 200)"> <g fill="none" stroke="blue" stroke-width="4"> <rect width="200" height="200"/> <line x2="200" y2="200"/> <line x1="200" y2="200"/> </g> <circle fill="green" fill-opacity="0.5" filter="url(#merge)" cx="100" cy="100" r="90" /> </g> </svg>`filtersubregion00.svg$ex
上の例を成す 3 個の矩形~それぞれには、 斜め十字( 2 本の `line^e 要素)と真円( `circle^e 要素)がある。 各 真円には,互いに異なる~filterが適用されるが、 `原始filter下位領域$はどれも同じになる。 各~filterの出力は,`原始filter下位領域$に制限されるべきなので、 `原始filter下位領域$を成す矩形だけが見え, 真円には見えなくなるべきである。 ◎ In the example above there are three rectangles that each have a cross and a circle in them. The circle element in each one has a different filter applied, but with the same filter primitive subregion. The filter output should be limited to the filter primitive subregion so you should never see the circles themselves, just the rectangles that make up the filter primitive subregion.
- 左上の矩形は `feFlood$e を示す。 その `flood-opacity$p `75%^v にされているので、 斜め十字は,緑色~矩形を透かして可視になるべきである。 ◎ The upper left rectangle shows an feFlood with flood-opacity: 75% so the cross should be visible through the green rect in the middle.
- 左下の矩形は[ `SourceGraphic$v と `FillPaint$v ]を併合する `feMerge$e を示す。 真円の `fill-opacity^p は `0.5^v であり,半~透明なので、 この斜め十字も,緑色~矩形を透かして可視になる。 ◎ The lower left rectangle shows an feMerge that merges SourceGraphic with FillPaint. Since the circle has fill-opacity="0.5" it will also be transparent so that the cross is visible through the green rect in the middle.
- 右上の矩形は[ `mode="multiply"^c にされた `feBlend$e ]を示す。 この事例における真円は全~不透明になるので、 矩形は暗い緑色になり,斜め十字は可視にならないべきである。 ◎ The upper right rectangle shows an feBlend that has mode="multiply". 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.
9.5. 原始filter `feBlend^e
◎要素名 `feBlend@e ◎分類 `原始filter$ ◎内容 任意個数, 任意順序の,次に挙げる要素 ⇒# `記述的~要素$, `animate$e, `script$e, `set$e ◎属性 `中核~属性$, `呈示~属性$, `原始filter属性$, `class$a, `style$a, `in$aP, `in2$aB, `mode$aB ◎界面 `SVGFEBlendElement$I ◎表終この~filterは、 共通的に利用される画像処理~software混色~modeを利用して, 2 つの~objを共に混色する。 それは、 2 個の入力~画像に対する画素ごとに組合nを遂行する( `COMPOSITING-1$r を見よ。) ◎ This filter blends two objects together using commonly used imaging software blending modes. It performs a pixel-wise combination of two input images. (See [COMPOSITING-1].)
属性定義- `mode@aB = "`blend-mode$t"
- `COMPOSITING-1$r にて定義されるいずれかの混色-~modeを与える: 入力 `in$aP が ~source %C/s を表現し, 入力 `in2$aB が `後景$ %C/b を表現する。 [ %C/s と %C/b ]を混色した結果が、 この原始filterの出力になる。 ◎ One of the blend modes defined by “Compositing and Blending Level 1” [COMPOSITING-1] with the input in representing the source Cs and the second input in2 representing the backdrop Cb. The output of this filter primitive Cm is the result of blending Cs with Cb.
- `初期~値$は `normal$v とする。 ◎ The initial value for mode is normal.
- ~animate可能。 ◎ Animatable: yes.
- `no-composite@aB = "`no-composite@v"
- 要素が この属性を有さない場合、 実装は,要素の `mode$aB に指定された混色-~modeに~alpha組成-法 — すなわち, `source-over$v 組成-演算子を組合せる — を適用するモノトスル。 有する場合、 この~alpha組成-法は適用しないモノトスル。 これらの “混合” 公式については `混色@~COMPOSITING#blending$ `COMPOSITING-1$r を見よ。 ◎ If the no-composite attribute is present, the specified blend mode must not apply alpha compositing. See Blending [COMPOSITING-1] for the "mixing" formula without compositing. Otherwise, implementations must combine the blend mode specified by mode with the Source Over composite operator. See Blending [COMPOSITING-1] for the "mixing" formula with compositing.
- 注記: この属性は、 ~SVG 1.1 における `feBlend$e 要素~定義への追加である。 `no-composite$aB に意味されているのは、 指定されたなら,入力~sourceを[ ~filterされる~objの`後景$ ]に混色するときに(例えば `BackgroundImage$v 原始filterを利用して) “二重に組成される” 効果を避けることである。 大多数の利用事例では、 作者が `no-composite$aB 属性を指定する必要はないであろう。 ◎ Note: This attribute is an addition to the feBlend element defintion in SVG 1.1. no-composite, when specified, is meant to avoid "double-compositing" effects when blending an input source with the backdrop of the filtered object (E.g. using the BackgroundImage filter primitive). For the majority of use cases authors will not need to specify the no-composite attribute.
- ~animate不可。 ◎ Animatable: no.
- `in2@aB
- とり得る値は `in$aP 属性を見よ。 混色~演算に対する 2 個目の入力~画像を与える。 ◎ in2 = "(see in attribute)" ◎ The second input image to the blending operation.
- ~animate可能。 ◎ Animatable: yes.
~alpha組成-法を伴う `normal$v 混色-~modeは、 `feComposite$e 原始filter上の `operator="over"^c と等価になる。 それは、 `feMerge$e により利用される混色~methodに合致する。 それはまた、 `単純~alpha組成-法$(~SVGにおいては,~filter効果の外側にある どの組成-法にも利用される)に合致する。 ◎ The normal blend mode with alpha compositing is equivalent to operator="over" on the feComposite filter primitive, matches the blending method used by feMerge and matches the simple alpha compositing technique used in SVG for all compositing outside of filter effects.
<svg width="5cm" height="5cm" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" > <title> 各種 `feBlend^e ~modeの例 ◎ Example feBlend - Examples of feBlend modes </title> <desc> ~gradientに混色される 5 種の~text文字列 — それぞれが 5 種の混色~modeに対応する ◎ Five text strings blended into a gradient, with one text string for each of the five feBlend modes. </desc> <defs> <linearGradient id="MyGradient" gradientUnits="userSpaceOnUse" x1="100" y1="0" x2="300" y2="0" > <stop offset="0" stop-color="#000000" /> <stop offset=".33" stop-color="#ffffff" /> <stop offset=".67" stop-color="#ff0000" /> <stop offset="1" stop-color="#808080" /> </linearGradient> <filter id="Normal"> <feBlend mode="normal" in2="BackgroundImage" in="SourceGraphic"/> </filter> <filter id="Multiply"> <feBlend mode="multiply" in2="BackgroundImage" in="SourceGraphic"/> </filter> <filter id="Screen"> <feBlend mode="screen" in2="BackgroundImage" in="SourceGraphic"/> </filter> <filter id="Darken"> <feBlend mode="darken" in2="BackgroundImage" in="SourceGraphic"/> </filter> <filter id="Lighten"> <feBlend mode="lighten" in2="BackgroundImage" in="SourceGraphic"/> </filter> </defs> <rect fill="none" stroke="blue" x="1" y="1" width="498" height="498"/> <g isolation="isolate" > <rect x="100" y="20" width="300" height="460" fill="url(#MyGradient)" /> <g font-family="Verdana" font-size="75" fill="#888888" fill-opacity=".6" > <text x="50" y="90" filter="url(#Normal)" >Normal</text> <text x="50" y="180" filter="url(#Multiply)" >Multiply</text> <text x="50" y="270" filter="url(#Screen)" >Screen</text> <text x="50" y="360" filter="url(#Darken)" >Darken</text> <text x="50" y="450" filter="url(#Lighten)" >Lighten</text> </g> </g> </svg>`feBlend.svg$ex
9.6. 原始filter `feColorMatrix^e
◎要素名 `feColorMatrix@e ◎分類 `原始filter$ ◎内容 任意個数, 任意順序の,次に挙げる要素 ⇒# `記述的~要素$, `animate$e, `script$e, `set$e ◎属性 `中核~属性$, `呈示~属性$, `原始filter属性$, `class$a, `style$a, `in$aP, `type$aCM, `values$aCM ◎界面 `SVGFEColorMatrixElement$I ◎表終この~filterは、 入力~graphics上の各~画素に対し,その[ 色, ~alphaを成す~RGBA値 %S ]に,次のような行列を適用して、 新たな[ 色, ~alphaを成す~RGBA値 %D ]を生産する: ◎ This filter applies a matrix transformation: ◎ on the RGBA color and alpha values of every pixel on the input graphics to produce a result with a new set of RGBA color and alpha values.
計算は、 乗算済みでない色~値~上で遂行される。 ◎ The calculations are performed on non-premultiplied color values.
属性定義- `type@aCM = "`matrix$v | `saturate$v | `hueRotate$v | `luminanceToAlpha$v"
- 行列~演算の種別を指示する。 ~keyword `matrix$v は、 5×4 行列を成す値が全部的に供されることを指示する。 他の~keywordは、[ 共通的に利用される色~演算を,完全な行列を指定せずに遂行-可能にする ]ための,便利な略記を表現する。 ◎ Indicates the type of matrix operation. The keyword matrix indicates that a full 5x4 matrix of values will be provided. The other keywords represent convenience shortcuts to allow commonly used color operations to be performed without specifying a complete matrix.
- `初期~値$は `matrix$v とする。 ◎ The initial value for type is matrix.
- ~animate可能。 ◎ Animatable: yes.
- `values@aCM = `list-of-numbers$t
-
`values$aCM の内容は `type$aCM 属性の値に依存する: ◎ The contents of values depends on the value of attribute type:
- `type$aCM="`matrix@v"
-
`values$aCM は、 5×4 行列を成す 20 個の値をとる。 例えば単位行列は、 次でも表出できる: ◎ For type="matrix", values is a list of 20 matrix values (a00 a01 a02 a03 a04 a10 a11 ... a34), separated by whitespace and/or a comma. For example, the identity matrix could be expressed as:
type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"
- `type$aCM="`saturate@v"
-
`values$aCM は, 1 個の実数~値をとる。 %s をその値, %t ~EQ ( 1 − %s ) とするとき、 次の行列による演算と等価になる: ◎ For type="saturate", values is a single real number value. A saturate operation is equivalent to the following matrix operation:
`feColorMatrix-saturate^dgm - 注記: 値 `0^v により生産される~filter結果は、 彩度なし(~grayscale)になる一方で、 値 `1^v は~filter入力~画像を変更せずに通過させる。 0 〜 1 の範囲~外の値は、 ~filter入力~画像を `under- or oversaturate^en する†。 【† 意味的には“彩度を下げ過ぎる/上げ過ぎる” になるが、範囲~外の値でも,そのまま数式に渡されることを述べていると見受けられる(その結果、0 未満の値に対しては,彩度なしでなくなる)。】 ◎ Note: A value of 0 produces a fully desaturated (grayscale) filter result, while a value of 1 passes the filter input image through unchanged. Values outside the 0..1 range under- or oversaturates the filter input image respectively.
- 注記: 輝度( `luminance^en )係数の精度は、 以前の仕様~text `Cmam$r から増やされた。 ◎ Note: The precision of the luminance coefficients increased in comparison to previous specification texts [Cmam].
- `type$aCM="`hueRotate@v"
-
`values$aCM は 1 個の実数~値(度数)。 その値を %hueRotate とするとき、 次の行列による演算と等価になる: ◎ For type="hueRotate", values is a single one real number value (degrees). A hueRotate operation is equivalent to the following matrix operation:
`feColorMatrix-hueRotate-1^dgmここで、 行列を成す各~項 — 左上部分を占める 3×3 行列 — は、 次の式で計算される: ◎ where the terms a00, a01, etc. are calculated as follows:
%M1 ~PLUS `cos^op( %hueRotate ) ~MUL %M2 ~PLUS `sin^op( %hueRotate ) ~MUL %M3%M1 ~EQ `feColorMatrix-hueRotate-2b^dgm%M2 ~EQ `feColorMatrix-hueRotate-2c^dgm%M3 ~EQ `feColorMatrix-hueRotate-2d^dgm例えば,この色相~行列の左上隅の項は、 次の式で与えられる: ◎ Thus, the upper left term of the hue matrix turns out to be:
%m/00 ~EQ 0.2127 ~PLUS `cos^op( %hueRotate ) ~MUL 0.7874 ~MINUS `sin^op( %hueRotate ) ~MUL 0.2127 - `type$aCM="`luminanceToAlpha@v"
-
`values$aCM は適用-可能でない。 次の行列による演算と等価になる: ◎ For type="luminanceToAlpha", values is not applicable. A luminanceToAlpha operation is equivalent to the following matrix operation:
`feColorMatrix-luminanceToAlpha-3^dgm
- `初期~値$は、 単位行列を表現する値になる — すなわち, `type$aCM に応じて ⇒# `matrix^v ならば `1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0^v / `saturate^v ならば `1^v / `hueRotate^v ならば `0^v ◎ The initial value for values ◎ type="matrix" • defaults to the identity matrix ◎ type="saturate" • defaults to the value 1 ◎ type="hueRotate" • defaults to the value 0 which results in the identity matrix.
- `values$aCM による~listを成す~entryの個数が `type$aCM に要求される~entryの個数に合致しない場合、 この原始filterは`通過~filter$として動作する。 ◎ If the number of entries in the values list does not match the required number of entries by the type, the filter primitive acts as a pass through filter.
- ~animate可能。 ◎ Animatable: yes.
<svg width="8cm" height="5cm" viewBox="0 0 800 500" xmlns="http://www.w3.org/2000/svg" > <title> `feColorMatrix^e 演算の例 ◎ Example feColorMatrix - Examples of feColorMatrix operations </title> <desc> `feColorMatrix^e の効果を示す 5 種の~text文字列: 基準となる~filterなしの~text文字列, `matrix$v, `saturate$v, `hueRotate$v, `luminanceToAlpha$v の利用。 ◎ Five text strings showing the effects of feColorMatrix: an unfiltered text string acting as a reference, use of the feColorMatrix matrix option to convert to grayscale, use of the feColorMatrix saturate option, use of the feColorMatrix hueRotate option, and use of the feColorMatrix luminanceToAlpha option. </desc> <defs> <linearGradient id="MyGradient" gradientUnits="userSpaceOnUse" x1="100" y1="0" x2="500" y2="0" > <stop offset="0" stop-color="#ff00ff" /> <stop offset=".33" stop-color="#88ff88" /> <stop offset=".67" stop-color="#2020ff" /> <stop offset="1" stop-color="#d00000" /> </linearGradient> <filter id="Matrix" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%" > <feColorMatrix type="matrix" in="SourceGraphic" values=".33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0" /> </filter> <filter id="Saturate40" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%" > <feColorMatrix type="saturate" in="SourceGraphic" values="0.4" /> </filter> <filter id="HueRotate90" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%" > <feColorMatrix type="hueRotate" in="SourceGraphic" values="90" /> </filter> <filter id="LuminanceToAlpha" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%" > <feColorMatrix type="luminanceToAlpha" in="SourceGraphic" result="a" /> <feComposite in="SourceGraphic" in2="a" operator="in" /> </filter> </defs> <rect fill="none" stroke="blue" x="1" y="1" width="798" height="498" /> <g font-family="Verdana" font-size="75" font-weight="bold" fill="url(#MyGradient)" > <rect x="100" y="0" width="500" height="20" /> <text x="100" y="90">Unfiltered</text> <text x="100" y="190" filter="url(#Matrix)" >Matrix</text> <text x="100" y="290" filter="url(#Saturate40)" >Saturate</text> <text x="100" y="390" filter="url(#HueRotate90)" >HueRotate</text> <text x="100" y="490" filter="url(#LuminanceToAlpha)" >Luminance</text> </g> </svg>`feColorMatrix.svg$ex
9.7. 原始filter `feComponentTransfer^e
◎要素名 `feComponentTransfer@e ◎分類 `原始filter$ ◎内容 任意個数, 任意順序の,次に挙げる要素 ⇒# `記述的~要素$, `feFuncR$e, `feFuncG$e, `feFuncB$e, `feFuncA$e, `script$e ◎属性 `中核~属性$, `呈示~属性$, `原始filter属性$, `class$a, `style$a, `in$aP ◎界面 `SVGFEComponentTransferElement$I ◎表終この原始filterは、 次に挙げる様な演算を可能にする ⇒# 明るさ調整, ~contrast調整, ホワイトバランス( `color balance^en ), 量子化( `thresholding^en ) ◎ ↓
`feComponentTransfer$e 要素は、 入力~graphicを成す各~画素を,その各[ ~R, ~G, ~B, ~A ]~channel成分ごとに, `伝達t関数~要素@ と呼ばれる 対応する子~要素 — `feFuncR$e, `feFuncG$e, `feFuncB$e, `feFuncA$e — で写像する。 この計算は、 乗算済みでない色~値~上で遂行される。 ◎ This filter primitive performs component-wise remapping of data as follows: ◎ R' = feFuncR( R ) G' = feFuncG( G ) B' = feFuncB( B ) A' = feFuncA( A ) ◎ for every pixel. It allows operations like brightness adjustment, contrast adjustment, color balance or thresholding. ◎ The calculations are performed on non-premultiplied color values. ◎ The child elements of a feComponentTransfer element specify the transfer functions for the four channels: • feFuncR - transfer function for the red component of the input graphic • feFuncG - transfer function for the green component of the input graphic • feFuncB - transfer function for the blue component of the input graphic • feFuncA - transfer function for the alpha component of the input graphic ◎ The set of feFuncR, feFuncG, feFuncB, feFuncA elements are also called transfer function elements.
`feComponentTransfer$e 要素の処理には、 次の規則を適用するモノトスル: ◎ The following rules apply to the processing of the feComponentTransfer element:
- 同じ種類の`伝達t関数~要素$が複数個ある場合、 最後のものを利用する。 ◎ If more than one transfer function element of the same kind is specified, the last occurrence is to be used.
- 未指定な`伝達t関数~要素$については、[ `type$aCT 属性が `identity$v に設定されたそれ ]があるかのように処理する。 ◎ If any of the transfer function elements are unspecified, the feComponentTransfer must be processed as if those transfer function elements were specified with their type attributes set to identity.
9.7.1〜4. 伝達t関数 `feFuncR^e, `feFuncG^e, `feFuncB^e, `feFuncA^e
【この訳では、原文のこれらの要素 節を一括して述べる。】 ◎要素名 `feFuncR@e, `feFuncG@e, `feFuncB@e, `feFuncA@e ◎分類 `伝達t関数~要素$ ◎内容 任意個数, 任意順序の,次に挙げる要素 ⇒# `記述的~要素$, `animate$e, `script$e, `set$e ◎属性 `中核~属性$, `伝達t関数~要素~属性$ ◎界面 `SVGFEFuncRElement$I, `SVGFEFuncGElement$I, `SVGFEFuncBElement$I, `SVGFEFuncAElement$I ◎表終以下に挙げる属性は、 `伝達t関数~要素~属性@ とも称され,`伝達t関数~要素$に適用される: ◎ The attributes below are the transfer function element attributes, which apply to the transfer function elements.
属性定義- `type@aCT = "`identity$v | `table$v | `discrete$v | `linear$v | `gamma$v"
- 成分~伝達t関数の種別を指示する。 関数の種別は、 他の属性の適用能を決定する。 ◎ Indicates the type of component transfer function. The type of function determines the applicability of the other attributes.
-
以下における %C は 初期~成分(例: `feFuncR$e ), %D は 写像された結果の成分を表し、 両者とも閉区間 [0,1] 内にあるとする 【結果の %D は切詰められることになる】。 伝達t関数は、 値に応じて,次で与えられる: ◎ In the following, C is the initial component (e.g., feFuncR), C' is the remapped component; both in the closed interval [0,1].
- `identity@v ◎ For identity:
- %D = %C ◎ C' = C
- `table@v ◎ For table,\
- `tableValues$aCT 属性で与えられる値の~list %V を成す ( %n ~PLUS 1 ) 個の値の合間を線型に補間することにより定義される — それらは、[ ~sizeが均等な %n 個の補間~領域 ]の[ 始端, 終端 ]値を指定する。 ◎ the function is defined by linear interpolation between values given in the attribute tableValues. The table has n+1 values (i.e., v0 to vn) specifying the start and end values for n evenly sized interpolation regions.\
-
補間には次の公式を利用する:
%D = %V[ %k ] ~PLUS (%C ~MUL %n ~MINUS %k ) ~MUL (%V[ %k ~PLUS 1 ] ~MINUS %V[ %k ] ); %k ~EQ `floor^op( %C ~MUL %n )◎ Interpolations use the following formula: ◎ For a value C < 1 find k such that: • k/n <= C < (k+1)/n ◎ The result C' is given by: • C' = vk + (C - k/n)*n * (vk+1 - vk)
- (特に, %C ~EQ 1 ならば %D ~EQ %V[ %n ] になる。) ◎ If C = 1 then: • C' = vn.
- `discrete@v ◎ For discrete,\
-
`tableValues$aCT 属性が供する[ %n 個の値からなる~list %V ]から定まる, %n 段からなる階段~関数により定義される:
- %D ~EQ %V[ `floor^op( %C ~MUL %n ) ] ( %C ~LT 1 の場合)
- %D ~EQ %V[ %n ~MINUS 1 ] ( %C ~EQ 1 の場合)
- `linear@v ◎ For linear,\
- 次の線型~等式により定義される ⇒ %D = `slope$aCT ~MUL %C ~PLUS `intercept$aCT ◎ the function is defined by the following linear equation: • C' = slope * C + intercept
- `gamma@v ◎ For gamma,\
-
次の指数的~関数により定義される:
%D = `amplitude$aCT ~MUL `pow^op(%C, `exponent$aCT) ~PLUS `offset$aCT◎ the function is defined by the following exponential function: • C' = amplitude * pow(C, exponent) + offset
- `初期~値$は `identity$v とする。 ◎ The initial value for type is identity.
- ~animate可能。 ◎ Animatable: yes.
- `tableValues@aCT = `list-of-numbers$t
- `type$aCT="`table$v" のときの補間~用の~dataを, ( %n ~PLUS 1 ) 個の `number$t が成す~listとして与える。 空~listによる結果は、 `identity$v 伝達t関数になる。 ◎ When type="table", the list of <number> s v0,v1,...vn, separated by white space and/or a comma, which define the lookup table. An empty list results in an identity transfer function.
- この属性が指定されていない場合の効果は、 空~listが供されたかのようになる。 ◎ If the attribute is not specified, then the effect is as if an empty list were provided.
- ~animate可能。 ◎ Animatable: yes.
- `slope@aCT = "`number$t"
- `type$aCT="`linear$v" のときの線型~関数の斜度を与える。 ◎ When type="linear", the slope of the linear function.
- `初期~値$は `1^v とする。 ◎ The initial value for slope is 1.
- ~animate可能。 ◎ Animatable: yes.
- `intercept@aCT = "`number$t"
- `type$aCT="`linear$v" のときの線型~関数の切片を与える。 ◎ When type="linear", the intercept of the linear function.
- `初期~値$は `0^v とする。 ◎ The initial value for intercept is 0.
- ~animate可能。 ◎ Animatable: yes.
- `amplitude@aCT = "`number$t"
- `type$aCT="`gamma$v" のときの~gamma関数の増幅率を与える。 ◎ When type="gamma", the amplitude of the gamma function.
- `初期~値$は `1^v とする。 ◎ The initial value for amplitude is 1.
- ~animate可能。 ◎ Animatable: yes.
- `exponent@aCT = "`number$t"
- `type$aCT="`gamma$v" のときの~gamma関数の指数を与える。 ◎ When type="gamma", the exponent of the gamma function.
- `初期~値$は `1^v とする。 ◎ The initial value for exponent is 1.
- ~animate可能。 ◎ Animatable: yes.
- `offset@aCT = "`number$t"
- `type$aCT="`gamma$v" のときの~offset関数の指数を与える。 ◎ When type="gamma", the offset of the gamma function.
- `初期~値$は `0^v とする。 ◎ The initial value for offset is 0.
- ~animate可能。 ◎ Animatable: yes.
<svg width="8cm" height="4cm" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg" > <title> 各種 `feComponentTransfer^e 演算の例 ◎ Example feComponentTransfer - Examples of feComponentTransfer operations </title> <desc> ~text文字列に対する `feComponentTransfer^e による 4 種の効果 — 基準として動作する `identity$v 関数, および `table$v, `linear$v, `gamma$v — の利用を示す。 ◎ Four text strings showing the effects of feComponentTransfer: an identity function acting as a reference, use of the feComponentTransfer table option, use of the feComponentTransfer linear option, and use of the feComponentTransfer gamma option. </desc> <defs> <linearGradient id="MyGradient" gradientUnits="userSpaceOnUse" x1="100" y1="0" x2="600" y2="0" > <stop offset="0" stop-color="#ff0000" /> <stop offset=".33" stop-color="#00ff00" /> <stop offset=".67" stop-color="#0000ff" /> <stop offset="1" stop-color="#000000" /> </linearGradient> <filter id="Identity" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%" > <feComponentTransfer> <feFuncR type="identity"/> <feFuncG type="identity"/> <feFuncB type="identity"/> <feFuncA type="identity"/> </feComponentTransfer> </filter> <filter id="Table" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%" > <feComponentTransfer> <feFuncR type="table" tableValues="0 0 1 1"/> <feFuncG type="table" tableValues="1 1 0 0"/> <feFuncB type="table" tableValues="0 1 1 0"/> </feComponentTransfer> </filter> <filter id="Linear" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%" > <feComponentTransfer> <feFuncR type="linear" slope=".5" intercept=".25"/> <feFuncG type="linear" slope=".5" intercept="0"/> <feFuncB type="linear" slope=".5" intercept=".5"/> </feComponentTransfer> </filter> <filter id="Gamma" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%" > <feComponentTransfer> <feFuncR type="gamma" amplitude="2" exponent="5" offset="0"/> <feFuncG type="gamma" amplitude="2" exponent="3" offset="0"/> <feFuncB type="gamma" amplitude="2" exponent="1" offset="0"/> </feComponentTransfer> </filter> </defs> <rect fill="none" stroke="blue" x="1" y="1" width="798" height="398" /> <g font-family="Verdana" font-size="75" font-weight="bold" fill="url(#MyGradient)" > <rect x="100" y="0" width="600" height="20" /> <text x="100" y="90">Identity</text> <text x="100" y="190" filter="url(#Table)" >TableLookup</text> <text x="100" y="290" filter="url(#Linear)" >LinearFunc</text> <text x="100" y="390" filter="url(#Gamma)" >GammaFunc</text> </g> </svg>`feComponentTransfer.svg$ex
9.8. 原始filter `feComposite^e
◎要素名 `feComposite@e ◎分類 `原始filter$ ◎内容 任意個数, 任意順序の,次に挙げる要素 ⇒# `記述的~要素$, `animate$e, `script$e, `set$e ◎属性 `中核~属性$, `呈示~属性$, `原始filter属性$, `class$a, `style$a, `in$aP, `in2$aCp, `operator$aCp, `k1$aCp, `k2$aCp, `k3$aCp, `k4$aCp ◎界面 `SVGFECompositeElement$I ◎表終この~filterは、 `COMPOSITING-1$r に定義される Porter-Duff 組成~演算 `PORTERDUFF$r — `over$v, `in$v, `atop$v, `out$v, `xor$v, `lighter$v — を利用して, 2 個の入力~画像を画像~空間~内で画素ごとに組合せる。 その他に、 `arithmetic$v 演算も適用できる。 ◎ This filter performs the combination of the two input images pixel-wise in image space using one of the Porter-Duff [PORTERDUFF] compositing operations: over, in, atop, out, xor, lighter [COMPOSITING-1]. Additionally, a component-wise arithmetic operation (with the result clamped between [0..1]) can be applied.
`arithmetic$v 演算は、[ `feDiffuseLighting$e / `feSpecularLighting$e ]~filterからの出力と~texture~dataとを組合せるときに有用になる。 また、 `dissolve^en を実装するときにも有用になる。 `arithmetic$v 演算が選ばれた場合、 結果の各~画素は,成分ごとに次の公式を利用して算出される ⇒ %k1 ~MUL %in ~MUL %in2 ~PLUS %k2 ~MUL %in ~PLUS %k3 ~MUL %in2 ~PLUS %k4 ◎ The arithmetic operation is useful for combining the output from the feDiffuseLighting and feSpecularLighting filters with texture data. It is also useful for implementing dissolve. If the arithmetic operation is chosen, each result pixel is computed using the following formula: • result = k1*i1*i2 + k2*i1 + k3*i2 + k4
ここで: ◎ where:
- [ %in / %in2 ]は、[ `in$aP / `in2$aCp ]に対応する入力~画像の,画素~channel値を指示する。 ◎ i1 and i2 indicate the corresponding pixel channel values of the input image, which map to in and in2 respectively
- [ %k1, %k2, %k3, %k4 ]は、 同じ名の属性の値を指示する。 ◎ k1, k2, k3 and k4 indicate the values of the attributes with the same name
- 結果は [0..1] ~~区間に切詰められる。 ◎ ↑
この原始filterに対しては、 結果の画像を成す拡がりは,~~増やされるかもしれない — § `原始filter下位領域$を見よ。 ◎ For this filter primitive, the extent of the resulting image might grow as described in the section that describes the filter primitive subregion.
属性定義- `operator@aCp = "`over@v | `in@v | `out@v | `atop@v | `xor@v | `lighter@v | `arithmetic@v"
- 遂行されることになる組成~演算を与える。 これらのうち `arithmetic$v 演算子は、 上に述べられている。 他のものは `COMPOSITING-1$r に述べられる `対応する演算@~COMPOSITING#porterduffcompositingoperators$ に合致する — [ `in$aP, `in2$aCp ]は、 順に[ ~source, ~dest ]を表現する下で。 ◎ The compositing operation that is to be performed. All of the operator types except arithmetic match the corresponding operation as described in [COMPOSITING-1] with in representing the source and in2 representing the destination. The arithmetic operator is described above.
- `初期~値$は `over$v とする。 ◎ The initial value for operator is over.
- ~animate可能。 ◎ Animatable: yes.
- `k1@aCp
- `k2@aCp
- `k3@aCp
- `k4@aCp
-
これらはいずれも:
- `number$t を値にとる。
- `operator$aCp に `arithmetic$v が指定された場合に限り適用-可能になる。
- `初期~値$は `0^v とする。
- ~animate可能。
- `in2@aCp
- とり得る値は `in$aP 属性を見よ。 組成~演算への 2 個目の入力~画像を与える。 ◎ in2 = "(see in attribute)" ◎ The second input image to the compositing operation.
- ~animate可能。 ◎ Animatable: yes.
注記: `COMPOSITING-1$r は,他にも組成~keywordを定義しているが、 それらの機能性は,入力~原始filter `in$aP と `in2$aCp を入れ替えることにより達成できる。 ◎ Note: Compositing and Blending [COMPOSITING-1] defines more compositing keywords. The functionality of the additional keywords can be archived by switching the input filter primitives in and in2.
<svg width="330" height="195" viewBox="0 0 1100 650" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <title> 各種 `feComposite^e 演算の例 ◎ Example feComposite - Examples of feComposite operations </title> <desc> [ 異なる不透明度~値/異なる無地化 ]が施された 4 ~~区画からなる背景~上に, 6 種の `feComposite^e 演算を 6 組の重合する 3 角形で図画化する。 ◎ Four rows of six pairs of overlapping triangles depicting the six different feComposite operators under different opacity values and different clearing of the background. </desc> <defs> <desc> 6 種の組成~演算子に対応する 6 個の~filterを定義する組を 2 つ定義する。 1 個目の組は背景~画像を不透明な白で一掃する。 2 個目の組は一掃しない — その結果、 背景は,下から透けて輝く場合もあれば, 自身に混色される( “`double-counting^en” )場合もある。 ◎ Define two sets of six filters for each of the six compositing operators. The first set wipes out the background image by flooding with opaque white. The second set does not wipe out the background, with the result that the background sometimes shines through and is other cases is blended into itself (i.e., "double-counting"). </desc> <filter id="overFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%" > <feFlood flood-color="#ffffff" flood-opacity="1" result="flood" /> <feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp" /> <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge> </filter> <filter id="inFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%" > <feFlood flood-color="#ffffff" flood-opacity="1" result="flood" /> <feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp" /> <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge> </filter> <filter id="outFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%" > <feFlood flood-color="#ffffff" flood-opacity="1" result="flood" /> <feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp" /> <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge> </filter> <filter id="atopFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%" > <feFlood flood-color="#ffffff" flood-opacity="1" result="flood" /> <feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp" /> <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge> </filter> <filter id="xorFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%" > <feFlood flood-color="#ffffff" flood-opacity="1" result="flood" /> <feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp" /> <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge> </filter> <filter id="arithmeticFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%" > <feFlood flood-color="#ffffff" flood-opacity="1" result="flood" /> <feComposite in="SourceGraphic" in2="BackgroundImage" result="comp" operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5" /> <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge> </filter> <filter id="overNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%" > <feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp" /> </filter> <filter id="inNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%" > <feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp" /> </filter> <filter id="outNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%" > <feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp" /> </filter> <filter id="atopNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%" > <feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp" /> </filter> <filter id="xorNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%" > <feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp" /> </filter> <filter id="arithmeticNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%" > <feComposite in="SourceGraphic" in2="BackgroundImage" result="comp" operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5" /> </filter> <path id="Blue100" d="M 0 0 L 100 0 L 100 100 z" fill="#00ffff" /> <path id="Red100" d="M 0 0 L 0 100 L 100 0 z" fill="#ff00ff" /> <path id="Blue50" d="M 0 125 L 100 125 L 100 225 z" fill="#00ffff" fill-opacity=".5" /> <path id="Red50" d="M 0 125 L 0 225 L 100 125 z" fill="#ff00ff" fill-opacity=".5" /> <g id="TwoBlueTriangles"> <use xlink:href="#Blue100"/> <use xlink:href="#Blue50"/> </g> <g id="BlueTriangles"> <use transform="translate(275,25)" xlink:href="#TwoBlueTriangles"/> <use transform="translate(400,25)" xlink:href="#TwoBlueTriangles"/> <use transform="translate(525,25)" xlink:href="#TwoBlueTriangles"/> <use transform="translate(650,25)" xlink:href="#TwoBlueTriangles"/> <use transform="translate(775,25)" xlink:href="#TwoBlueTriangles"/> <use transform="translate(900,25)" xlink:href="#TwoBlueTriangles"/> </g> </defs> <rect fill="none" stroke="blue" x="1" y="1" width="1098" height="648"/> <g font-family="Verdana" font-size="40" shape-rendering="crispEdges"> <desc> 不透明な白い面~上に描く~filterを利用して各~例を描画する。 したがって、 背景を覆い尽くす。 ◎ Render the examples using the filters that draw on top of an opaque white surface, thus obliterating the background. </desc> <g isolation="isolate"> <text x="15" y="75">opacity 1.0</text> <text x="15" y="115" font-size="27">(with feFlood)</text> <text x="15" y="200">opacity 0.5</text> <text x="15" y="240" font-size="27">(with feFlood)</text> <use xlink:href="#BlueTriangles"/> <g transform="translate(275,25)"> <use xlink:href="#Red100" filter="url(#overFlood)" /> <use xlink:href="#Red50" filter="url(#overFlood)" /> <text x="5" y="275">over</text> </g> <g transform="translate(400,25)"> <use xlink:href="#Red100" filter="url(#inFlood)" /> <use xlink:href="#Red50" filter="url(#inFlood)" /> <text x="35" y="275">in</text> </g> <g transform="translate(525,25)"> <use xlink:href="#Red100" filter="url(#outFlood)" /> <use xlink:href="#Red50" filter="url(#outFlood)" /> <text x="15" y="275">out</text> </g> <g transform="translate(650,25)"> <use xlink:href="#Red100" filter="url(#atopFlood)" /> <use xlink:href="#Red50" filter="url(#atopFlood)" /> <text x="10" y="275">atop</text> </g> <g transform="translate(775,25)"> <use xlink:href="#Red100" filter="url(#xorFlood)" /> <use xlink:href="#Red50" filter="url(#xorFlood)" /> <text x="15" y="275">xor</text> </g> <g transform="translate(900,25)"> <use xlink:href="#Red100" filter="url(#arithmeticFlood)" /> <use xlink:href="#Red50" filter="url(#arithmeticFlood)" /> <text x="-25" y="275">arithmetic</text> </g> </g> <g transform="translate(0,325)" isolation="isolate"> <desc> 背景を覆い尽くさない~filterを利用して例を描画する。 その結果、 背景は,そのまま現れる場合もあれば, 自身に混色される( “`double-counting^en” )場合もある。 ◎ Render the examples using the filters that do not obliterate the background, thus sometimes causing the background to continue to appear in some cases, and in other cases the background image blends into itself ("double-counting"). </desc> <text x="15" y="75">opacity 1.0</text> <text x="15" y="115" font-size="27">(without feFlood)</text> <text x="15" y="200">opacity 0.5</text> <text x="15" y="240" font-size="27">(without feFlood)</text> <use xlink:href="#BlueTriangles"/> <g transform="translate(275,25)"> <use xlink:href="#Red100" filter="url(#overNoFlood)" /> <use xlink:href="#Red50" filter="url(#overNoFlood)" /> <text x="5" y="275">over</text> </g> <g transform="translate(400,25)"> <use xlink:href="#Red100" filter="url(#inNoFlood)" /> <use xlink:href="#Red50" filter="url(#inNoFlood)" /> <text x="35" y="275">in</text> </g> <g transform="translate(525,25)"> <use xlink:href="#Red100" filter="url(#outNoFlood)" /> <use xlink:href="#Red50" filter="url(#outNoFlood)" /> <text x="15" y="275">out</text> </g> <g transform="translate(650,25)"> <use xlink:href="#Red100" filter="url(#atopNoFlood)" /> <use xlink:href="#Red50" filter="url(#atopNoFlood)" /> <text x="10" y="275">atop</text> </g> <g transform="translate(775,25)"> <use xlink:href="#Red100" filter="url(#xorNoFlood)" /> <use xlink:href="#Red50" filter="url(#xorNoFlood)" /> <text x="15" y="275">xor</text> </g> <g transform="translate(900,25)"> <use xlink:href="#Red100" filter="url(#arithmeticNoFlood)" /> <use xlink:href="#Red50" filter="url(#arithmeticNoFlood)" /> <text x="-25" y="275">arithmetic</text> </g> </g> </g> </svg>`feComposite.svg$ex
9.9. 原始filter `feConvolveMatrix^e
◎要素名 `feConvolveMatrix@e ◎分類 `原始filter$ ◎内容 任意個数, 任意順序の,次に挙げる要素 ⇒# `記述的~要素$, `animate$e, `script$e, `set$e ◎属性 `中核~属性$, `呈示~属性$, `原始filter属性$, `class$a, `style$a, `in$aP, `order$a, `kernelMatrix$aCv, `divisor$aCv, `bias$aCv, `targetX$aCv, `targetY$aCv, `edgeMode$aCv, `kernelUnitLength$aCv, `preserveAlpha$aCv ◎界面 `SVGFEConvolveMatrixElement$I ◎表終`feConvolveMatrix^e は、 行列~畳込み~filter効果を適用する。 畳込み( `convolution^en )は、 入力~画像~内の画素を近隣の画素と組合せて,結果の画像を生産する。 畳込みを通せば、 次に挙げるような,幅広い画像処理~演算を達成できる 【どれも, “色の~~境目” を際立たすかぼかす様な効果】 ⇒# ぼかし( `blurring^en ), 輪郭検出( `edge detection^en ), 明瞭化( `sharpening^en ), 浮き彫り( `embossing^en ), 隆起( `beveling^en ) ◎ feConvolveMatrix applies a matrix convolution filter effect. A convolution combines pixels in the input image with neighboring pixels to produce a resulting image. A wide variety of imaging operations can be achieved through convolutions, including blurring, edge detection, sharpening, embossing and beveling.
行列~畳込みは、 N×M 行列(畳込み~kernel)に基づく。 この行列は、 入力~画像~内の[ 所与の画素と その近隣の画素 ]の値を組合せて,結果の画素~値を生産する方法を述べる。 結果の各~画素は、 ~kernel行列を対応する[ ~source画素とその近隣の画素 ]に適用することにより決定される。 ◎ A matrix convolution is based on an n-by-m matrix (the convolution kernel) which describes how a given pixel value in the input image is combined with its neighboring pixel values to produce a resulting pixel value. Each result pixel is determined by applying the kernel matrix to the corresponding source pixel and its neighboring pixels.\
所与の画素を成す各~色~値に適用される基本的な畳込み公式は:
ここで:
- ( %x, %y ) は画素の座標
-
%総和 ~EQ ∑ `source^op( %x ~MINUS %targetX ~PLUS %j, %y ~MINUS %targetY ~PLUS %i ) ~MUL `kernelMatrix^op( %orderX ~MINUS %j ~MINUS 1, %orderY ~MINUS %i ~MINUS 1 )
この ∑ は、 次を満たすすべての整数 %i, %j にわたる総和を表す ⇒# 0 ~LTE %i ~LT %orderY, 0 ~LTE %j ~LT %orderX
- `order$a 属性に与えた[ %orderX, %orderY ], および[ `targetX$aCv, `targetY$aCv, `kernelMatrix$aCv, `divisor$aCv, `bias$aCv ]属性が,同じ名前の変数の値を与える。
- `kernelMatrix^op( %m, %n ) は `kernelMatrix$aCv の ( %m, %n ) 成分
- `source^op( %x, %y ) は ~source画像の座標 ( %x, %y ) の画素
上に与えた公式における~kernel行列~内の値は、 多くの~computer~graphics教本に述べられている畳込み理論に合致するため,~kernel行列は[ ~source, ~dest ]画像から相対的に 180度~回転されるように適用される。 ◎ In the above formulas the values in the kernel matrix are applied such that the kernel matrix is rotated 180 degrees relative to the source and destination images in order to match convolution theory as described in many computer graphics textbooks.
例えば、 入力~画像は 5×5 画素で,その ある色~channelの値は 次のようにされていて: ◎ To illustrate, suppose you have a input image which is 5 pixels by 5 pixels, whose color values for one of the color channels are as follows:
`feConvolveMatrix-5x5^dgm畳込み~kernelを 次のような 3×3 行列で定義したとする: ◎ and you define a 3-by-3 convolution kernel as follows:
`feConvolveMatrix-3x3^dgm画像の[ 2 本目の~row, 2 本目の~col ]にある色~値に注目する(~source画素~値は 120 )。 最も単純な事例 — 入力~画像の画素~格子は~kernelのそれに整列していて,[ `divisor$aCv, `targetX$aCv, `targetY$aCv ]属性は既定の値をとるものと見做すとき、 結果の色~値は,次の式の結果になる: ◎ Let’s focus on the color value at the second row and second column of the image (source pixel value is 120). Assuming the simplest case (where the input image’s pixel grid aligns perfectly with the kernel’s pixel grid) and assuming default values for attributes divisor, targetX and targetY, then resulting color value will be:
行列~畳込みは、 画素に演算するので,内来的に解像度に依存する。 `feConvolveMatrix$e に 解像度に依存しない結果を生産させるためには、 `kernelUnitLength$aCv 属性に値が明示的に供されるべきである。 ◎ Because they operate on pixels, matrix convolutions are inherently resolution-dependent. To make feConvolveMatrix produce resolution-independent results, an explicit value should be provided for the attribute kernelUnitLength.
`kernelUnitLength$aCv は、 他の属性との組合nで,`~filter座標系$における暗黙的な画素~格子を定義する。 入力~画像は、 その各~画素を `kernelUnitLength$aCv に合致させるため,一時的に拡縮し直されることになる。 畳込みは~sampleし直された画像~上で起こる。 畳込みを適用した後も,画像は~sampleし直され, 元の解像度に戻される。 ◎ kernelUnitLength, in combination with the other attributes, defines an implicit pixel grid in the filter effects coordinate system (i.e., the coordinate system established by the primitiveUnits attribute). The input image will be temporarily rescaled to match its pixels with kernelUnitLength. The convolution happens on the resampled image. After applying the convolution, the image is resampled back to the original resolution.
`kernelUnitLength$aCv により定義される畳込みに先立って,画像を[ 座標系に合致するよう~sampleし直す必要がある/ 畳込みの後に機器~座標系に合致するよう~sampleし直す ]ときは、 高品質~viewerには,双線型や双三次などの適切な補間~技法を用立てることが推奨される。 どれを選ぶかは、 可用な補間法の速さに依存して, `image-rendering$p ~prop設定により影響され得る。 実装は、 適正な結果を生産することは必要yでないときには,~sampleし直すのを[ 最小限にする/排する ]~approachを選ぶかもしれないことに注意 — 文書が縮小表示され, `kernelUnitLength$aCv が機器~画素より相当に小さいなときなど。 ◎ When the image must be resampled to match the coordinate system defined by kernelUnitLength prior to convolution, or resampled to match the device coordinate system after convolution, it is recommended that high quality viewers make use of appropriate interpolation techniques, for example bilinear or bicubic. Depending on the speed of the available interpolents, this choice may be affected by the image-rendering property setting. Note that implementations might choose approaches that minimize or eliminate resampling when not necessary to produce proper results, such as when the document is zoomed out such that kernelUnitLength is considerably smaller than a device pixel.
属性定義- `order@a = "`number-optional-number$t"
- `kernelMatrix$aCv 用に,各~次元の~cell数を指示する。 供される値は、 正な `integer$t でなければナラナイ。 整数でない値は、 `floor^op( その値 ) に丸められることになる。 2 個の `number$t 値[ %orderX, %orderY ]は、 順に,行列を成す[ ~col数, ~row数 ]を指示する。 供された値が 1 個だけの場合、 それが 2 個目の値にも利用される。 ◎ Indicates the number of cells in each dimension for kernelMatrix. The values provided must be <integer> s greater than zero. Values that are not integers will be truncated, i.e. rounded to the closest integer value towards zero. The first number, <orderX>, indicates the number of columns in the matrix. The second number, <orderY>, indicates the number of rows in the matrix. If <orderY> is not provided, it defaults to <orderX>.
- 利用する値は、 なるべく小さくすることが推奨される(例: `3^v )。 大きい値は、 通例的に, ~CPU~overheadが高いわりに処理能への影響iを正当化するほどの結果を生産しないので。 ◎ It is recommended that only small values (e.g., 3) be used; higher values may result in very high CPU overhead and usually do not produce results that justify the impact on performance.
- `初期~値$は `3^v とする。 ◎ The initial value for order is 3.
- ~animate可能。 ◎ Animatable: yes.
- `kernelMatrix@aCv = "`list-of-numbers$t"
- 畳込み用の~kernel行列を成す一連の `number$t を与える。 値の個数は ( %orderX ~MUL %orderY ) でなければナラナイ — さもなければ、 この原始filterは`通過~filter$として動作する。 ◎ The list of <number> s that make up the kernel matrix for the convolution. Values are separated by space characters and/or a comma. The number of entries in the list must equal <orderX> times <orderY>. ◎ If the result of orderX * orderY is not equal to the the number of entries in the value list, the filter primitive acts as a pass through filter.
- 値~list内の値の個数が妥当でないときにどう挙動するか? [`237$issue] ◎ How to behave on invalid number of entries in the value list? [Issue #237]
- ~animate可能。 ◎ Animatable: yes.
- `divisor@aCv = "`number$t"
- 入力~画像に `kernelMatrix$aCv を適用して得られた数は、 この属性が与える除数で除算される。 除数として,行列を成す全成分~値の総和を与えた場合、 結果を成す総体的な色の光度( `intensity^en )を平均化する効果がある傾向にある。 除数に `0^v が指定された場合、 代わりに既定の値が利用されることになる。 ◎ After applying the kernelMatrix to the input image to yield a number, that number is divided by divisor to yield the final destination color value. A divisor that is the sum of all the matrix values tends to have an evening effect on the overall color intensity of the result. If the specified divisor is 0 then the default value will be used instead.
- `初期~値$は `kernelMatrix$aCv 内のすべての値の総和とする — ただし,総和が 0 になる場合、 除数は 1 にされる。 ◎ The initial value is the sum of all values in kernelMatrix, with the exception that if the sum is zero, then the divisor is set to 1.
- ~animate可能。 ◎ Animatable: yes.
- `bias@aCv = "`number$t"
- 入力~画像に `kernelMatrix$aCv, `divisor$aCv を順に適用して得られた色~値の各~成分には、 この属性に与えた数が加算される。 `bias$aCv の応用として、 0.5 ~gray値が~filterのゼロ応答になることが望ましいときがある。 `bias$aCv ~propは、 ~filterの範囲をズラす。 これにより、 さもなければ [ 0 / 1 ]に切詰められるような値を表現できるようになる。 ◎ After applying the kernelMatrix to the input image to yield a number and applying the divisor, the bias attribute is added to each component. One application of bias is when it is desirable to have .5 gray value be the zero response of the filter. The bias property shifts the range of the filter. This allows representation of values that would otherwise be clamped to 0 or 1.
- `初期~値$は `0^v とする。 ◎ The initial value for bias is 0.
- ~animate可能。 ◎ Animatable: yes.
- `targetX@aCv = "`integer$t"
- `targetY@aCv = "`integer$t"
- 順に,畳込み行列の[ ~X / ~Y ](以下, “/” は同順)における[ 入力~画像~内の所与の~target画素に相対的な位置決め ]を決定する。 行列の 1 本目の[ ~col / ~row ]が 0 番に対応する。 値は 0 以上[ %orderX / %orderY ]未満でなければナラナイ。 既定では、 畳込み行列は,入力~画像を成す各~画素~上で[ ~X / ~Y ]において中央寄せにされる — すなわち、[ %targetX ~EQ `floor^op( %orderX ~DIV 2 ) / %targetY ~EQ `floor^op( %orderY ~DIV 2 ) ]。 ◎ Determines the positioning in X of the convolution matrix relative to a given target pixel in the input image. The leftmost column of the matrix is column number zero. The value must be such that: 0 <= targetX < orderX. By default, the convolution matrix is centered in X over each pixel of the input image (i.e., targetX = floor ( orderX / 2 )).
- ともに,~animate可能。 ◎ Animatable: yes. ◎ targetY = "<integer>" ◎ Determines the positioning in Y of the convolution matrix relative to a given target pixel in the input image. The topmost row of the matrix is row number zero. The value must be such that: 0 <= targetY < orderY. By default, the convolution matrix is centered in Y over each pixel of the input image (i.e., targetY = floor ( orderY / 2 )). ◎ Animatable: yes.
- `edgeMode@aCv = "`duplicate$v | `wrap$v | `mirror$v | `~noneE$v"
-
入力~画像を必要yなだけ,どの色~値で拡げるかを決定する — これにより、[ ~kernelが入力~画像の辺または近傍に位置する ]ときにも,行列~演算を適用できるようになる。 各種~値の意味は: ◎ Determines how to extend the input image as necessary with color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image.
- `duplicate@v
- 入力~画像の各~辺~上の色~値を必要yなだけ複写することにより,入力~画像を各~辺から外へ拡げることを指示する。 ◎ duplicate indicates that the input image is extended along each of its borders as necessary by duplicating the color values at the given edge of the input image.
-
元の %N × %M 画像を次の図で表すとするとき:
`feConvolveMatrix-NxM^dgmこの図, および以下の各例では:
- %n ~EQ %N ~MINUS 1
- %m ~EQ %M ~MINUS 1
- 2 文字による表記 %x%y は、 元の画像の ( %x, %y ) に位置する画素を指す。
`duplicate$v を利用して 2 画素だけ拡げる例: ◎ Extended by two pixels using duplicate:
`feConvolveMatrix-extended^dgm - `wrap@v
- 画像の対辺から色~値をとることにより,入力~画像を拡げることを指示する ◎ wrap indicates that the input image is extended by taking the color values from the opposite edge of the image.
-
`wrap$v を利用して 2 画素だけ拡げる例: ◎ Extended by two pixels using wrap:
`feConvolveMatrix-wrap^dgm - `mirror@v
- 画像の辺を境に鏡像になるよう色~値をとることにより,入力~画像を拡げることを指示する ◎ mirror indicates that the input image is extended by taking color values mirrored across the edge being sampled beyond.
-
`mirror$v を利用して 2 画素だけ拡げる例: ◎ Extended by two pixels using mirror:
`feConvolveMatrix-mirror^dgm - `~noneE@v
- `透明な黒$にされた画素~値で入力~画像を拡げることを指示する。 ◎ The value none indicates that the input image is extended with pixel values of zero for R, G, B and A.
- `初期~値$は `duplicate$v とする。 ◎ The initial value for edgeMode is duplicate.
- ~animate可能。 ◎ Animatable: yes.
- `kernelUnitLength@aCv = "`number-optional-number$t"
- 2 個の `number$t 値は順に[ %dx , %dy ]値を与える。 供された値が 1 個だけの場合、 その値が 2 個目の値にも利用される。 [ %dx / %dy ]は `kernelMatrix$aCv 内の~~連続する 2 本の[ ~col/~row ]の合間に意図される距離を,`~filter座標系$単位で指示する。 `kernelUnitLength$aCv 用の値を指定することにより、 ~kernelは,拡縮-可能な抽象-座標系~内で定義されるようになる。 `kernelUnitLength$aCv は指定されていない場合の既定の値は、 中間~画像における画素~単位に基づく座標系であり、 拡縮-可能になり得ない。 各種[ 表示-媒体, ~UA ]にわたり,ある程度の一貫性を得るためには、 実装によっては, `kernelUnitLength$aCv 用の値を供することが必要yである。 [ 中間~画像の画素~格子が~kernelのそれに整列する場合 ]には、[ 最も一貫した結果, 最も高速な処理能 ]が達成されることになる。 ◎ The first number is the <dx> value. The second number is the <dy> value. If the <dy> value is not specified, it defaults to the same value as <dx>. Indicates the intended distance in current filter units (i.e., units as determined by the value of attribute primitiveUnits) between successive columns and rows, respectively, in the kernelMatrix. By specifying value(s) for kernelUnitLength, the kernel becomes defined in a scalable, abstract coordinate system. If kernelUnitLength is not specified, the default value is one pixel in the offscreen bitmap, which is a pixel-based coordinate system, and thus potentially not scalable. For some level of consistency across display media and user agents, it is necessary that a value be provided for kernelUnitLength. In some implementations, the most consistent results and the fastest performance will be achieved if the pixel grid of the temporary off-screen images aligns with the pixel grid of the kernel.
- 0 以下の値が指定された場合、 代わりに 既定の値が利用されることになる。 ◎ If a negative or zero value is specified the default value will be used instead.
- 注記: この属性は、 非推奨にされ,除去されることになる。 それは、 ~platformに依存しない結果を作成するための依拠-可能な仕方を供さない。 そような利用事例は、 この仕様の将来~versionが受持つことになる。 ◎ Note: This attribute is deprecated and will be removed. It does not provide a reliable way to create platform independent results. Future versions of this specification will cover this use case.
- ~animate可能。 ◎ Animatable: yes.
- `preserveAlpha@aCv = "`false^v | `true^v"
-
値 `false^v は、 畳込みを ~alpha~channelも含む すべての~channelに適用することを指示する。 この場合の結果の~alpha~channelは、 `畳込み公式$における `alpha^op( %x, %y ) を常に 1 として得られる結果になるとする。 ◎ A value of false indicates that the convolution will apply to all channels, including the alpha channel. In this case the ALPHAX,Y of the convolution formula for a given pixel is: ALPHAX,Y = ( SUM I=0 to [orderY-1] { SUM J=0 to [orderX-1] { SOURCE X-targetX+J, Y-targetY+I * kernelMatrixorderX-J-1, orderY-I-1 } } ) / divisor + bias
- 値 `true^v は、 色~channelのみに畳込みを適用することを指示する。 この場合、 ~filterは色~成分~値を一時的に乗算済みでない値に戻した上で,~kernelを適用することになる。 この事例における~alpha~channelは~sourceのそれになるとする。 ◎ A value of "true" indicates that the convolution will only apply to the color channels. In this case, the filter will temporarily unpremultiply the color component values and apply the kernel. In this case the ALPHAX,Y of the convolution formula for a given pixel is: • ALPHAX,Y = SOURCEX,Y
- `初期~値$は `false^v とする。 ◎ The initial value for preserveAlpha is false.
- ~animate可能。 ◎ Animatable: yes.
9.10. 原始filter `feDiffuseLighting^e
◎要素名 `feDiffuseLighting@e ◎分類 `原始filter$ ◎内容 任意順序で、[ 1 個の`光源~要素$, および 任意個数の[ `記述的~要素$, `script$e 要素 ] ◎属性 `中核~属性$, `呈示~属性$, `原始filter属性$, `class$a, `style$a, `in$aP, `surfaceScale$aDf, `diffuseConstant$aDf, `kernelUnitLength$aDf ◎界面 `SVGFEDiffuseLightingElement$I ◎表終この原始filterは、 ~alpha~channelを凹凸~mapに利用して,画像を照らす。 結果の画像は、 どこでも~alpha = 1.0 にされた光の色に基づく,~RGBA不透明~画像になる。 照明~計算は、 ~Phong照明~modelの標準の散乱-成分に従う。 結果の画像は、 入力~凹凸~mapを成す[ 光の色, 光の位置, 面~幾何 ]に依存する。 ◎ This filter primitive lights an image using the alpha channel as a bump map. The resulting image is an RGBA opaque image based on the light color with alpha = 1.0 everywhere. The lighting calculation follows the standard diffuse component of the Phong lighting model. The resulting image depends on the light color, light position and surface geometry of the input bump map.
この原始filterにより生産される光~mapは、 `arithmetic$v `feComposite$e 組成~methodを成す乗算-項を利用して ~texture画像と組合できる。 ~texture画像に適用する前に,複数の光~mapを共に加算することにより,複数の`光源~要素$を模倣できる。 ◎ The light map produced by this filter primitive can be combined with a texture image using the multiply term of the arithmetic feComposite compositing method. Multiple light sources can be simulated by adding several of these light maps together before applying it to the texture image.
下の公式は 3×3 ~filterを用立てる。 それらは画素に演算するので、 そのような~filterは,内来的に解像度に依存する。 `feDiffuseLighting$e に解像度に依存しない結果を生産させるためには、 明示的に `kernelUnitLength$aDf 属性~用の値が供されるべきある。 ◎ The formulas below make use of 3x3 filters. Because they operate on pixels, such filters are inherently resolution-dependent. To make feDiffuseLighting produce resolution-independent results, an explicit value should be provided for the attribute kernelUnitLength.
`kernelUnitLength$aDf は、 他の属性との組合nで,`~filter座標系$における暗黙的な画素~格子を定義する。 入力~画像は、 その画素たちを `kernelUnitLength$aDf に合致させるため,一時的に拡縮し直されることになる。 ~sampleし直された画像には、 以下に述べる 3×3 ~filterが適用される。 この~filterを適用した後に、 画像は~sampleし直され,元の解像度に戻される。 ◎ kernelUnitLength, in combination with the other attributes, defines an implicit pixel grid in the filter effects coordinate system (i.e., the coordinate system established by the primitiveUnits attribute). The input image will be temporarily rescaled to match its pixels with kernelUnitLength. The 3x3 filters are applied to the resampled image. After applying the filter, the image is resampled back to its original resolution.
注記: どれを選ぶかは、 可用な補間法の速さに依存して, `image-rendering$p ~prop設定により影響され得る。 ◎ Note: Depending on the speed of the available interpolates, this choice may be affected by the image-rendering property setting.
注記: 実装は、 適正な結果を生産することが必要yでないときは、 ~sampleし直すのを[ 最小限にする/排する ]~approachを選ぶかもしれない — 例: 文書が縮小表示され, `kernelUnitLength$aDf が機器~画素より相当に小さくなったときなど。 ◎ Note: Implementations might choose approaches that minimize or eliminate resampling when not necessary to produce proper results, such as when the document is zoomed out such that kernelUnitLength is considerably smaller than a device pixel. ◎ ↑↑“Normalize” に置換 For the formulas that follow, the Norm(Ax,Ay,Az) function is defined as:
注記: ~UAは、[ 等式を最適化する/ 極端な色~値にかかる時間の相違を避ける ]ためとして, “`fast inverse square root^en” を利用できる。 計時~攻撃の詳細~については、 `~privacyと~security上の考慮点$を見よ。 ◎ Note: User agents may use the the "fast inverse square root" to optimize the equation and avoid time differences on extrema color values. See Privacy and Security Considerations section for more details about timing attacks.
以下において %P ~EQ ( %x, %y, 0 ) は、 任意の画像~sampleの位置を表すとする( 0 は標高を表す~Z座標)。
結果の画像の[ ~R, ~G, ~B, ~A ]成分は、 次の式で算出される:
- [ ~R, ~G, ~B ]成分に対しては ⇒ %k/d ~MUL ⟨ %N, %L ⟩ ~MUL %入射~色
- ~A成分に対しては、 常に 1
ここで:
◎ The resulting RGBA image is computed as follows: • Dr = kd * N.L * Lr • Dg = kd * N.L * Lg • Db = kd * N.L * Lb • Da = 1.0 where- %k/d ~EQ `diffuseConstant$aDf 値で与えられる拡散反射~係数 ◎ kd = diffuse lighting constant\
- %N ~EQ `Normalize^op( %P における面~法線~vector %N1 ) ⇒ %P における面の勾配を表す。 ◎ N = surface normal unit vector, a function of x and y\
- %L ~EQ `Normalize^op( %P から光源-を指している~vector %L1 ) ⇒ 無限遠光源の事例では、 %P に依存しない定数になる。 ◎ L = unit vector pointing from surface to light, a function of x and y in the point and spot light cases\
- %入射~色 ~EQ %P に差し込む光の色~成分 ⇒ 錐光源の事例を除き,定数になる。 ◎ Lr,Lg,Lb = RGB components of light, a function of x and y in the spot light case
%N1, %L1, %入射~色 の公式は以下に与えられる。
面~法線~vector %N1 の公式は次で与えられる:
-
%N1 の~X成分は、[ ~MINUS `surfaceScale$aDf ~MUL %係数/x ~MUL 次の式の結果 ]になる ⇒# Kx(0, 0) ~MUL I(%x ~MINUS %dx, %y ~MINUS %dy) ~PLUS Kx(1, 0) ~MUL I(%x, %y ~MINUS %dy) ~PLUS Kx(2, 0) ~MUL I(%x ~PLUS %dx, %y ~MINUS %dy) ~PLUS Kx(0, 1) ~MUL I(%x ~MINUS %dx, %y) ~PLUS Kx(1, 1) ~MUL I(%x, %y) ~PLUS Kx(2, 1) ~MUL I(%x ~PLUS %dx, %y) ~PLUS Kx(0, 2) ~MUL I(%x ~MINUS %dx, %y ~PLUS %dy) ~PLUS Kx(1, 2) ~MUL I(%x, %y ~PLUS %dy) ~PLUS Kx(2, 2) ~MUL I(%x ~PLUS %dx, %y ~PLUS %dy)
ここで:
- I( %P ) は、 入力~画像の %P における~alpha成分の値。 ( `surfaceScale$aDf ~MUL I( %P ) が, %P における面の標高を表す。)
- ( %dx, %dy ) 値は、 所与の ( %x, %y ) 位置に相対的な差分を,その地点における面の斜度を見積もる目的で表現する。 これらの差分は、 `kernelUnitLength$aDf 属性の(明示的な/暗黙的な)値により決定される。
- %係数/x, Kx は、 以下に与える~Sobel 3×3 勾配~filter~kernel。 これらには、 %P が内域, 辺のどちらにあるかに応じて,異なるものが利用される。
- %N1 の~Y成分の公式は、 ~filter~kernelの ( %係数/x, Kx ) を以下に与える ( %係数/y, Ky ) に置換する下で,~X成分と同じになる。
- %N1 の~Z成分は、 常に 1.0 とする
左上~隅:
| 上辺:
| 右上~隅:
|
左辺:
| ~~内部:
| 右辺:
|
左下~隅:
| 下辺:
| 右下~隅:
|
%P から光源-を指している~vector %L1 は、 当の`光源~要素$に応じて,次に従って計算される: ◎ L, the unit vector from the image sample to the light, is calculated as follows:
-
無限遠光源( `feDistantLight$e )に対しては、 定数になる:
%L1 = ( `cos^op( %方位角 ) ~MUL `cos^op( %仰角 ), `sin^op( %方位角 ) ~MUL `cos^op( %仰角 ), `sin^op( %仰角 ) )ここで ⇒# %方位角 は `azimuth$aDt, %仰角 は `elevation$aDt
◎ For Infinite light sources it is constant: • Lx = cos(azimuth)*cos(elevation) • Ly = sin(azimuth)*cos(elevation) • Lz = sin(elevation) -
点光源( `fePointLight$e )/錐光源( `feSpotLight$e ) に対しては、 位置 %P の関数になる:
%L1 = %光源-位置 ~MINUS %Pここで %光源-位置 は、 要素の子である`光源~要素$により指定される光源の位置を表す。
◎ For Point and spot lights it is a function of position: • Lx = Lightx - x Ly = Lighty - y • Lz = Lightz - Z(x,y) • L = (Lx, Ly, Lz) / Norm(Lx, Ly, Lz) ◎ where Lightx, Lighty, and Lightz are the input light position.
%入射~色 は、 要素の `lighting-color$p に指定された色 %光源-色 に基づく:
- 無限遠光源/点光源 に対しては ⇒ %光源-色 がそのまま利用される。
-
錐光源に対しては、[ ~R, ~G, ~B ]各~成分ごとに:
- %m ~LT `cos^op( %制限角 ) ならば 0 (すなわち,光は無い)
-
~ELSE_ 次の式で与えられる( %P の関数になる):
%光源-色 ~MUL `pow^op( %m, %指数 )
ここで:
- %m ~EQ ~MINUS ⟨ %L, `Normalize^op( %錐の軸~vector ) ⟩
- %錐の軸~vector ~EQ ( `pointsAtX$aSt, `pointsAtY$aSt, `pointsAtZ$aSt ) ~MINUS %光源-位置
- %制限角 ~EQ [ `limitingConeAngle$aSt が指定されているならば その値【を radian 単位に換算した結果】 / ~ELSE_ ( π ~DIV 2 ) ]
- %指数 ~EQ 錐光源の `specularExponent$aSt 値
- `surfaceScale@aDf = "`number$t"
- 入力~画像の~alpha ~EQ 1 に対応する,面の標高を与える。 ◎ height of surface when Ain = 1.
- この属性が指定されていない場合の効果は、 値 `1^v が指定されたかのようになる。 ◎ If the attribute is not specified, then the effect is as if a value of 1 were specified.
- ~animate可能。 ◎ Animatable: yes.
- `diffuseConstant@aDf = "`number$t"
- ~Phong照明~modelにおける拡散反射~係数 %k/d を与える。 ~SVGにおいては、 負でないどの数もとれる。 ◎ kd in Phong lighting model. In SVG, this can be any non-negative number.
- この属性が指定されていない場合の効果は、 値 `1^v が指定されていたかのようになる。 ◎ If the attribute is not specified, then the effect is as if a value of 1 were specified.
- ~animate可能。 ◎ Animatable: yes.
- `kernelUnitLength@aDf = "`number-optional-number$t"
- 2 個の `number$t 値は、 順に,`面~法線の計算~公式$における[ %dx, %dy ]用に意図される距離を指示する値を`~filter座標系$単位で与える。 供された値が 1 個だけの場合、 その値が 2 個目の値にも利用される。 ◎ The first number is the <dx> value. The second number is the <dy> value. If the <dy> value is not specified, it defaults to the same value as <dx>. Indicates the intended distance in current filter units (i.e., units as determined by the value of attribute primitiveUnits) for dx and dy, respectively, in the surface normal calculation formulas.\
- この属性に値(たち)を指定することにより、 ~kernelは拡縮-可能な抽象-座標系~内に定義されるようになる。 この属性が指定されていない場合の[ %dx, %dy ]値は、 所与の ( %x , %y ) 位置に相対的にごく小さい差分を表現するべきである — それは、 事例によっては,中間~画像~内の 1 画素として実装できるかもしれないが、 画素に基づく座標系なので拡縮-可能になれない。 各種[ 表示-媒体, ~UA ]にわたり,ある程度の一貫性を得るためには、 この属性に値を供することが必要yである。 ◎ By specifying value(s) for kernelUnitLength, the kernel becomes defined in a scalable, abstract coordinate system. If kernelUnitLength is not specified, the dx and dy values should represent very small deltas relative to a given (x,y) position, which might be implemented in some cases as one pixel in the intermediate image offscreen bitmap, which is a pixel-based coordinate system, and thus potentially not scalable. For some level of consistency across display media and user agents, it is necessary that a value be provided for kernelUnitLength.
- 0 以下の値が指定された場合、 代わりに既定の値が利用されることになる。 ◎ If a negative or zero value is specified the default value will be used instead.
- 注記: この属性は、 非推奨にされ,除去されることになる。 それは、 ~platformに依存しない結果を作成するための依拠-可能な仕方を供さない。 そような利用事例は、 この仕様の将来~versionが受持つことになる。 ◎ Note: This attribute is deprecated and will be removed. It does not provide a reliable way to create platform independent results. Future versions of this specification will cover this use case.
- ~animate可能。 ◎ Animatable: yes.
`光源~要素$は、[ `feDistantLight$e / `fePointLight$e / `feSpotLight$e ]いずれかの子~要素により定義される。 光の色は `lighting-color$p ~propにより指定される。 ◎ The light source is defined by one of the child elements feDistantLight, fePointLight or feSpotLight. The light color is specified by property lighting-color.
9.11. 原始filter `feDisplacementMap^e
◎要素名 `feDisplacementMap@e ◎分類 `原始filter$ ◎内容 任意個数, 任意順序の,次に挙げる要素 ⇒# `記述的~要素$, `animate$e, `script$e, `set$e ◎属性 `中核~属性$, `呈示~属性$, `原始filter属性$, `class$a, `style$a, `in$aP, `in2$aDp, `scale$aDp, `xChannelSelector$aDp, `yChannelSelector$aDp ◎界面 `SVGFEDisplacementMapElement$I ◎表終各~実装は、 仕様に合致していない。 [`113$issue] ◎ Implementations do not match specification. [Issue #113]
この原始filterは `in2$aDp からの画像からの画素~値を利用して, `in$aP からの画像を空間的に変位させる。 次の変形nが遂行されることになる:
ここで:
- %scale は `scale$aDp が与える変位~拡縮-率を表す。
- `P^op( %x, %y ) は `in$aP が与える入力~画像を表す。
- `D^op( %x, %y ) は 出力~画像(行先)を表す。
- `XC^op( %x, %y ) は、 `xChannelSelector$aDp により指名された~channelの成分~値を表す。 例えば ( %x, %y ) における変位を `in2$aDp の~R成分を利用して制御するためには, `xChannelSelector$aDp を `R^l に設定する。
- `YC^op( %x, %y ) は、 `yChannelSelector$aDp により制御されることを除き, `XC^op( %x, %y ) と同様になる。
変位~map `in2$aDp は、 遂行される写像の逆写像を定義する。 ◎ The displacement map, in2, defines the inverse of the mapping performed.
この原始filterに対しては、 入力~画像 `in$aP は乗算済みであり続ける。 `in2$aDp からの画素~値を利用する計算は、 乗算済みでない色~値を利用して遂行される。 ◎ The input image in is to remain premultiplied for this filter primitive. The calculations using the pixel values from in2 are performed using non-premultiplied color values.
この~filterの効果は、 入力~上でいくらでも非局所的になり得るため、 中間処理にかなりの~buffer量を要求するかもしれない。 しかしながら,この定式化から、 必要な~buffer量は,変位の最大~範囲を表現する %scale により決定できる。 ◎ This filter can have arbitrary non-localized effect on the input which might require substantial buffering in the processing pipeline. However with this formulation, any intermediate buffering needs can be determined by scale which represents the maximum range of displacement in either x or y.
この~filterを適用するとき、 【変位-後の】~source画素の所在は,~sourceの画素~格子と整列しなくなることが多い。 ◎ When applying this filter, the source pixel location will often lie between several source pixels.
注記: どれを選ぶかは、 可用な補間法の速さに依存して, `image-rendering$p ~propの設定により影響され得る。 ◎ Note: Depending on the speed of the available interpolents, this choice may be affected by the image-rendering property setting.
注記: この仕様の将来~versionは、 ~UAの描画~結果がもっと相互運用可能になるよう,~source画像を~~歪めるときに利用する補間~手法を定義することになる。 ◎ Note: A future version of this spec will define the interpolation method to be used when distorting the source image making UAs rendering result more interoperable.
`color-interpolation-filters$p ~propが適用されるのは `in2$aDp ~source画像に限られ, `in$aP ~source画像には適用されない。 `in$aP ~source画像は、 その現在の色~空間~内にあり続けるモノトスル。 ◎ The color-interpolation-filters property only applies to the in2 source image and does not apply to the in source image. The in source image must remain in its current color space.
属性定義- `scale@aDp = "`number$t"
- 変位~拡縮-係数を`~filter座標系$単位で与える。 ◎ Displacement scale factor. The amount is expressed in the coordinate system established by attribute primitiveUnits on the filter element.
- この属性の値 `0^v のときは、 この演算による~source画像に対する効果はない。 ◎ When the value of this attribute is 0, this operation has no effect on the source image.
- `初期~値$は `0^v とする。 ◎ The initial value for scale is 0.
- ~animate可能。 ◎ Animatable: yes.
- `xChannelSelector@aDp = "`R^v | `G^v | `B^v | `A^v"
- `yChannelSelector@aDp = "`R^v | `G^v | `B^v | `A^v"
- 順に, `in$aP 内の画素を[ ~X軸~沿い, ~Y軸~沿い ]に変位させるときに, `in2$aDp のどの~channelを利用するかを指示する。 ◎ xChannelSelector = "R | G | B | A" ◎ Indicates which channel from in2 to use to displace the pixels in in along the x-axis.
- 両~属性とも,`初期~値$は `A^v とする。 ◎ The initial value for xChannelSelector is A.
- ともに,~animate可能。 ◎ Animatable: yes. ◎ yChannelSelector = "R | G | B | A" ◎ Indicates which channel from in2 to use to displace the pixels in in along the y-axis. ◎ The initial value for yChannelSelector is A. ◎ Animatable: yes.
- `in2@aDp
- とり得る値は `in$aP 属性を見よ。 ◎ in2 = "(see in attribute)"
- `in$aP 属性からの画像~内の画素を変位させるために利用する, 2 個目の入力~画像を与える。 ◎ The second input image, which is used to displace the pixels in the image from attribute in.\
- `in$aP 属性の定義を見よ。 ◎ See defintion for in attribute.
- ~animate可能。 ◎ Animatable: yes.
9.12. 原始filter `feDropShadow^e
◎要素名 `feDropShadow@e ◎分類 `原始filter$ ◎内容 任意個数, 任意順序の,次に挙げる要素 ⇒# `記述的~要素$, `animate$e, `script$e, `set$e ◎属性 `中核~属性$, `呈示~属性$, `原始filter属性$, `class$a, `style$a, `in$aP, `stdDeviation$aDS, `dx$aDS, `dy$aDS ◎界面 `SVGFEDropShadowElement$I ◎表終この~filterは、 入力~画像の落影を作成する。 これは、 他の`原始filter$の組合nで定義できる略式~filterであるが、 実装は,より容易に最適化できることが期待される。 ◎ This filter creates a drop shadow of the input image. It is a shorthand filter, and is defined in terms of combinations of other filter primitives. The expectation is that it can be optimized more easily by implementations.
`feDropShadow$e 原始filter — 以下 %DS と記す — の結果は、 次と等価になる: ◎ The result of a feDropShadow filter primitive is equivalent to the following:
<`feGaussianBlur$e0 in="( %DS の `in^a 画像の~alpha~channel )" `stdDeviation$aGB="( %DS の `stdDeviation$aDS 値 )" /> <`feOffset$e0 `dx$aOf="( %DS の `dx$aDS 値 )" `dy$aOf="( %DS の `dy$aDS 値 )" `result$aP="offsetblur" /> <`feFlood$e0 flood-color="( %DS の `flood-color$p 値 )" flood-opacity="( %DS の `flood-opacity$p 値 )" /> <`feComposite$e0 `in2$aCp="offsetblur" `operator$aCp="in" /> <`feMerge$e0> <`feMergeNode$e0/> <`feMergeNode$e0 in="( %DS の `in^a 画像 )"/> </feMerge>
上に与えた %DS と等価な効果は、 次の手続きに細分化される… 【上の~codeの記述を順になぞってるだけなので、この訳では省略する。】 ◎ The above divided into steps: ◎ Take the alpha channel of the input to the feDropShadow filter primitive and the stdDeviation on the feDropShadow and do processing as if the following feGaussianBlur was applied: <feGaussianBlur in="alpha-channel-of-feDropShadow-in" stdDeviation="stdDeviation-of-feDropShadow"/> ◎ Offset the result of step 1 by dx and dy as specified on the feDropShadow element, equivalent to applying an feOffset with these parameters: <feOffset dx="dx-of-feDropShadow" dy="dy-of-feDropShadow" result="offsetblur"/> ◎ Do processing as if an feFlood element with flood-color and flood-opacity as specified on the feDropShadow was applied: <feFlood flood-color="flood-color-of-feDropShadow" flood-opacity="flood-opacity-of-feDropShadow"/> ◎ Composite the result of the feFlood in step 3 with the result of the feOffset in step 2 as if an feComposite filter primitive with operator="in" was applied: <feComposite in2="offsetblur" operator="in"/> ◎ Finally merge the result of the previous step, doing processing as if the following feMerge was performed: <feMerge> <feMergeNode/> <feMergeNode in="in-of-feDropShadow"/> </feMerge>
注記: 上では、 `feDropShadow$e 原始filterを,等価な~treeに展開して定義しているが、 その様に実装することは要求されない — ~UAには、 各~手続きを別々に行うことなく,取扱いを最適化することが期待されている。 ◎ Note: that while the definition of the feDropShadow filter primitive says that it can be expanded into an equivalent tree it is not required that it is implemented like that. The expectation is that user agents can optimize the handling by not having to do all the steps separately.
`SVGFEDropShadowElement$I ~DOM~interfaceを超えて `feDropShadow$e 原始filterの内部に~accessする仕方はない — すなわち、 原始filterが等価な~treeとして実装されたとしても,その~treeは~DOMに公開されないモノトスル。 ◎ Beyond the DOM interface SVGFEDropShadowElement there is no way of accessing the internals of the feDropShadow filter primitive, meaning if the filter primitive is implemented as an equivalent tree then that tree must not be exposed to the DOM.
属性定義- `dx@aDS = "`number$t"
- `dy@aDS = "`number$t"
- 順に,落影の[ ~X, ~Y ]~offsetを与える。 ◎ The x offset of the drop shadow.
- 両~属性とも,`初期~値$は `2^v とする。 ◎ The initial value for dx is 2.
- これらの属性は、 上述した内部 `feOffset$e 要素の[ `dx$aOf / `dy$aOf ]属性に回送される。 ◎ This attribute is then forwarded to the dx attribute of the internal feOffset element.
- ~animate可能。 ◎ Animatable: yes. ◎ dy = "<number>" ◎ The y offset of the drop shadow. ◎ The initial value for dy is 2. ◎ This attribute is then forwarded to the dy attribute of the internal feOffset element. ◎ Animatable: yes.
- `stdDeviation@aDS = "`number-optional-number$t"
- 落影におけるボカシ演算~用の標準偏差を与える。 ◎ The standard deviation for the blur operation in the drop shadow.
- `初期~値$は `2^v とする。 ◎ The initial value for stdDeviation is 2.
- この属性は、 上述した内部 `feGaussianBlur$e 要素の `stdDeviation$aGB 属性に回送される。 ◎ This attribute is then forwarded to the stdDeviation attribute of the internal feGaussianBlur element.
- ~animate可能。 ◎ Animatable: yes.
9.13. 原始filter `feFlood^e
◎要素名 `feFlood@e ◎分類 `原始filter$ ◎内容 任意個数, 任意順序の,次に挙げる要素 ⇒# `記述的~要素$, `animate$e, `script$e, `set$e ◎属性 `中核~属性$, `呈示~属性$, `原始filter属性$, `class$a, `style$a ◎界面 `SVGFEFloodElement$I ◎表終この原始filterは、[ `flood-color$p, `flood-opacity$p ]~propによる[ 色, 不透明度 ]値で埋められた矩形を作成する。 矩形の大きさは `feFlood$e 要素により確立された`原始filter下位領域$と同じになる。 ◎ This filter primitive creates a rectangle filled with the color and opacity values from properties flood-color and flood-opacity. The rectangle is as large as the filter primitive subregion established by the feFlood element.
9.13.1. `flood-color^p ~prop
◎名 `flood-color@p ◎値 `color$t ◎初 `black^v ◎適 `feFlood$e, `feDropShadow$e 要素 ◎継 されない ◎百 受容しない ◎算 指定されたとおり【`算出d色$】 ◎順 文法に従う ◎ア 算出d値の型による ◎表終`flood-color$p ~propは、 現在の`原始filter下位領域$を どの色で塗潰すかを指示する。 ◎ The flood-color property indicates what color to used to flood the current filter primitive subregion.
`flood-color$p ~propは、 ~SVG要素~用の`呈示~属性$1である。 ◎ The flood-color property is a presentation attribute for SVG elements.
9.13.2. `flood-opacity^p ~prop
◎名 `flood-opacity@p ◎値 `opacity$tp ◎初 `1^v ◎適 `feFlood$e, `feDropShadow$e 要素 ◎継 されない ◎百 受容しない ◎算 指定d値を実数に変換して, 0 以上 1 以下に切詰めた結果 ◎ the specified value converted to a number, clamped to the range [0,1] ◎順 文法に従う ◎ア 算出d値の型による ◎表終`flood-opacity$p ~propは `原始filter下位領域$全体にわたって利用する不透明度~値を定義する。 `flood-color$p 値の~alpha~channelは、 この~propの算出d値で乗算されることになる。 ◎ The flood-opacity property defines the opacity value to use across the entire filter primitive subregion. If the flood-color value includes an alpha channel, the alpha channel gets multiplied with the computed value of the flood-opacity property.
`flood-opacity$p ~propは、 ~SVG要素~用の`呈示~属性$1である。 ◎ The flood-opacity property is a presentation attribute for SVG elements.
9.14. 原始filter `feGaussianBlur^e
◎要素名 `feGaussianBlur@e ◎分類 `原始filter$ ◎内容 任意個数, 任意順序の,次に挙げる要素 ⇒# `記述的~要素$, `animate$e, `script$e, `set$e ◎属性 `中核~属性$, `呈示~属性$, `原始filter属性$, `class$a, `style$a, `in$aP, `stdDeviation$aGB, `edgeMode$aGB ◎界面 `SVGFEGaussianBlurElement$I ◎表終この原始filterは、 入力~画像~上で~Gaussianボカシを遂行する。 ◎ This filter primitive performs a Gaussian blur on the input image.
~Gaussianボカシ~kernelは、 次に与える正規化された畳込みの近似である: ◎ The Gaussian blur kernel is an approximation of the normalized convolution: • G(x,y) = H(x)I(y)
ここで: ◎ where
- `H^op( %x ) = `exp^op( −%x ~MUL %x ~DIV ( 2 ~MUL %s ~MUL %s ) ) ~DIV ( `sqrt^op( 2 ~MUL π ) ~MUL %s ) ◎ H(x) = exp(-x2/ (2s2)) / sqrt(2π * s2) ◎ and
- `I^op( %y ) = `exp^op( −%y ~MUL %y ~DIV ( 2 ~MUL %t ~MUL %t ) ) ~DIV ( `sqrt^op( 2 ~MUL π ) ~MUL %t ) ◎ I(y) = exp(-y2/ (2t2)) / sqrt(2π * t2)
- [ %s, %t ]は、 順に `stdDeviation$aGB により指定された[ ~X, ~Y ]方向の標準偏差を表す。 ◎ with "s" being the standard deviation in the x direction and "t" being the standard deviation in the y direction, as specified by stdDeviation.
`stdDeviation$aGB 用に値が 1 個だけ供された場合でも、 これは 分離-可能な畳込みとして実装できる。 %s が大きい( %s ~GTE 2.0 )場合、 近似を利用できる… 【以下、この箇所は未訳。】 ◎ 重複 The value of stdDeviation can be either one or two numbers. If two numbers are provided, the first number represents a standard deviation value along the x-axis of the current coordinate system and the second value represents a standard deviation in Y. If one number is provided, then that value is used for both X and Y. ◎ Even if only one value is provided for stdDeviation, this can be implemented as a separable convolution. ◎ For larger values of "s" (s >= 2.0), an approximation can be used: Three successive box-blurs build a piece-wise quadratic convolution kernel, which approximates the Gaussian kernel to within roughly 3%. ◎ let d = floor(s * 3 * sqrt(2 * π) / 4 + 0.5) ◎ ... if d is odd, use three box-blurs of size "d", centered on the output pixel. ◎ ... if d is even, two box-blurs of size "d" (the first one centered on the pixel boundary between the output pixel and the one to the left, the second one centered on the pixel boundary between the output pixel and the one to the right) and one box blur of size "d+1" centered on the output pixel. ◎ The approximation formula also applies correspondingly to "t".
この演算は、 画像の~alphaのみに~~利用されることが多い — 組込みの入力により生産される `SourceAlpha$v など。 実装は,そのような単~channelの事例を最適化してもヨイが、 この最適化は,~privacyの懸念へ導く場合には省略するモノトスル(計時~攻撃の詳細~については、 `~privacyと~security上の考慮点$を見よ)。 入力が無限な拡がりで, 定数である場合(例: ベタ色による `FillPaint$v )、 この演算による効果はない。 入力が無限な拡がりで, ~filterの結果は `feTile$e への入力である場合、 この~filterは`周期的~境界~条件$で評価される。 ◎ Frequently this operation will take place on alpha-only images, such as that produced by the built-in input, SourceAlpha. The implementation may notice this and optimize the single channel case. This optimization must be omitted if it leads to privacy concerns of any matter. (See section Privacy and Security Considerations for more details about timing attacks.) If the input has infinite extent and is constant (e.g FillPaint where the fill is a solid color), this operation has no effect. If the input has infinite extent and the filter result where the fill is a solid color) is the input to an feTile, the filter is evaluated with periodic boundary conditions.
属性定義- `stdDeviation@aGB = "`number-optional-number$t"
- ボカシ演算~用の標準偏差を与える。 2 個の `number$t 値は、 順に[ ~X軸~沿い, ~Y軸~沿い ]の標準偏差~値を`~filter座標系$単位で表現する。 供された値が 1 個だけの場合、 その値が 2 個目の値にも利用される。 ◎ The standard deviation for the blur operation. If two <number> s are provided, the first number represents a standard deviation value along the x-axis of the coordinate system established by attribute primitiveUnits on the filter element. The second value represents a standard deviation in Y. If one number is provided, then that value is used for both X and Y.
- 0 以下の値は、 この原始filterによる効果を不能化する(すなわち、 `通過~filter$になる)。 ◎ A negative value or a value of zero disables the effect of the given filter primitive (i.e., the result is the filter input image).
- `stdDeviation$aGB の[ ~X, ~Y ]片方のみ `0^v にされた場合、 ボカシ効果は、 もう片方の方向のみに適用される。 ◎ If stdDeviation is 0 in only one of X or Y, then the effect is that the blur is only applied in the direction that has a non-zero value.
- `初期~値$は `0^v とする。 ◎ The initial value for stdDeviation is 0.
- ~animate可能。 ◎ Animatable: yes.
- `edgeMode@aGB = "`duplicate$v | `wrap$v | `mirror$v | `~noneE$v"
- 入力~画像を必要yなだけ どの色~値で拡げるかを決定する — 各種~値の意味は、 `feConvolveMatrix$e の `edgeMode$aCv 属性と同様に定義される。 【なので、この項の和訳は省略する。】 ◎ Determines how to extend the input image as necessary with color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image. ◎ duplicate indicates that the input image is extended along each of its borders as necessary by duplicating the color values at the given edge of the input image. ◎ Original N-by-M image, where m=M-1 and n=N-1: ◎ wrap indicates that the input image is extended by taking the color values from the opposite edge of the image. ◎ mirror indicates that the input image is extended by taking color values mirrored across the edge being sampled beyond. ◎ The value none indicates that the input image is extended with pixel values of zero for R, G, B and A.
- `初期~値$は `~noneE$v とする。 ◎ The initial value for edgeMode is none.
- ~animate可能。 ◎ Animatable: yes.
`§ 序論の例@#intro$に、 `feGaussianBlur$e 原始filterを用立てて落影~効果を作成する例を見れる。 ◎ The example at the start of this chapter makes use of the feGaussianBlur filter primitive to create a drop shadow effect.
9.15. 原始filter `feImage^e
◎要素名 `feImage@e ◎分類 `原始filter$ ◎内容 任意個数, 任意順序の,次に挙げる要素 ⇒# `記述的~要素$, `animate$e, `animateTransform$e, `script$e, `set$e ◎属性 `中核~属性$, `呈示~属性$, `原始filter属性$, `class$a, `style$a, `externalResourcesRequired$a, `preserveAspectRatio$aI, `~xlink_href$aI, `href$aI, `crossorigin$aI ◎界面 `SVGFEImageElement$I ◎表終この原始filterは、 この~filter要素の外部にある,[ ~RGBA~rasterの中に[ 読込まれた/描画された ]~graphic ]を指し、 それが,原始filterの結果になる。 ◎ This filter primitive refers to a graphic external to this filter element, which is loaded or rendered into an RGBA raster and becomes the result of the filter primitive.
この原始filterは、 外部~画像を指したり,~SVGを成す別の~~断片を参照し得る。 それは、 ~graphicは外部~sourceから来ることを除き,組込みの画像~source `SourceGraphic$v に類似な画像を生産する。 ◎ This filter primitive can refer to an external image or can be a reference to another piece of SVG. It produces an image similar to the built-in image source SourceGraphic except that the graphic comes from an external source.
`href$aI が[ ~JPEG, ~PNG, ~SVG ]~fileなどの自立的な画像~資源を参照する場合、 その資源は `image$e 要素の挙動に則って描画される。 他の場合、 参照~先の資源は、 `use$e 要素の挙動に則って描画される。 いずれの事例でも,現在の利用元~座標系は、 `filter$e 要素の `primitiveUnits$aF 属性の値に依存する。 `feImage$e 要素の `preserveAspectRatio$aI 属性の処理は, `image$e 要素のそれに一致する。 ◎ If the href references a stand-alone image resource such as a JPEG, PNG or SVG file, then the image resource is rendered according to the behavior of the image element; otherwise, the referenced resource is rendered according to the behavior of the use element. In either case, the current user coordinate system depends on the value of attribute primitiveUnits on the filter element. The processing of the preserveAspectRatio attribute on the feImage element is identical to that of the image element.
`href$aI は[ ~downloadに失敗した/ 存在しない/ 表示できない(例:~supportされる画像~形式ではない) ]場合には、 空~画像(横幅または縦幅 0 )を参照する — 原始filter下位領域は`透明な黒$で埋められる。 ◎ A href reference that is an empty image (zero width or zero height), that fails to download, is non-existent, or that cannot be displayed (e.g. because it is not in a supported image format) fills the filter primitive subregion with transparent black.
参照~先の画像を機器~座標系に合致するよう~sampleし直す必要がある場合、 高品質~viewerには,双線型や双三次などの適切な補間~技法を用立てることが推奨される。 どれを選ぶかは、 可用な補間法の速さに依存して, `image-rendering$p ~prop設定により影響され得る。 ◎ When the referenced image must be resampled to match the device coordinate system, it is recommended that high quality viewers make use of appropriate interpolation techniques, for example bilinear or bicubic. Depending on the speed of the available interpolents, this choice may be affected by the image-rendering property setting.
属性定義- `~xlink_href@aI = "`url$t"
- `href$aI 属性を見よ。 ◎ See href attribute.
- ~animate可能。 ◎ Animatable: yes.
- 注記: この `~xlink_href^a 属性は、 非推奨にされたので,新たな内容にて利用されるべきでない。 これが含まれている理由は、 もっぱら,後方-互換性を得るためである。 作者は、 代わりに `href$aI 属性を利用するべきである。 ◎ Note: This xlink:href attribute is deprecated and should not be used in new content, it’s included for backwards compatibility reasons only. Authors should use the href attribute instead.
- `href@aI = "`url$t"
- 画像を与える[ 資源または要素 ]を指す `url$t 。 ◎ An <url> to an image resource or to an element.\
- [ `~xlink_href$aI, `href$aI ]両~属性が指定された場合、 後者が前者を上書きする。 ◎ If both, the xlink:href and the href attribute are specified, the latter overrides the first definition.
- ~animate可能。 ◎ Animatable: yes.
- `preserveAspectRatio@aI = "[`defer^v] `align^t [`meetOrSlice^t]"
- `preserveAspectRatio$a `SVG11$r を見よ。 ◎ See preserveAspectRatio.
- `初期~値$は `xMidYMid meet^v とする。 ◎ The initial value for preserveAspectRatio is xMidYMid meet.
- ~animate可能。 ◎ Animatable: yes.
- `crossorigin@aI = "`anonymous^v | `use-credentials^v"
- この属性は、 `~CORS設定群~属性$である `HTML$r 。 その目的は、 非同一-生成元~accessを許容する第三者-主体~siteからの画像を `feDisplacementMap$e に利用できるようにすることである — `その要素に対する制約@#fedisplacemnentmap-restrictions$を見よ。 ◎ The crossorigin attribute is a CORS settings attribute. Its purpose is to allow images from third-party sites that allow cross-origin access to be used with feDisplacementMap. For the defintion see crossorigin attribute for the img tag [HTML] and the Privacy and Security Considerations section in this specification.
- ~animate不可。 ◎ Animatable: no.
画像が~objに相対的に どう配置されるかを,次の例に示す: ◎ The following example illustrates how images are placed relative to an object. From left to right:
- 図左: 画像の既定の配置。 画像は、 自身の縦横比は保全しつつ,`~filter領域$内に収まる最大~sizeにされた上で、 領域~内で中央寄せにされることに注意。 ◎ The default placement of an image. Note that the image is centered in the filter region and has the maximum size that will fit in the region consistent with preserving the aspect ratio.
- 図中央: 画像は、 ~objの限界~boxに収まるよう伸張される。 ◎ The image stretched to fit the bounding box of an object.
- 図右: 画像は、 利用元~座標を利用して配置される。 画像は、 先ず最初の項目と同様にされた上で,所与の[ `x$aP, `y$aP ]値により,~objに最も近い~viewportに相対的にズラされる。 ◎ The image placed using user coordinates. Note that the image is first centered in a box the size of the filter region and has the maximum size that will fit in the box consistent with preserving the aspect ratio. This box is then shifted by the given x and y values relative to the viewport the object is in.
<svg width="600" height="250" viewBox="0 0 600 250" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <title> 各種 `feImage^e の用例 ◎ Example feImage - Examples of feImage use </title> <desc> `feImage^e を利用する 3 つの例: 順に,[ 既定の描画, ~box内に収まるようにされた画像, ズラされて切取られた画像 ]を示している。 ◎ Three examples of using feImage, the first showing the default rendering, the second showing the image fit to a box and the third showing the image shifted and clipped. </desc> <defs> <filter id="Default"> <feImage xlink:href="smiley.png" /> </filter> <filter id="Fitted" primitiveUnits="objectBoundingBox"> <feImage xlink:href="smiley.png" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" /> </filter> <filter id="Shifted"> <feImage xlink:href="smiley.png" x="500" y="5" /> </filter> </defs> <rect fill="none" stroke="blue" x="1" y="1" width="598" height="248"/> <g> <rect x="50" y="25" width="100" height="200" filter="url(#Default)"/> <rect x="50" y="25" width="100" height="200" fill="none" stroke="green"/> <rect x="250" y="25" width="100" height="200" filter="url(#Fitted)"/> <rect x="250" y="25" width="100" height="200" fill="none" stroke="green"/> <rect x="450" y="25" width="100" height="200" filter="url(#Shifted)"/> <rect x="450" y="25" width="100" height="200" fill="none" stroke="green"/> </g> </svg>`feImage-01.svg$ex
9.16. 原始filter `feMerge^e
◎要素名 `feMerge@e ◎分類 `原始filter$ ◎内容 任意個数, 任意順序の,次に挙げる要素 ⇒# `記述的~要素$, `feMergeNode$e, `script$e ◎属性 `中核~属性$, `呈示~属性$, `原始filter属性$, `class$a, `style$a ◎界面 `SVGFEMergeElement$I ◎表終この原始filterは、 一連の[ 子 `feMergeNode$e 要素で与えられる入力~画像 ]層を, `over$v 演算子を利用して組成する。 それらの順序は、 最初の子が最下層に対応する。 ◎ This filter primitive composites input image layers on top of each other using the over operator with Input1 (corresponding to the first feMergeNode child element) on the bottom and the last specified input, InputN (corresponding to the last feMergeNode child element), on top.
多くの効果は、 最終~出力~画像を作成するために,いくつもの中間~画像を生産するが、 この~filterは,それらを 1 枚の画像に併合可能にする。 これは,同数の組成-~filterを利用しても行えるが、 この共通的な演算がこの形で可用であれば、 より簡便になり,また実装にいくらか追加的な柔軟性も提供する。 ◎ Many effects produce a number of intermediate layers in order to create the final output image. This filter allows us to collapse those into a single image. Although this could be done by using n-1 Composite-filters, it is more convenient to have this common operation available in this form, and offers the implementation some additional flexibility.
各 `feMerge$e 要素は `feMergeNode$e 下位要素をいくつでも有し得る — そのそれぞれは `in$aP 属性を有する。 ◎ Each feMerge element can have any number of feMergeNode subelements, each of which has an in attribute.
`feMerge$e の正準的な実装は、 効果~全体を 1 個の~RGBA層の中へ描画してから,結果の層を出力~機器に描画する。 併合-法は結合的なので、 ある種の事例では(特に,出力~機器の階調は連続的である場合),順に 1 層ずつ効果を評価して、 出力~機器~上に描画することでも近似として足りるかもしれない。 ◎ The canonical implementation of feMerge is to render the entire effect into one RGBA layer, and then render the resulting layer on the output device. In certain cases (in particular if the output device itself is a continuous tone device), and since merging is associative, it might be a sufficient approximation to evaluate the effect one layer at a time and render each layer individually onto the output device bottom to top.
最上層の画像~入力が `SourceGraphic$v である, かつ この `feMerge$e は~filter内の最後の原始filterである場合、 実装には,その手前まで各~層を描画してから,その上層に `SourceGraphic$v を直に描画することが奨励される。 ◎ If the topmost image input is SourceGraphic and this feMerge is the last filter primitive in the filter, the implementation is encouraged to render the layers up to that point, and then render the SourceGraphic directly from its vector description on top.
`§ 序論の例@#intro$に、 `feMerge$e 原始filterを用立てて, 2 つの中間~画像を共に組成する例を見れる。 ◎ The example at the start of this chapter makes use of the feMerge filter primitive to composite two intermediate filter results together.
9.16.1. ~nodeの併合-法 `feMergeNode^e
◎要素名 `feMergeNode@e ◎分類 なし。 ◎内容 任意個数, 任意順序の,次に挙げる要素 ⇒# `記述的~要素$, `animate$e, `script$e, `set$e ◎属性 `中核~属性$, `in$aP ◎界面 `SVGFEMergeNodeElement$I ◎表終9.17. 原始filter `feMorphology^e
◎要素名 `feMorphology@e ◎分類 `原始filter$ ◎内容 任意個数, 任意順序の,次に挙げる要素 ⇒# `記述的~要素$, `animate$e, `script$e, `set$e ◎属性 `中核~属性$, `呈示~属性$, `原始filter属性$, `class$a, `style$a, `in$aP, `operator$aMp, `radius$aMp ◎界面 `SVGFEMorphologyElement$I ◎表終この原始filterは、 ~artworkを[ “太める” / “細める” ]。 特に、 ~alpha~channelを[ 太める / 細める ]ことは有用になる。 ◎ This filter primitive performs "fattening" or "thinning" of artwork. It is particularly useful for fattening or thinning an alpha channel.
[ 膨張( `dilation^en )/ 侵食( `erosion^en ) ]~kernelは、 縦横が `radius$aMp 属性が与える[ ~X半径, ~Y半径 ]の 2 倍の矩形になる。 [ 膨張/侵食 ]による出力~画素は、[ ~R, ~G, ~B, ~A ]成分ごとに入力~画像の~kernel矩形~内の対応する成分~値の[ 最大/最小 ]になる。 ◎ The dilation (or erosion) kernel is a rectangle with a width of 2*x-radius and a height of 2*y-radius. In dilation, the output pixel is the individual component-wise maximum of the corresponding R,G,B,A values in the input image’s kernel rectangle. In erosion, the output pixel is the individual component-wise minimum of the corresponding R,G,B,A values in the input image’s kernel rectangle.
この演算は、 画像の~alphaのみが~~利用されることが多い — 組込みの入力 `SourceAlpha$v により生産されるものなど。 実装は,そのような単~channelの事例を最適化したいと求めるかもしれないが、 この最適化は,~privacyの懸念へ導く場合には省略するモノトスル(詳細は`~privacyと~security上の考慮点$を見よ)。 ◎ Frequently this operation will take place on alpha-only images, such as that produced by the built-in input, SourceAlpha. In that case, the implementation might want to optimize the single channel case. This optimization must be omitted if it leads to privacy concerns of any matter. (See section Privacy and Security Considerations for more details.)
入力が無限な拡がりで, 定数である場合(例: ベタ色による `FillPaint$v )、 この演算による効果はない。 入力が無限な拡がりで, ~filterの結果は `feTile$e への入力になる場合、 この~filterは`周期的~境界~条件$で評価される。 ◎ If the input has infinite extent and is constant (e.g FillPaint where the fill is a solid color), this operation has no effect. If the input has infinite extent and the filter result is the input to an feTile, the filter is evaluated with periodic boundary conditions.
`feMorphology$e は乗算済み色~値~上で演算するので、 結果の色~値は,常に~alpha~channel以下になる。 ◎ Because feMorphology operates on premultipied color values, it will always result in color values less than or equal to the alpha channel.
属性定義- `operator@aMp = "`erode^v | `dilate^v"
- ~keyword[ `erode^v / `dilate^v ]は、 ~source~graphicを[ 侵食する(すなわち,細める) / 膨張する(すなわち,太める) ]ことを指示する。 ◎ A keyword indicating whether to erode (i.e., thin) or dilate (fatten) the source graphic.
- `初期~値$は `erode^v とする。 ◎ The initial value for operator is erode.
- ~animate可能。 ◎ Animatable: yes.
- `radius@aMp = "`number-optional-number$t"
- 2 個の `number$t 値は、 順に,演算~用の[ ~X半径, ~Y半径 ]を`~filter座標系$単位で表現する。 供された値が 1 個だけの場合、 その値が 2 個目の値にも利用される。 ◎ The radius (or radii) for the operation. If two <number> s are provided, the first number represents a x-radius and the second value represents a y-radius. If one number is provided, then that value is used for both X and Y. The values are in the coordinate system established by attribute primitiveUnits on the filter element.
- 0 以下の値は、 この原始filterによる効果を不能化する(すなわち、 `通過~filter$になる)。 ◎ A negative or zero value disables the effect of the given filter primitive (i.e., the result is the filter input image).
- `初期~値$は `0^v とする。 ◎ The initial value for radius is 0.
- ~animate可能。 ◎ Animatable: yes.
<svg width="5cm" height="7cm" viewBox="0 0 700 500" xmlns="http://www.w3.org/2000/svg" > <title> 各種 `erode^v, `dilate^v の例 ◎ Example feMorphology - Examples of erode and dilate </title> <desc> 外形線が描かれる 5 つの~text文字列。 最初のものは~filterなし。 2, 3 番目のものは `erode^v を, 4, 5 番目のものは `dilate^v を利用する。 ◎ Five text strings drawn as outlines. The first is unfiltered. The second and third use 'erode'. The fourth and fifth use 'dilate'. </desc> <defs> <filter id="Erode3"> <feMorphology operator="erode" in="SourceGraphic" radius="3" /> </filter> <filter id="Erode6"> <feMorphology operator="erode" in="SourceGraphic" radius="6" /> </filter> <filter id="Dilate3"> <feMorphology operator="dilate" in="SourceGraphic" radius="3" /> </filter> <filter id="Dilate6"> <feMorphology operator="dilate" in="SourceGraphic" radius="6" /> </filter> </defs> <rect fill="none" stroke="blue" stroke-width="2" x="1" y="1" width="698" height="498" /> <g isolation="isolate" > <g font-family="Verdana" font-size="75" fill="none" stroke="black" stroke-width="6" > <text x="50" y="90">Unfiltered</text> <text x="50" y="180" filter="url(#Erode3)" >Erode radius 3</text> <text x="50" y="270" filter="url(#Erode6)" >Erode radius 6</text> <text x="50" y="360" filter="url(#Dilate3)" >Dilate radius 3</text> <text x="50" y="450" filter="url(#Dilate6)" >Dilate radius 6</text> </g> </g> </svg>`feMorphology.svg$ex
9.18. 原始filter `feOffset^e
◎要素名 `feOffset@e ◎分類 `原始filter$ ◎内容 任意個数, 任意順序の,次に挙げる要素 ⇒# `記述的~要素$, `animate$e, `script$e, `set$e ◎属性 `中核~属性$, `呈示~属性$, `原始filter属性$, `class$a, `style$a, `in$aP, `dx$aOf, `dy$aOf ◎界面 `SVGFEOffsetElement$I ◎表終この原始filterは、 指定された~vectorにより,入力~画像を~offsetする — 画像~空間における現在の位置から相対的に。 ◎ This filter primitive offsets the input image relative to its current position in the image space by the specified vector.
これは、 落影の様な効果にとり重要になる。 ◎ This is important for effects like drop shadows.
この~filterを適用するときは、 行先の所在は 機器~空間の画素~格子と整列しなくなり得る。 この事例に対しては、 高品質~viewerは,双線型や双三次などの適切な補間~技法を用立てるべきである。 この補間は,画像の視覚的な動きをより滑らかにするので、 とりわけ動的~viewerに推奨される。 静的~viewerにおいては、 この懸念はさほどでもない。 `image-rendering$p ~propの設定にしっかり~~注意して、 作者の意図を決定するべきである。 ◎ When applying this filter, the destination location may be offset by a fraction of a pixel in device space. In this case a high quality viewer should make use of appropriate interpolation techniques, for example bilinear or bicubic. This is especially recommended for dynamic viewers where this interpolation provides visually smoother movement of images. For static viewers this is less of a concern. Close attention should be made to the image-rendering property setting to determine the authors intent.
属性定義- `dx@aOf = "`number$t"
- `dy@aOf = "`number$t"
- 順に,入力~graphicに対する[ ~X軸~沿い, ~Y軸~沿い ]の~offset量を`~filter座標系$単位で与える。 ◎ The amount to offset the input graphic along the x-axis. The offset amount is expressed in the coordinate system established by attribute primitiveUnits on the filter element.
- 両~属性とも,`初期~値$は `0^v とする。 ◎ The initial value for dx is 0.
- 両者とも,~animate可能。 ◎ Animatable: yes. ◎ dy = "<number>" ◎ The amount to offset the input graphic along the y-axis. The offset amount is expressed in the coordinate system established by attribute primitiveUnits on the filter element. ◎ The initial value for dy is 0. ◎ Animatable: yes.
`§ 序論の例@#intro$に、 `feOffset$e 原始filterを用立てて, 元の~source~graphicからの落影を~offsetする例を見れる。 ◎ The example at the start of this chapter makes use of the feOffset filter primitive to offset the drop shadow from the original source graphic.
9.19. 原始filter `feSpecularLighting^e
◎要素名 `feSpecularLighting@e ◎分類 `原始filter$ ◎内容 任意順序で、[ 1 個の`光源~要素$, および 任意個数の[ `記述的~要素$, `script$e 要素 ] ◎属性 `中核~属性$, `呈示~属性$, `原始filter属性$, `class$a, `style$a, `in$aP, `surfaceScale$aSr, `specularConstant$aSr, `specularExponent$aSr, `kernelUnitLength$aSr ◎界面 `SVGFESpecularLightingElement$I ◎表終この原始filterは、 ~alpha~channelを凹凸~mapに利用して,~source~graphicを照らす。 結果の画像は、 光の色に基づく~RGBA画像になる。 照明~計算は、 ~Blinn-Phong照明~modelにおける標準の鏡面反射~係数に従う。 結果の画像は[ 光の色, 光の位置, 入力~凹凸~mapの面~幾何 ]に依存する。 照明~計算の結果は加算される。 この原始filterは、 閲覧者が~Z方向の無限遠にあると見做す(すなわち、 閲覧者の目を指す単位~vectorは、 どこでも ( 0, 0, 1 ) )。 ◎ This filter primitive lights a source graphic using the alpha channel as a bump map. The resulting image is an RGBA image based on the light color. The lighting calculation follows the standard specular component of the Blinn-Phong lighting model. The resulting image depends on the light color, light position and surface geometry of the input bump map. The result of the lighting calculation is added. The filter primitive assumes that the viewer is at infinity in the z direction (i.e., the unit vector in the eye direction is (0,0,1) everywhere).
注記: この原始filterは、 照明~計算の鏡面反射~係数が加味された画像を生産する。 そのような~mapは、[ `feComposite$e の `arithmetic$v 演算による加算を利用して, 2 個目の原始filterからの~textureと組合せる ]ことが意図される。 複数の光源も模倣できる — そのためには、 ~texture画像に適用する前に,`光源~要素$を利用して これらの光~mapをいくつか加算する。 ◎ Note: This filter primitive produces an image which contains the specular reflection part of the lighting calculation. Such a map is intended to be combined with a texture from a second filter primitive using the add term of the arithmetic feComposite method. Multiple light sources can be simulated by adding several of these light maps before applying it to the texture image.
結果の画像の[ ~R, ~G, ~B, ~A ]成分 %S は、 次の式で算出される:
-
[ ~R, ~G, ~B ]成分は:
%k/s ~MUL `pow^op( ⟨ %N, %H ⟩, `specularExponent$aSr ) ~MUL %入射~色 - ~A成分は、 前項の結果の[ ~R, ~G, ~B ]成分の最大になる
ここで:
- %k/s ~EQ `specularConstant$aSr で与えられる鏡面反射~係数
- %N ~EQ `Normalize^op( 面~法線~vector ) (画像~上の位置に依存する)
- %H ~EQ `Normalize^op( %L ~PLUS %E ) — ここで ⇒# %E ~EQ (0, 0, 1) (閲覧者の目を指す単位~vectorを表す), %L ~EQ 光の単位~vector
- %入射~色 ~EQ 差し込む光の~RGB成分
%N, %L, %入射~色 の定義は `feDiffuseLighting$e を見よ
◎ where ks = specular lighting constant N = surface normal unit vector, a function of x and y H = "halfway" unit vector between eye unit vector and light unit vector Lr,Lg,Lb = RGB components of light ◎ See feDiffuseLighting for definition of N and (Lr, Lg, Lb). ◎ The definition of H reflects our assumption of the constant eye vector E = (0,0,1): • H = (L + E) / Norm(L+E) where L is the light unit vector.`feDiffuseLighting$e と違って、 `feSpecularLighting$e ~filterは不透明でない画像を生産する。 これは、 鏡面反射による結果( %S )は、 ~texture化~画像に加算されることが意味される事実に因る。 結果の~alpha~channelは、 色~成分の最大になる — [ 鏡面反射~光が 0 の所では,画像に加算される追加的な被覆率はなく、 全白色は不透明度を加算する ]ことになるようにするため。 ◎ Unlike the feDiffuseLighting, the feSpecularLighting filter produces a non-opaque image. This is due to the fact that the specular result (Sr,Sg,Sb,Sa) is meant to be added to the textured image. The alpha channel of the result is the max of the color components, so that where the specular light is zero, no additional coverage is added to the image and a fully white highlight will add opacity.
`feDiffuseLighting$e, `feSpecularLighting$e ~filterは、 共に適用されることが多い。 実装は、 これを検出して,両~mapをひとまとめに計算してもヨイ。 ◎ The feDiffuseLighting and feSpecularLighting filters will often be applied together. An implementation may detect this and calculate both maps in one pass, instead of two.
属性定義- `surfaceScale@aSr = "`number$t"
- 入力~画像の~alpha ~EQ 1 のときの面の標高を与える。 ◎ height of surface when Ain = 1.
- `初期~値$は `1^v とする。 ◎ The initial value for surfaceScale is 1.
- ~animate可能。 ◎ Animatable: yes.
- `specularConstant@aSr = "`number$t"
- ~Phong照明~modelにおける鏡面反射~係数 %k/s を与える。 ~SVGにおいては、 負でないどの数もとれる。 ◎ ks in Phong lighting model. In SVG, this can be any non-negative number.
- `初期~値$は `1^v とする。 ◎ The initial value for specularConstant is 1.
- ~animate可能。 ◎ Animatable: yes.
- `specularExponent@aSr = "`number$t"
- 鏡面反射~係数~用の指数を与える — 大きくするほど “輝く” 【光沢度】。 ◎ Exponent for specular term, larger is more "shiny".
- `初期~値$は `1^v とする。 ◎ The initial value for specularExponent is 1.
- ~animate可能。 ◎ Animatable: yes.
- `kernelUnitLength@aSr = "`number-optional-number$t"
- 2 個の `number$t 値は、 順に[ %dx, %dy ]値を与える。 供された値が 1 個だけの場合、 その値が 2 個目の値にも利用される。 ◎ The first number is the <dx> value. The second number is the <dy> value. ◎ If the <dy> value is not specified, it defaults to the same value as <dx>.\
- `面~法線の計算~公式$における %dx, %dy 用に意図される現在の距離を`~filter座標系$単位で指示する。 `kernelUnitLength$aSr 用の値(たち)を指定することにより、 ~kernelは拡縮-可能な抽象-座標系~内に定義されるようになる。 ◎ Indicates the intended distance in current filter units (i.e., units as determined by the value of attribute primitiveUnits) for dx and dy, respectively, in the surface normal calculation formulas. By specifying value(s) for kernelUnitLength, the kernel becomes defined in a scalable, abstract coordinate system.
- `初期~値$: この属性が指定されていない場合の[ %dx, %dy ]値は、 所与の ( %x, %y ) 位置に相対的な,ごく小さい差分を表現するべきである — それは,事例によっては 中間~画像における 1 画素~分として実装されるかもしれないが、 画素に基づく座標系なので,拡縮-可能になり得ない。 各種[ 表示-媒体, ~UA ]にわたり,ある程度の一貫性を得るためには、 この属性に値を供することが必要yである。 ◎ If kernelUnitLength is not specified, the dx and dy values should represent very small deltas relative to a given (x,y) position, which might be implemented in some cases as one pixel in the intermediate image offscreen bitmap, which is a pixel-based coordinate system, and thus potentially not scalable. For some level of consistency across display media and user agents, it is necessary that a value be provided for kernelUnitLength.
- ~animate可能。 ◎ Animatable: yes.
光源は、[ `feDistantLight$e, `fePointLight$e, `feSpotLight$e ]いずれかの子~要素により定義される。 光の色は、 `lighting-color$p ~propにより指定される。 ◎ The light source is defined by one of the child elements feDistantLight, fePointLight or feSpotLight. The light color is specified by property lighting-color.
`§ 序論の例@#intro$に、 `feSpecularLighting$e 原始filterを用立てて,高反射率の, ~3D的に見せる効果を達成する例を見れる。 ◎ The example at the start of this chapter makes use of the feSpecularLighting filter primitive to achieve a highly reflective, 3D glowing effect.
9.20. 原始filter `feTile^e
◎要素名 `feTile@e ◎分類 `原始filter$ ◎内容 任意個数, 任意順序の,次に挙げる要素 ⇒# `記述的~要素$, `animate$e, `script$e, `set$e ◎属性 `中核~属性$, `呈示~属性$, `原始filter属性$, `class$a, `style$a, `in$aP ◎界面 `SVGFETileElement$I ◎表終この原始filterは、 繰返され, 入力~画像が~tileされる~patternで,~target矩形を埋める。 ~target矩形の大きさは、 この `feTile$e 要素により確立される`原始filter下位領域$と同じになる。 ◎ This filter primitive fills a target rectangle with a repeated, tiled pattern of an input image. The target rectangle is as large as the filter primitive subregion established by the feTile element.
入力~画像は、 概して,別の原始filterにより[ 基準~tileを定義するために,自前の`原始filter下位領域$ %入力~領域 を伴う ]ように定義される。 `feTile$e は、 基準~tileを[ ~X, ~Y ]両方向に反復的に複写して,~target矩形を完全に埋める。 各~tileの左上隅の所在は、 任意の整数~組 ( %i, %j ) に対し,次で与えられる ⇒# ( %x ~PLUS %i ~MUL %横幅, %y ~PLUS %j ~MUL %縦幅 ) — ここで⇒# ( %x, %y ) は, %入力~領域 の左上隅を表現する。 ( %横幅, %縦幅 ) は, %入力~領域 の ( 横幅, 縦幅 ) を表現する。 ◎ Typically, the input image has been defined with its own filter primitive subregion in order to define a reference tile. feTile replicates the reference tile in both X and Y to completely fill the target rectangle. The top/left corner of each given tile is at location (x + i*width, y + j*height), where (x,y) represents the top/left of the input image’s filter primitive subregion, width and height represent the width and height of the input image’s filter primitive subregion, and i and j can be any integer value.\
ほとんどの事例では, %入力~領域 は、 繰返される~pattern効果を達成するために,この `feTile$e の`原始filter下位領域$より小さくされる。 ◎ In most cases, the input image will have a smaller filter primitive subregion than the feTile in order to achieve a repeated pattern effect.
実装者は、 ~tileされる画像を構築するときには,適切に測定して ~tileの合間のキズを避けるモノトスル — 特に,利用元から機器への変形-が斜傾や回転を含む状況では。 さもなければ、[ ~tileの辺~画素における不透明度~値 ]は,期待される結果より高く/低くなり得る — 特定0の画素に部分的に重合するような隣接する~tileを塗るときの,補間における相互作用に因り。 ◎ Implementers must take appropriate measures in constructing the tiled image to avoid artifacts between tiles, particularly in situations where the user to device transform includes shear and/or rotation. Unless care is taken, interpolation can lead to edge pixels in the tile having opacity values lower or higher than expected due to the interaction of painting adjacent tiles which each have partial overlap with particular pixels.
9.21. 原始filter `feTurbulence^e
◎要素名 `feTurbulence@e ◎分類 `原始filter$ ◎内容 任意個数, 任意順序の,次に挙げる要素 ⇒# `記述的~要素$, `animate$e, `script$e, `set$e ◎属性 `中核~属性$, `呈示~属性$, `原始filter属性$, `class$a, `style$a, `baseFrequency$aTb, `numOctaves$aTb, `seed$aTb, `stitchTiles$aTb, `type$aTb ◎界面 `SVGFETurbulenceElement$I ◎表終この原始filterは、 ~Perlinの乱れ( `turbulence^en )関数を利用して画像を作成する。 それは、 雲や大理石の様な~textureを人工的に合成できるようにする。 この関数の詳細な記述は、 `TaM$r を見よ。 この原始filterによる結果の画像は、 `原始filter下位領域$全体を埋めることになる。 ◎ This filter primitive creates an image using the Perlin turbulence function. It allows the synthesis of artificial textures like clouds or marble. For a detailed description the of the Perlin turbulence function, see "Texturing and Modeling" [TaM]. The resulting image will fill the entire filter primitive subregion for this filter primitive.
1 ~octaveだけ合成することにより,帯域幅が制限された~noiseを作成することもアリである。 ◎ It is possible to create bandwidth-limited noise by synthesizing only one octave.
下に与える C 言語~codeに,この~filter効果に利用される正確な~algoを示す。 【以下、その~algo, およびそれに関連な内容は未訳/省略する。】 ◎ The C code below shows the exact algorithm used for this filter effect.\ 以下未訳 The filter primitive subregion is to be passed as the arguments fTileX, fTileY, fTileWidth and fTileHeight. For fractalSum, you get a turbFunctionResult that is aimed at a range of -1 to 1 (the actual result might exceed this range in some cases). To convert to a color or alpha value, use the formula colorValue = (turbFunctionResult + 1) / 2, then clamp to the range 0 to 1. For turbulence, you get a turbFunctionResult that is aimed at a range of 0 to 1 (the actual result might exceed this range in some cases). To convert to a color or alpha value, use the formula colorValue = turbFunctionResult, then clamp to the range 0 to 1. The following order is used for applying the pseudo random numbers. An initial seed value is computed based on the seed attribute. Then the implementation computes the lattice points for R, then continues getting additional pseudo random numbers relative to the last generated pseudo random number and computes the lattice points for G, and so on for B and A. The generated color and alpha values are in the color space determined by the color-interpolation-filters property: [C code]
属性定義- `baseFrequency@aTb = "`number-optional-number$t"
- ~noise関数~用の基底周波数~parameterを与える。 2 個の `number$t 値は、 順に,[ ~X, ~Y ]方向における基底周波数を表現する。 供された値が 1 個だけの場合、 その値が 2 個目の値にも利用される。 ◎ The base frequency (frequencies) parameter(s) for the noise function. If two <number>s are provided, the first number represents a base frequency in the X direction and the second value represents a base frequency in the Y direction. If one number is provided, then that value is used for both X and Y.
- `初期~値$は `0^v とする。 ◎ The initial value for baseFrequency is 0.
- 負な値は`~supportされない$。 【属性は指定されなかったかのようになる。】 ◎ Negative values are unsupported.
- ~animate可能。 ◎ Animatable: yes.
- `numOctaves@aTb = "`integer$t"
- ~noise関数~用の~octave数~parameterを与える。 ◎ The numOctaves parameter for the noise function.
- `初期~値$は `1^v とする。 ◎ The initial value for numOctaves is 1.
- 負な値は`~supportされない$。 ◎ Negative values are unsupported.
- ~animate可能。 ◎ Animatable: yes.
- 注記: 各~追加的な~octaveによる最終~画像における[ 色, ~alpha ]値への寄与は、 先行する~octaveの半分になる。 追加的な~octaveによる寄与は、 ある時点で,所与の色~深度による色~解像度より小さくなる。 ~UAは、 自身が~supportする色~深度に応じて, 指定された~octave数を切詰めてもヨイ。 (例えば、 色~深度が~channelあたり 8 ~bitの場合、 ~UAは, ~octave数を 9 に切詰めてもヨイ。) ◎ Note: The contribution of each additional octave to the color and alpha values in the final image is one-half of the preceding octave. At some point, the contribution of additional octaves becomes smaller than the color resolution for a given color depth. UAs may clamp the specified value for numOctaves during the processing depending on the supported color depth. (For example: For a color depth of 8 bits per channel, the UA may clamp the value of numOctaves to 9.)
- `seed@aTb = "`number$t"
- 疑似乱数~生成器~用の開始-時の数を与える。 この数 %seed は、 ~algoに渡す前に,`floor^op( %seed ) に丸めるモノトスル。 ◎ The starting number for the pseudo random number generator. ◎ ↓
- `初期~値$は `0^v とする。 ◎ The initial value for seed is 0. ◎ When the seed number is handed over to the algorithm above it must first be truncated, i.e. rounded to the closest integer value towards zero.
- ~animate可能。 ◎ Animatable: yes.
- `stitchTiles@aTb = "`stitch^v | `noStitch^v"
- 値 `noStitch^v に対しては、 乱れ関数を包含する~tileの継目にて滑らかな遷移を達成しようとは試みられない。 結果は継目にて明瞭な不連続性を呈することもある。 ◎ If stitchTiles="noStitch", no attempt is made to achieve smooth transitions at the border of tiles which contain a turbulence function. Sometimes the result will show clear discontinuities at the tile borders.
- 値 `stitch^v に対しては…【以下、この段落は未訳。】 ◎ If stitchTiles="stitch", then the user agent will automatically adjust baseFrequency-x and baseFrequency-y values such that the feTurbulence node’s width and height (i.e., the width and height of the current subregion) contains an integral number of the Perlin tile width and height for the first octave. The baseFrequency will be adjusted up or down depending on which way has the smallest relative (not absolute) change as follows: Given the frequency, calculate lowFreq=floor(width*frequency)/width and hiFreq=ceil(width*frequency)/width. If frequency/lowFreq < hiFreq/frequency then use lowFreq, else use hiFreq. While generating turbulence values, generate lattice vectors as normal for Perlin Noise, except for those lattice points that lie on the right or bottom edges of the active area (the size of the resulting tile). In those cases, copy the lattice vector from the opposite edge of the active area.
- `初期~値$は `noStitch^v とする。 ◎ The initial value for stitchTiles is noStitch.
- ~animate可能。 ◎ Animatable: yes.
- `type@aTb = "`fractalNoise^v | `turbulence^v"
- この原始filterは[ ~noise, 乱れ ]どちらの関数を遂行するべきか,を指示する。 ◎ Indicates whether the filter primitive should perform a noise or turbulence function.
- `初期~値$は `turbulence^v とする。 ◎ The initial value for type is turbulence.
- ~animate可能。 ◎ Animatable: yes.
<svg width="450px" height="325px" viewBox="0 0 450 325" xmlns="http://www.w3.org/2000/svg" > <title> 各種 `feTurbulence^e 演算の例 ◎ Example feTurbulence - Examples of feTurbulence operations </title> <desc> 6 つの矩形な区画に `feTurbulence^e に対する様々の~parameter設定による効果を 示す。 ◎ Six rectangular areas showing the effects of various parameter settings for feTurbulence. </desc> <g font-family="Verdana" text-anchor="middle" font-size="10" > <defs> <filter id="Turb1" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%" > <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2"/> </filter> <filter id="Turb2" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%" > <feTurbulence type="turbulence" baseFrequency="0.1" numOctaves="2"/> </filter> <filter id="Turb3" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%" > <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="8"/> </filter> <filter id="Turb4" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%" > <feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="4"/> </filter> <filter id="Turb5" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%" > <feTurbulence type="fractalNoise" baseFrequency="0.4" numOctaves="4"/> </filter> <filter id="Turb6" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%" > <feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="1"/> </filter> </defs> <rect x="1" y="1" width="448" height="323" fill="none" stroke="blue" stroke-width="1" /> <rect x="25" y="25" width="100" height="75" filter="url(#Turb1)" /> <text x="75" y="117">type=turbulence</text> <text x="75" y="129">baseFrequency=0.05</text> <text x="75" y="141">numOctaves=2</text> <rect x="175" y="25" width="100" height="75" filter="url(#Turb2)" /> <text x="225" y="117">type=turbulence</text> <text x="225" y="129">baseFrequency=0.1</text> <text x="225" y="141">numOctaves=2</text> <rect x="325" y="25" width="100" height="75" filter="url(#Turb3)" /> <text x="375" y="117">type=turbulence</text> <text x="375" y="129">baseFrequency=0.05</text> <text x="375" y="141">numOctaves=8</text> <rect x="25" y="180" width="100" height="75" filter="url(#Turb4)" /> <text x="75" y="272">type=fractalNoise</text> <text x="75" y="284">baseFrequency=0.1</text> <text x="75" y="296">numOctaves=4</text> <rect x="175" y="180" width="100" height="75" filter="url(#Turb5)" /> <text x="225" y="272">type=fractalNoise</text> <text x="225" y="284">baseFrequency=0.4</text> <text x="225" y="296">numOctaves=4</text> <rect x="325" y="180" width="100" height="75" filter="url(#Turb6)" /> <text x="375" y="272">type=fractalNoise</text> <text x="375" y="284">baseFrequency=0.1</text> <text x="375" y="296">numOctaves=1</text> </g> </svg>`feTurbulence.svg$ex
10. `color-interpolation-filters^p ~prop
`color-interpolation-filters$p ~propの記述は、 次に従う: ◎ The description of the color-interpolation-filters property is as follows:
◎名 `color-interpolation-filters@p ◎値 `auto^v | `sRGB^v | `linearRGB^v ◎初 `linearRGB^v ◎適 すべての`原始filter$ ◎継 される ◎百 受容しない ◎算 指定されたとおり ◎順 文法に従う ◎ア 離散的 ◎表終- `auto@v
- ~UAは、 ~filter効果における色~演算~用に[ `sRGB$v, `linearRGB$v ]どちらの空間も選べる — すなわち、 作者は,色~演算は 特定0の色~空間で生じることを要求していない — ことを指示する。 ◎ Indicates that the user agent can choose either the sRGB or linearRGB spaces for filter effects color operations. This option indicates that the author doesn’t require that color operations occur in a particular color space.
- `sRGB@v
- ~filter効果における色~演算は、 ~gamma符号化された`~sRGB$色~空間~内で生じるべきであることを指示する。 ◎ Indicates that filter effects color operations should occur in the gamma-encoded sRGB color space.
- `linearRGB@v
- ~filter効果における色~演算は、 `光に線形な~sRGB$色~空間~内で生じるべきであることを指示する。 ◎ Indicates that filter effects color operations should occur in the linear-light sRGB color space.
`color-interpolation-filters$p ~propは、 ~filter効果を介して遂行される画像処理~演算~用の色~空間を指定する。 ◎ The color-interpolation-filters property specifies the color space for imaging operations performed via filter effects.
注記: `color-interpolation-filters$p ~propによる影響は、 ~filter演算に限られる。 したがって[ `feOffset$e, `feImage$e, `feTile$e, `feFlood$e ]の様な原始filterに対する効果はない。 ◎ Note: The color-interpolation-filters property just has an affect on filter operations. Therefore, it has no effect on filter primitives like feOffset, feImage, feTile or feFlood.
注記: `color-interpolation-filters$p の初期~値 は `linearRGB^v であり, `color-interpolation$p の初期~値 `sRGB^v とは異なる。 したがって,既定の事例では、 ~filter効果~演算は `linearRGB^v 色~空間~内で生じる一方で,他のすべての色~補間は~sRGB色~空間~内で生じる。 ◎ Note: The color-interpolation-filters has a different initial value than color-interpolation. color-interpolation-filters has an initial value of linearRGB, where as color-interpolation has an initial value of sRGB. Thus, in the default case, filter effects operations occur in the linearRGB color space, whereas all other color interpolations occur by default in the sRGB color space.
注記: `color-interpolation-filters$p ~propは、 `~filter関数$には影響しない — 関数は、 ~sRGB色~空間~内で演算するので。 ◎ Note: The color-interpolation-filters property has no affect on Filter Functions, which operate in the sRGB color space.
`color-interpolation-filters$p ~propは、 ~SVG要素~用の`呈示~属性$1である。 ◎ The color-interpolation-filters property is a presentation attribute for SVG elements.
11. 光源を与える要素と~prop
11.1. 序論
以下の節では、 `光源~要素@ と呼ばれる[ `feDistantLight$e, `fePointLight$e, `feSpotLight$e ]要素, および 光の色を定義する `lighting-color$p ~propを定義する。 ◎ The following sections define the elements that define a light source, feDistantLight, fePointLight and feSpotLight, and property lighting-color, which defines the color of the light.
11.2. 光源 `feDistantLight^e
◎要素名 `feDistantLight@e ◎分類 `光源~要素$ ◎内容 任意個数, 任意順序の,次に挙げる要素 ⇒# `記述的~要素$, `animate$e, `script$e, `set$e ◎属性 `中核~属性$, `azimuth$aDt, `elevation$aDt ◎界面 `SVGFEDistantLightElement$I ◎表終 属性定義- `azimuth@aDt = "`number$t"
- 光源を指す方位角 — すなわち,~X軸から時計回りによる ~XY平面~上の光源~方向を指す角度 — を度数で与える。 ◎ Direction angle for the light source on the XY plane (clockwise), in degrees from the x axis.
- `初期~値$は `0^v とする。 ◎ The initial value for azimuth is 0.
- ~animate可能。 ◎ Animatable: yes.
- `elevation@aDt = "`number$t"
- 光源を指す仰角 — ~XY平面から~Z軸へ向かって光源~方向を指す角度 — を度数で与える。 正な~Z軸は閲覧者を向くことに注意。 ◎ Direction angle for the light source from the XY plane towards the Z-axis, in degrees. Note that the positive Z-axis points towards the viewer.
- `初期~値$は `0^v とする。 ◎ The initial value for elevation is 0.
- ~animate可能。 ◎ Animatable: yes.
次の図式に角度を示す — それは,~XYZ座標系において[ `azimuth$aDt, `elevation$aDt ]を表現する。 ◎ The following diagram illustrates the angles which azimuth and elevation represent in an XYZ coordinate system.
11.3. 光源 `fePointLight^e
◎要素名 `fePointLight@e ◎分類 `光源~要素$ ◎内容 任意個数, 任意順序の,次に挙げる要素 ⇒# `記述的~要素$, `animate$e, `script$e, `set$e ◎属性 `中核~属性$, `x$aPt, `y$aPt, `z$aPt ◎界面 `SVGFEPointLightElement$I ◎表終 属性定義- `x@aPt = "`number$t"
- `y@aPt = "`number$t"
- `z@aPt = "`number$t"
- 順に,`~filter座標系$における光源の[ ~X, ~Y, ~Z ]座標を与える。 ◎ X location for the light source in the coordinate system established by attribute primitiveUnits on the filter element.
- いずれも,`初期~値$は `0^v とする。 ◎ The initial value for x is 0.
- いずれも,~animate可能。 ◎ Animatable: yes. ◎ y = "<number>" ◎ Y location for the light source in the coordinate system established by attribute primitiveUnits on the filter element. ◎ The initial value for y is 0. ◎ Animatable: yes. ◎ z = "<number>" ◎ Z location for the light source in the coordinate system established by attribute primitiveUnits on the filter element,\
- 初期`局所~座標系$における~Z軸は、 正な向きが閲覧者を指し,その`単位は~XY平面と同じ$†とする。 【†参照先の記述は意味が通らない(他所に現れるこの句も同様)。】 ◎ assuming that, in the initial local coordinate system , the positive Z-axis comes out towards the person viewing the content and assuming that one unit along the Z-axis equals one unit in X and Y. ◎ The initial value for z is 0. ◎ Animatable: yes.
11.4. 光源 `feSpotLight^e
◎要素名 `feSpotLight@e ◎分類 `光源~要素$ ◎内容 任意個数, 任意順序の,次に挙げる要素 ⇒# `記述的~要素$, `animate$e, `script$e, `set$e ◎属性 `中核~属性$, `x$aSt, `y$aSt, `z$aSt, `pointsAtX$aSt, `pointsAtY$aSt, `pointsAtZ$aSt, `specularExponent$aSt, `limitingConeAngle$aSt ◎界面 `SVGFESpotLightElement$I ◎表終 属性定義- `x@aSt = "`number$t"
- `y@aSt = "`number$t"
- `z@aSt = "`number$t"
- 順に,`~filter座標系$における光源の[ ~X, ~Y, ~Z ]座標を与える。 ◎ X location for the light source in the coordinate system established by attribute primitiveUnits on the filter element.
- いずれも,`初期~値$は `0^v とする。 ◎ The initial value for x is 0.
- いずれも,~animate可能。 ◎ Animatable: yes. ◎ y = "<number>" ◎ Y location for the light source in the coordinate system established by attribute primitiveUnits on the filter element. ◎ The initial value for y is 0. ◎ Animatable: yes. ◎ z = "<number>" ◎ Z location for the light source in the coordinate system established by attribute primitiveUnits on the filter element,\
- 初期`局所~座標系$における~Z軸は、 正な向きが閲覧者を指し,その`単位は~XY平面と同じ$とする。 ◎ assuming that, in the initial local coordinate system, the positive Z-axis comes out towards the person viewing the content and assuming that one unit along the Z-axis equals one unit in X and Y. ◎ The initial value for z is 0. ◎ Animatable: yes.
- `pointsAtX@aSt = "`number$t"
- `pointsAtY@aSt = "`number$t"
- `pointsAtZ@aSt = "`number$t"
- 順に,`~filter座標系$における光源が指している地点の[ ~X, ~Y, ~Z ]座標を与える。 ◎ X location in the coordinate system established by attribute primitiveUnits on the filter element of the point at which the light source is pointing.
- いずれも,`初期~値$は `0^v とする。 ◎ The initial value for pointsAtX is 0.
- いずれも,~animate可能。 ◎ Animatable: yes. ◎ pointsAtY = "<number>" ◎ Y location in the coordinate system established by attribute primitiveUnits on the filter element of the point at which the light source is pointing. ◎ The initial value for pointsAtY is 0. ◎ Animatable: yes. ◎ pointsAtZ = "<number>" ◎ Z location in the coordinate system established by the attribute primitiveUnits on the filter element of the point at which the light source is pointing,\
- 初期`局所~座標系$における~Z軸は、 正な向きが閲覧者を指し,その`単位は~XY平面と同じ$とする。 ◎ assuming that, in the initial local coordinate system, the positive Z-axis comes out towards the person viewing the content and assuming that one unit along the Z-axis equals one unit in X and Y. ◎ The initial value for pointsAtZ is 0. ◎ Animatable: yes.
- `specularExponent@aSt = "`number$t"
- 光源の焦点を制御する,指数~値を与える。 ◎ Exponent value controlling the focus for the light source.
- `初期~値$は `1^v とする。 ◎ The initial value for specularExponent is 1.
- `specularExponent$aSt の利用-方法は、 § 原始filter `feDiffuseLighting$e を見よ。 ◎ See section Filter primitive <feDiffuseLighting> for how to use specularExponent.
- 注記: `feSpotLight$e 用の `specularExponent$aSt が受け持つ利用事例は、 `feSpecularLighting$e 用の `specularExponent$aSr と異なる。 ◎ Note: specularExponent for feSpotLight serves a different use case than specularExponent for feSpecularLighting.
- ~animate可能。 ◎ Animatable: yes.
- `limitingConeAngle@aSt = "`number$t"
- 光が投射される領域を制約する,制限-用の錐を与える — すなわち、 錐の外側には、 光は投射されない。 `limitingConeAngle$aSt は、 錐光源の軸(すなわち,光源と それが指している地点を通る軸)と錐光源の錐との間の角度を度数で表現する。 ~UAは、 ~anti-aliasingなど。錐の境界を滑らかにする技法を適用するべきである。 ◎ A limiting cone which restricts the region where the light is projected. No light is projected outside the cone. limitingConeAngle represents the angle in degrees between the spot light axis (i.e. the axis between the light source and the point to which it is pointing at) and the spot light cone. User agents should apply a smoothing technique such as anti-aliasing at the boundary of the cone.
- 値が指定されていない場合、 制限-用の錐は適用されないことになる。 【この記述は、実際の計算式( 90 度が指定されたとき同じになり,錐は依然として “在る” )と合致していない。】 ◎ If no value is specified, then no limiting cone will be applied.
- ~animate可能。 ◎ Animatable: yes.
11.5. `lighting-color^p ~prop
◎名 `lighting-color@p ◎値 `color$t ◎初 `white^v ◎適 `feDiffuseLighting$e, `feSpecularLighting$e 要素 ◎継 されない ◎百 受容しない ◎算 指定されたとおり【`算出d色$】 ◎順 文法に従う ◎ア 算出d値の型による ◎表終`lighting-color$p ~propは、 `原始filter$[ `feDiffuseLighting$e / `feSpecularLighting$e ]用の光源の色を定義する。 ◎ The lighting-color property defines the color of the light source for filter primitives feDiffuseLighting and feSpecularLighting.
`lighting-color$p ~propは、 ~SVG要素~用の`呈示~属性$1である。 ◎ The lighting-color property is a presentation attribute for SVG elements.
12. ~filterを与える~CSS `image^t 値
~CSS `image$t 値は、 ~CSS `filter$p ~prop用に指定された`~filter関数$で~filterできる。 この仕様は、 `image$t 用の `filter$ft 関数を導入する — その構文は、 次で与えられる: ◎ CSS <image> values can be filtered with the filter functions specified for the CSS filter property. This specification introduces the <image> <filter()> function with the following syntax:
`filter@f = filter( [ `image$t | `string$t ], `filter-value-list$t )
`filter$ft 関数は、 1 個目の引数 `image$t が指す画像に 2 個目の引数を成す一連の~filter規則 — ~CSS `filter$p ~prop用に指定された,~filter関数~list — を適用した結果の画像を返す。 `~filter領域$と~filter効果【が及ぶ?】領域は、 入力 `image$t の`具象-~obj~size$に則って~sizeされる。 ◎ The <filter()> function takes two arguments. The first argument is an <image>. The second is a filter function list as specified for the CSS filter property. The function takes the <image> parameter and applies the filter rules, returning a processing image. Filter- and filter effect regions are sized according to the concrete object size of the input <image>.
注記: 元の画像の寸法, 原点は保全されなければナラナイので、 全部的に不透明な画像に対する `drop-shadow$ft の様な一部の~filter効果は,影響しなくなり得る。 ◎ Note: Since the dimension and origin of the original image must be preserved, some filter effects like <drop-shadow()> on a fully opaque image may not have any affect.
`blur$ft 関数に対しては、 `feGaussianBlur$e 要素の `edgeMode$aGB 属性は `duplicate$v に設定される。 これは、 ~filterされる入力~画像の辺~上でより好適な結果を生産する。 ◎ For the <blur()> function the edgeMode attribute on the feGaussianBlur element is set to duplicate. This produces more pleasant results on the edges of the filtered input image.
12.1. `filter^f の補間-法
[ 開始-時, 終止-時 ]両~画像とも `filter$ft であって,利用する`~filter関数$においてのみ相違し得る場合、 それらは,`~filter関数~listの補間$に則って,双方の[ ~filter関数が成す~list ]を補間することにより,補間されるモノトスル。 他の場合, あるいは `~filter関数の補間$を遂行できない場合、 双方の画像は汎用な `image$t として補間されるモノトスル。 ◎ If both the starting and ending image are <filter()>s which may only differ by their used filter functions, they must be interpolated by interpolating their filter function lists as described in section Interpolation of Filters. Otherwise, they must be interpolated as generic <image>s. If the filter function interpolation can not be performed, the images must be interpolated as generic <image>s.
13. `filter$e 要素で定義される略式~filter関数
13.1. 原始filter表現
以下の各~節に、 各種`~filter関数$に対し,~filter要素で表出される等価な~markupを示す。 関数に与えられた~parameterは、 [%amount] のように角括弧で括って記される。 百分率~値をとる~parameterは、 実数に変換-済みとする。 ◎ Below are the equivalents for each of the filter functions expressed in terms of the 'filter element' element. The parameters from the function are labeled with brackets in the following style: [amount]. In the case of parameters that are percentage values, they are converted to real numbers.
13.1.1. `grayscale$f
<filter id="grayscale"> <`feColorMatrix$e0 type="matrix" values=" (0.2126 + 0.7874 * (1 - [amount])) (0.7152 - 0.7152 * (1 - [amount])) (0.0722 - 0.0722 * (1 - [amount])) 0 0 (0.2126 - 0.2126 * (1 - [amount])) (0.7152 + 0.2848 * (1 - [amount])) (0.0722 - 0.0722 * (1 - [amount])) 0 0 (0.2126 - 0.2126 * (1 - [amount])) (0.7152 - 0.7152 * (1 - [amount])) (0.0722 + 0.9278 * (1 - [amount])) 0 0 0 0 0 1 0" /> </filter>
13.1.2. `sepia$f
<filter id="sepia"> <`feColorMatrix$e0 type="matrix" values=" (0.393 + 0.607 * (1 - [amount])) (0.769 - 0.769 * (1 - [amount])) (0.189 - 0.189 * (1 - [amount])) 0 0 (0.349 - 0.349 * (1 - [amount])) (0.686 + 0.314 * (1 - [amount])) (0.168 - 0.168 * (1 - [amount])) 0 0 (0.272 - 0.272 * (1 - [amount])) (0.534 - 0.534 * (1 - [amount])) (0.131 + 0.869 * (1 - [amount])) 0 0 0 0 0 1 0" /> </filter>
13.1.3. `saturate$f
<filter id="saturate"> <`feColorMatrix$e0 type="saturate" values="[amount]" /> </filter>
13.1.4. `hue-rotate$f
<filter id="hue-rotate"> <`feColorMatrix$e0 type="hueRotate" values="[angle]" /> </filter>
13.1.5. `invert$f
<filter id="invert"> <`feComponentTransfer$e0> <feFuncR type="table" tableValues="[amount] (1 - [amount])" /> <feFuncG type="table" tableValues="[amount] (1 - [amount])" /> <feFuncB type="table" tableValues="[amount] (1 - [amount])" /> </feComponentTransfer> </filter>
13.1.6. `opacity$f
<filter id="opacity"> <`feComponentTransfer$e0> <feFuncA type="table" tableValues="0 [amount]" /> </feComponentTransfer> </filter>
13.1.7. `brightness$f
<filter id="brightness"> <`feComponentTransfer$e0> <feFuncR type="linear" slope="[amount]" /> <feFuncG type="linear" slope="[amount]" /> <feFuncB type="linear" slope="[amount]" /> </feComponentTransfer> </filter>
13.1.8. `contrast$f
<filter id="contrast"> <`feComponentTransfer$e0> <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5" /> <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5" /> <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5" /> </feComponentTransfer> </filter>
13.1.9. `blur$f
<filter id="blur"> <`feGaussianBlur$e0 stdDeviation="[radius radius]" edgeMode="[%辺~mode]" /> </filter>
ここで, %辺~mode は、 次に与える値に算出される ⇒# `filter$p ~propに対しては `none$v / CSS Image `filter$ft 関数に対しては `duplicate$v ◎ Where edge mode computes to none for the filter property and to duplicate for the CSS Image <filter()> function.
注記: `blur$ft 関数は、 ~UAにより定義される~filter領域を増大させ得る。 `§ 略式~用の~filter領域@#filter-region-for-shorthands$ を見よ。 ◎ Note: The <blur()> function may increase the UA defined filter region. See Filter region for shorthands.
13.1.10. `drop-shadow$f
<filter id="drop-shadow"> <`feGaussianBlur$e0 in="[alpha-channel-of-input]" stdDeviation="[radius]" /> <`feOffset$e0 dx="[offset-x]" dy="[offset-y]" result="offsetblur" /> <`feFlood$e0 flood-color="[color]" /> <`feComposite$e0 in2="offsetblur" operator="in" /> <`feMerge$e0> <`feMergeNode$e0/> <`feMergeNode$e0 in="[input-image]" /> </feMerge> </filter>
注記: `drop-shadow$ft 関数は、 ~UAにより定義される~filter領域を増大させ得る。 `§ 略式~用の~filter領域@#filter-region-for-shorthands$ を見よ。 ◎ Note: The <drop-shadow()> function may increase the UA defined filter region. See Filter region for shorthands.
13.2. 略式~用の~filter領域
~UAは、 前~節に与えた原始filterで実装される,どの略式~filterに対しても,`~filter領域$を定義するモノトスル。 ~filter領域は、 要素の視覚-内容を覆うモノトスル — 次に挙げるものも含めて:
- ~overflowしている内容
- ~scrollbarなどの~graphicな~control
- `border$p, `border-image$p, `box-shadow$p, `text-shadow$p, `outline$p
- 略式~filterがこの可視~区画を拡幅する場合は、 その区画 — `blur$ft や `drop-shadow$ft の様な事例が該当する。
注記: `~filter~source@#FilterElement$ の取扱いは、 `§ ~filter領域@#FilterEffectsRegion$ を見よ。 ◎ Note: For the handling of filter sources see section Filter region.
14. ~filterの~animation
14.1. ~filter関数~listの補間
2 つの~filter %F, %G どうしの補間は、 次の手続きに従うモノトスル:
- ( %F, %G ) ~LET 順に ( %F, %G ) の `filter$p の値に応じて ⇒# `none$v ならば空~list / `filter-value-list$t ならば その各~成分からなる同順の~list
- ~IF[ %F, %G とも空である ] ⇒ ~RET (~animationは生じないので、 この手続きも適用されない)
- ~IF[ %F, %G のいずれかに `url$t が含まれている ] ⇒# 離散的な補間を利用する; ~RET
-
この段は[ %F の長さ ~GT %G の長さ ]ならば、 %F と %G を入れ替えて適用する:
- ~EACH( 整数 %index ~IN { 0 〜 %F の長さ − 1 } ) に対し ⇒ ~IF[ %F の %index 番の~itemの種別( `blur$f, 等々)~NEQ %G の %index 番の~itemの種別 ] ⇒# 離散的な補間を利用する; ~RET
- ~EACH( 整数 %index ~IN { %F の長さ 〜 %G の長さ − 1 } ) に対し ⇒ %F に[ %G の %index 番の~itemと同じ種別の `filter-function$t ]を その引数を`補間~用の初期~値$に初期化した上で付加する
- `~filter関数の補間$による規則に従って %F と %G とを補間する
~filter関数どうしの距離を算出する。 [`91$issue] ◎ Compute distance of filter functions. [Issue #91]
14.2. 加算
`filter-value-list$t たちが成す互いに独立な~animationを組合せることもアリである。 `SVG11$r ◎ It is possible to combine independent animations of <filter-value-list>s [SVG11].
それは、 所与の 2 個の~filter値 ( 基底~値を表現している~filter~list, 加算する~filter~list ) に対し, それらの~listを順に連結した結果を返す。 ◎ Given two filter values representing an base value (base filter list) and a value to add (added filter list), returns the concatenation of the the two lists: ‘base filter list added filter list’.
次の~SVG~animationには 2 個の `animate$e 要素があり、 `rect$e 要素の `filter$p ~propを~animateする。 両者とも,指定された~animationは加法的であり、 その所要時間は 10 秒( `10s^v )にされている: ◎ The following SVG animation has two animate elements animating filter property of the rect element. Both specified animations are additive and have a duration of 10s.
<rect width="200px" filter="none" ...> <animate attributeName="filter" from="blur(0px)" to="blur(10px)" dur="10s" additive="sum" /> <animate attributeName="filter" from="sepia(0)" to="sepia(1)" dur="10s" additive="sum" /> </rect>
`filter$p の`使用~値$は、 5 秒~後には `blur(5px) sepia(0.5)^v になる。 ◎ After 5s, the used value of filter is blur(5px) sepia(0.5).
14.3. 累積
`filter-value-list$t の累積は: ◎ Accumulation of <filter-value-list>s\
- `~filter関数~listの補間$と同じ規則による,~listの[ 照合-法, 拡張-法 ]に従う — 互いの~listが合致しない場合には、 `置換-型$の挙動に~fall-backする。 ◎ follows the same matching and extending rules as interpolation, falling back to replace behavior if the lists do not match.\
- しかしながら,対応している各 `filter-function$t どうしは — 同じ規則の最後の段(`~filter関数の補間$)に代えて — 互いの引数を算術的に加算する。 ◎ However instead of interpolating the matching <filter-function> pairs, their arguments are arithmetically added together -\
- ただし,当の `filter-function$t の`補間~用の初期~値$は `1^v である事例では、 “1 に基づく加算” を利用して引数を結合する — すなわち ⇒ %結果値 ~EQ 値A ~PLUS 値B ~MINUS 1 【 ~EQ ( 値A ~MINUS 1 ) ~PLUS ( 値B ~MINUS 1 ) ~PLUS 1 】 ◎ except in the case of <filter-function>s whose initial value for interpolation is 1, which combine using one-based addition: ◎ Vresult = Va + Vb - 1
15. ~privacyと~securityの考慮点
15.1. 染まった原始filter
どの~filter対しても、 その演算の計時は,[[ ~privacyに敏感な情報を包含し得る,内容その他の~source ]を~filterして導出される画素~値 ]には依存しないことが重要である。 演算の計時が その種の~sourceに依存し得るような~filterは、 一般に “染まった( `tainted^en )” と称される†。 ◎ It is important that the timing of any filter operation is independent of pixel values derived from the filtered content or other sources potentially containing privacy-sensitive information.
【† この文は、 この訳による補完。 この語 “`tainted^en” は、 ~securityの文脈において,他のものに “伝染する” ような~riskを孕む性質を述べるときに特に用いられる — その意味は、[ その種の性質に染まっているものは、 ある仕方で それに依存する他のものも,同じ性質に “染める” ]ことに基づく。 】
次に挙げる`原始filter$は、[ ~filterされる~obj自身 / ~CSSにより~styleされる他の~source ]からの~privacyに敏感な情報を包含し得る画素~値に~accessし得るので、 染まったモノトスル: ◎ The following filter primitives may have access to pixel values that potentially contain privacy-sensitive information, either from the filtered object itself or other sources such as CSS styling. These primitives must be flagged as "tainted".
-
[ `feFlood$e / `feDropShadow$e ]のうち, `flood-color$p ~propの`指定d値$が `currentcolor$v に算出されるもの。 ◎ feFlood when the specified value of the flood-color property computes to currentColor, ◎ feDropShadow when the specified value value of the flood-color property computes to currentColor,
[ `feDiffuseLighting$e / `feSpecularLighting$e ]のうち, `lighting-color$p ~propの`指定d値$が `currentcolor$v に算出されるもの。 ◎ feDiffuseLighting, when the specified value value of the lighting-color property computes to currentColor ◎ feSpecularLighting when the specified value value of the lighting-color property computes to currentColor, ◎ ↓↓feImage, when the <url> reference points to an element or fetches a resource with the fetching mode No-CORS and ◎ ↓↓the filter primitives: SourceGraphic, SourceAlpha, BackgroundImage, BackgroundAlpha, FillPaint and StrokePaint.
これらが入力にとる[ `color$t を値にとる~CSS~prop ]は、 `currentcolor$v ~keywordもとり得る。 `currentcolor$v 用の`使用~値$は `color$p ~propから導出され,それは選択子 `visited$ps 疑似類により設定され得るので、 ~privacyに敏感な情報を包含し得る。 ◎ feFlood, feDropShadow, feDiffuseLighting and feSpecularLighting are primitives with one or more CSS properties that take <color> as property value. <color> consists of (amongst others) the currentColor keyword. The used value for currentColor derives from the color property. Since color can be set by the :visited pseudo selector, it potentially contains privacy-sensitive information and therefore these primitives must be marked as tainted.
-
`feImage$e のうち,その `url$t 参照が[ ある要素を指しているか,資源を `~CORSなし@~HTMLurl#attr-crossorigin-none$st ~modeで~fetchする ]もの。
これは[ 非同一-生成元~画像/ ~SVG`~graphics要素$などの文書~片 ]を参照することもあり、 その参照は~privacyに敏感な情報を包含し得るので。
◎ feImage can reference cross-domain images as well as document fragments such as SVG graphics elements. These references potentially contain privacy-sensitive information and therefore the primitive must be marked as tainted. -
次に挙げるいずれかを入力にとる原始filter ⇒# `SourceGraphic$v, `SourceAlpha$v, `BackgroundImage$v, `BackgroundAlpha$v, `FillPaint$v, `StrokePaint$v
これらは、[ ~SVG`~graphics要素$などの文書~片 / `color$p ~propから[ 直接的/間接的 ]に導出され得る~style情報 ]を参照するので。
◎ The filter primitives SourceGraphic, SourceAlpha, BackgroundImage, BackgroundAlpha, FillPaint and StrokePaint either reference document fragments such as SVG graphics elements or style information that may derive directly or indirectly from the color property. Therefore these primitives must be marked as tainted. - 染まったものとされた`原始filter$を入力にとる`原始filter$。 ◎ Every filter primitive that has a "tainted" flagged filter primitive as input must be flagged as "tainted" as well.
染まったものとされた原始filterを入力にとる~filter演算は、[ 画素~値に関わらず,かかる時間は常に同じになる ]仕方で実装するモノトスル。 ◎ Filter operations must be implemented in such a way that they always take the same amount of time regardless of the pixel values if one of the input filter primitives is flagged as "tainted".
注記: この仕様は、 ~UAからの実装~feedbackに基づいて,この原始filterに課す制約を重くすることになる。 ◎ Note: This specification aggravates the restrictions to filter primitives based on implementation feedback from user agents.
15.2. `feDisplacementMap^e に対する制約
`feDisplacementMap$e は、 次の場合には~filter演算を続行することなく`通過~filter$として動作するモノトスル ⇒ 染まったものとされた原始filterを入力にとり,その原始filterは( `in2$aDp により参照されて)変位~mapとして利用されている。 ◎ If feDisplacementMap has a "tainted" flagged filter primitive as input and this input filter primitive is used as displacement map (referenced by in2), then feDisplacementMap must not proceed with the filter operation and acts as a pass through filter.
15.3. 生成元に対する制約
~UAは、 `filter$p ~propに対しては、 `Fetch$r に定義される `~CORS要請@~FETCH#cors-request$ を利用するモノトスル。 ~fetchするときは、[ "Anonymous" ~modeを利用する, ~referrer~sourceは~stylesheetの~URLに設定する, 生成元は包含している文書の~URLに設定する ]モノトスル†。 この結果が~network~errorになる場合の効果は、 値 `none$v が指定されていたかのようになるとする。 ◎ User agents must use the CORS request defined by the [Fetch] specification for the filter property.\ When fetching, user agents must use "Anonymous" mode, set the referrer source to the stylesheet’s URL and set the origin to the URL of the containing document.\ If this results in network errors, the effect is as if the value none had been specified.
【† これらの~parameterは、 廃された~W3C~HTML仕様に定義されていた~algoの記述に基づいており, どう適用するべきか意図不明になっている — 次を行うものと推定される ⇒# `~CORSになり得る要請を作成する@~HTMLurl#create-a-potential-cors-request$( ~stylesheetの~URL, `image^l, `匿名@~HTMLurl#attr-crossorigin-anonymous$st ) ◎終 が、 本当は, `CSS-VALUES-4$r `§ ~URL処理~model@~CSSVAL#url-processing$ に基づくよう定義し直されるべきであろう。 】
15.4. 計時~攻撃
上のいずれかの規則に従わなかった場合、 攻撃者は,情報を推定する計時~攻撃を仕掛けることも可能になる。 ◎ If any of the above rules are not followed, an attacker could infer information and mount a timing attack.
計時~攻撃は、 生じる演算にかかる時間を学習することに基づいて,さもなければ保護される内容についての情報を得する手法である。 例えば,赤色の画素を描くのにかかった時間が緑色の画素より長いことが判った場合、 要素の内容にまったく~accessせずに,描画されている要素の大まかな画像を再構築できるかもしれない。 ~securityの研究は、 ~hardware~architectureや~compilerにより,算術~演算における計時の相違が生じ得ることを示している。 `ArTD$r ◎ A timing attack is a method of obtaining information about content that is otherwise protected, based on studying the amount of time it takes for an operation to occur. If, for example, red pixels took longer to draw than green pixels, one might be able to reconstruct a rough image of the element being rendered, without ever having access to the content of the element. Security studies show that timing differences on arithmetic operations can be caused by the hardware architecture or compiler [ArTD].
付録 A. 非推奨にされた `enable-background^p ~prop
`SVG11$r は、 `enable-background$p ~propを導入した。 この~propは、 `filter$e 要素が呼出された時点における`~filter領域$の下に`後景$を定義した。 この~propにより定義された この概念は、 この仕様を書いている時点で,~CSSにおける積層~文脈の~modelと互換でないことが~~判明した。 ~UAは, `enable-background$p ~propを~SVG 1.1 に定義されるとおりに実装することも選べるが、 そうすると,この仕様や `COMPOSITING-1$r と互換でなくなる。 ◎ SVG 1.1 introduced the enable-background property [SVG11]. The property defined the back drop under the filter region at the time that the filter element was invoked. The concept defined by this property was identified to be incompatible with the model of stacking context in CSS at the time writing this specification. UAs can choose to implement the enable-background property as defined in SVG 1.1 but will not be compatible to this specification or to CSS Compositing and Blending [COMPOSITING-1].
この仕様は `enable-background$p ~propを~supportしない。 ~UAは、 代わりに `isolation$p ~propを~supportするモノトスル。 `COMPOSITING-1$r ◎ This specification does not support the enable-background property. UAs must support the isolation property instead [COMPOSITING-1].
付録 B. ~DOM~interface
【 この節の内容は、 `別~pageにて@~FILTERS-API$。 】
変更点
`2014年 11月 25日 作業草案@~TR/2014/WD-filter-effects-1-20141125/$ からの有意な変更点は: ◎ The following significant changes were made since the 25 November 2014 Working Draft.
- 編集上の変更点。 ◎ Editorial changes.
- すべての要素の内容~modelに記述~要素を追加した。 ◎ Add description elements to content model of all elements.
- `crossorigin$aI は~animate不可であることを明確化した。 ◎ Clarify that crossorigin is not animatable.
- `hue-rotate$ft は単位なしの 0 をとる。 ◎ <hue-rotate()> takes unitless zero.
- `drop-shadow$ft の `color$t, `length$t 値の順序を,作者が変更できるようにした。 `color$t が最初に来るように文法を変更した。 `補間~用の初期~値$と値の`省略-時の既定~値$とを相違させた。 ◎ Allow author to change order of <color> and <length> values of <drop-shadow()>. Change grammar to put <color> first. Differentiate between initial value for interpolation and default values for omitted values.
- 各種~CSS~propに対する~animation欄を定義した。 ◎ Define animation type of CSS properties.
- `feColorMatrix$e, `feConvolveMatrix$e は、 事前条件が充足されない場合には`通過~filter$になるようにした。 ◎ Make feColorMatrix and feConvolveMatrix a pass through on unfulfilled pre-conditions.
- `feTurbulence^e の~algoが一様性を尊重するようにした。 ◎ Make feTurbulence algorithms respect uniformity.
- すべての~graphics要素に適用される~propは `use$e 要素にも適用されるようにした。 ◎ Apply properties that apply to all graphics elements to the use element as well.
- `saturate$ft の原始filter表現を正した。 ◎ Corrected filter primitive representation of <saturate()>.
- SVG DOM `SVGFEBlendElement$I の列挙を新たな混色-~modeで拡張した。 ◎ Extend SVG DOM SVGFEBlendElement enumerations with new blend modes.
`2013年 11月 26日 作業草案@~TR/2013/WD-filter-effects-1-20131126/$ からの有意な変更点は: ◎ The following significant changes were made since the 26 November 2013 Working Draft.
- `Custom Filter^en を除去した。 ◎ Removed Custom Filters.
- 内容~modelは、 どこでも `script$e 要素を許容するようにした。 ◎ Allow the script element in the content model everywhere.
- `COMPOSITING-1$r による `feBlend$e 用のすべての混色-~modeを~supportした。 ◎ Support all blend modes from CSS Blending specification for feBlend.
- `feComposite$e 用に `COMPOSITING-1$r による組成~modeすべてを~supportした — 重複するものは除いて。 ◎ Support all non-duplicated compositing modes from CSS Blending specification for feComposite.
- `feBlend$e に、 二重~組成を避けるための `no-composite$aB 属性を追加した。 ◎ Added no-composite attribute to feBlend to avoid double compositing.
- 略式~構文を訂正した。 ◎ Corrections on shorthands syntax.
- 略式~filter領域~用の定義を追加した。 ◎ Added definition for shorthand filter regions.
`2012年 10月 25日 作業草案@~TR/2012/WD-filter-effects-20121025/$ からの有意な変更点は: ◎ The following significant changes were made since the 25 October 2012 Working Draft.
- `brightness$f 略式~filterを訂正した。 ◎ Correction of brightness short hand filter.
- `Custom Filter^en 関数~用の新たな構文。 ◎ New syntax for Custom Filter function.
- `Custom Filter^en 用の `at-function^en 規則を追加した。 ◎ Add at-function rule for Custom Filters.
- 将来の~filter特能の拡張として利用される `Custom Filter^en 関数を許容した。 ◎ Allow Custom Filter function to be used as extension for future filter features.
- `shader^en 上の不必要な属性と `uniform^en を除去した。 ◎ Remove unnecessary attributes and uniforms on shaders.
- `shader^en 座標~空間の原点を左下隅に定義し直した。 ◎ Redefine origin of shader coordinate space to bottom left.
- 今や不必要な各種 `filter-margin^en ~propを除去した。 ◎ Remove now unnecessary filter-margin properties.
より詳細かつ長期の変更点は、 `変更ログ@https://drafts.fxtf.org/filter-effects-1/ChangeLog$ を見よ。 ◎ See more detailed and longterm changes in the ChangeLog.
謝辞
次の方々に感謝する:
The editors would like to thank Robert O’Callahan, Coralie Mercier, Chris Lilley, Nikos Andronikos, Stephen Chenney, Simon Fraser, Tavmjong Bah, Robert Longson, Cameron McCormack, Brad Kemper, Tab Atkins, Brian Birtles, Michael Mullany, Rik Cabanier, Anne van Kesteren, Boris Zbarsky, Kristopher Giesing, Stephen White, Jasper van de Gronde, Kang-Hao Lu, Paul LeBeau, Debarshi Ray, Jarek Foksa, Sebastian Zartner, Yuqian Li, Amelia Bellamy-Royds and Max Vujovic for their careful reviews, comments, and corrections.