1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
|
---
title: <feColorMatrix>
slug: Web/SVG/Element/feColorMatrix
tags:
- Element
- SVG
- SVG Filter
translation_of: Web/SVG/Element/feColorMatrix
---
<div>{{SVGRef}}</div>
<p><strong><code><feColorMatrix></code></strong> は SVG のフィルター要素で、変換行列に基づいて色を変化させます。すべてのピクセルのカラー値 <code>[R,G,B,A]</code> は 5 x 5 の行列で<a class="external" href="https://en.wikipedia.org/wiki/Matrix_multiplication">行列乗算</a>され、新しい色 <code>[R<em>'</em>,G<em>'</em>,B<em>'</em>,A<em>'</em>]</code> を生成します。</p>
<div class="blockIndicator note">
<p>基本的な記号 <em><code><strong>'</strong></code></em> は、数学で変換された結果を表すために使用されます。</p>
</div>
<pre class="notranslate">| R<em>'</em> | | r<sub>1</sub> r<sub>2</sub> r<sub>3</sub> r<sub>4</sub> r<sub>5</sub> | | R |
| G<em>'</em> | | g<sub>1</sub> g<sub>2</sub> g<sub>3</sub> g<sub>4</sub> g<sub>5</sub> | | G |
| B<em>'</em> | = | b<sub>1</sub> b<sub>2</sub> b<sub>3</sub> b<sub>4</sub> b<sub>5</sub> | * | B |
| A<em>'</em> | | a<sub>1</sub> a<sub>2</sub> a<sub>3</sub> a<sub>4</sub> a<sub>5</sub> | | A |
| 1 | | 0 0 0 0 1 | | 1 |</pre>
<p>簡略化すると、新しいピクセルの各色のチャンネルがどのように計算されるかを以下に示します。最後の行は値が一定なので無視されます。</p>
<pre class="notranslate">R<em>'</em> = r<sub>1</sub>*R + r<sub>2</sub>*G + r<sub>3</sub>*B + r<sub>4</sub>*A + r<sub>5</sub>
G<em>'</em> = g<sub>1</sub>*R + g<sub>2</sub>*G + g<sub>3</sub>*B + g<sub>4</sub>*A + g<sub>5</sub>
B<em>'</em> = b<sub>1</sub>*R + b<sub>2</sub>*G + b<sub>3</sub>*B + b<sub>4</sub>*A + b<sub>5</sub>
A<em>'</em> = a<sub>1</sub>*R + a<sub>2</sub>*G + a<sub>3</sub>*B + a<sub>4</sub>*A + a<sub>5</sub>
</pre>
<p>新しいピクセルの赤の量、すなわち <code>R<em>'</em></code> に注目すると下記のようになります。</p>
<p>これは以下の値の合計です。</p>
<ul>
<li>旧ピクセルの赤成分 <code>R</code> の <code>r<sub>1</sub></code> 倍</li>
<li>旧ピクセルの緑成分 <code>G</code> の <code>r<sub>2</sub></code> 倍</li>
<li>旧ピクセルの青成分 <code>B</code> の <code>r<sub>3</sub></code> 倍</li>
<li>旧ピクセルのアルファ成分 <code>A</code> の <code>r<sub>4</sub></code> 倍</li>
<li>加えて加算値の <code>r<sub>5</sub></code></li>
</ul>
<p>これらの指定された数量は任意の実数を取ることができますが、最終的な <strong>R'</strong> は 0 ～ 1 の間に丸められます。 <strong>G'</strong>, <strong>B'</strong>, <strong>A'</strong> についても同様です。</p>
<pre class="notranslate">R' = r1 * R + r2 * G + r3 * B + r4 * A + r5
New red = [ r1 * old red ] + [ r2 * old green ] + [ r3 * old Blue ] + [ r4 * old Alpha ] + [ shift of r5 ]</pre>
<p>例えば、真っ黒な画像をより赤くしたい場合は、 <code>r<sub>5</sub></code> を正の実数 <em>x</em> とすれば、新しい画像の各画素の赤さを <em>x</em> だけ増加させます。</p>
<p><strong>単位行列</strong> は次のようになります。</p>
<pre class="notranslate"> R G B A W
R' | 1 0 0 0 0 |
G' | 0 1 0 0 0 |
B' | 0 0 1 0 0 |
A' | 0 0 0 1 0 |
</pre>
<p>この中では、新しい値はすべて古い値のちょうど 1 倍の値であり、それ以外は何も加えられていません。ここから行列の操作を始めることをお勧めします。</p>
<h2 id="Usage_context" name="Usage_context">使用場面</h2>
<p>{{svginfo}}</p>
<h2 id="Attributes" name="Attributes">属性</h2>
<h3 id="Global_attributes" name="Global_attributes">グローバル属性</h3>
<ul>
<li><a href="/ja/docs/Web/SVG/Attribute#Core_attributes">コア属性</a></li>
<li><a href="/ja/docs/Web/SVG/Attribute#Presentation_attributes">プレゼンテーション属性</a></li>
<li><a href="/ja/docs/Web/SVG/Attribute#Filter_primitive_attributes">フィルタープリミティブ属性</a></li>
<li>{{SVGAttr("class")}}</li>
<li>{{SVGAttr("style")}}</li>
</ul>
<h3 id="Specific_attributes" name="Specific_attributes">固有の属性</h3>
<ul>
<li>{{SVGAttr("in")}}</li>
<li>{{SVGAttr("type")}}</li>
<li>{{SVGAttr("values")}}</li>
</ul>
<h2 id="DOM_Interface" name="DOM_Interface">DOM インターフェイス</h2>
<p>この要素は {{domxref("SVGFEColorMatrixElement")}} インターフェイスを実装しています。</p>
<h2 id="Example" name="Example">例</h2>
<h3 id="SVG">SVG</h3>
<pre class="brush: html; highlight[19-24,31-33,40-42,49-50] notranslate"><svg width="100%" height="100%" viewBox="0 0 150 500"
preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- ref -->
<defs>
<g id="circles">
<circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" />
<circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" />
<circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" />
</g>
</defs>
<use href="#circles" />
<text x="70" y="50">Reference</text>
<!-- identity matrix -->
<filter id="colorMeTheSame">
<feColorMatrix in="SourceGraphic"
type="matrix"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 1 0" />
</filter>
<use href="#circles" transform="translate(0 70)" filter="url(#colorMeTheSame)" />
<text x="70" y="120">Identity matrix</text>
<!-- Combine RGB into green matrix -->
<filter id="colorMeGreen">
<feColorMatrix in="SourceGraphic"
type="matrix"
values="0 0 0 0 0
1 1 1 1 0
0 0 0 0 0
0 0 0 1 0" />
</filter>
<use href="#circles" transform="translate(0 140)" filter="url(#colorMeGreen)" />
<text x="70" y="190">rgbToGreen</text>
<!-- saturate -->
<filter id="colorMeSaturate">
<feColorMatrix in="SourceGraphic"
type="saturate"
values="0.2" />
</filter>
<use href="#circles" transform="translate(0 210)" filter="url(#colorMeSaturate)" />
<text x="70" y="260">saturate</text>
<!-- hueRotate -->
<filter id="colorMeHueRotate">
<feColorMatrix in="SourceGraphic"
type="hueRotate"
values="180" />
</filter>
<use href="#circles" transform="translate(0 280)" filter="url(#colorMeHueRotate)" />
<text x="70" y="330">hueRotate</text>
<!-- luminanceToAlpha -->
<filter id="colorMeLTA">
<feColorMatrix in="SourceGraphic"
type="luminanceToAlpha" />
</filter>
<use href="#circles" transform="translate(0 350)" filter="url(#colorMeLTA)" />
<text x="70" y="400">luminanceToAlpha</text>
</svg></pre>
<h3 id="Result" name="Result">結果</h3>
<p>{{EmbedLiveSample("Example", "100%", 700, "/files/4371/test.png")}}</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('Filters 1.0', '#feColorMatrixElement', '<feColorMatrix>')}}</td>
<td>{{Spec2('Filters 1.0')}}</td>
<td>変更なし</td>
</tr>
<tr>
<td>{{SpecName('SVG1.1', 'filters.html#feColorMatrixElement', '<feColorMatrix>')}}</td>
<td>{{Spec2('SVG1.1')}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("svg.elements.feColorMatrix")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{SVGElement("filter")}}</li>
<li>{{SVGElement("animate")}}</li>
<li>{{SVGElement("set")}}</li>
<li>{{SVGElement("feBlend")}}</li>
<li>{{SVGElement("feComponentTransfer")}}</li>
<li>{{SVGElement("feComposite")}}</li>
<li>{{SVGElement("feConvolveMatrix")}}</li>
<li>{{SVGElement("feDiffuseLighting")}}</li>
<li>{{SVGElement("feDisplacementMap")}}</li>
<li>{{SVGElement("feFlood")}}</li>
<li>{{SVGElement("feGaussianBlur")}}</li>
<li>{{SVGElement("feImage")}}</li>
<li>{{SVGElement("feMerge")}}</li>
<li>{{SVGElement("feMorphology")}}</li>
<li>{{SVGElement("feOffset")}}</li>
<li>{{SVGElement("feSpecularLighting")}}</li>
<li>{{SVGElement("feTile")}}</li>
<li>{{SVGElement("feTurbulence")}}</li>
<li><a href="/ja/docs/Web/SVG/Tutorial/Filter_effects">SVG チュートリアル: フィルター効果</a></li>
</ul>
|
