files/zh-cn/web/svg/element/fecolormatrix/index.html


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

---
title: feColorMatrix
slug: Web/SVG/Element/feColorMatrix
tags:
  - SVG
  - SVG滤镜
  - 元素
  - 需要兼容性表
translation_of: Web/SVG/Element/feColorMatrix
---
<div>{{SVGRef}}</div>

<p>该滤镜基于转换矩阵对颜色进行变换。每一像素的颜色值(一个表示为[红,绿,蓝,透明度] 的矢量) 都经过<a class="external" href="http://en.wikipedia.org/wiki/Matrix_multiplication">矩阵乘法 (matrix multiplated</a>) 计算出的新颜色。</p>

<h2 id="用法">用法</h2>

<p>{{svginfo}}</p>

<h2 id="示例">示例</h2>

<pre class="brush: html">&lt;svg width="100%" height="100%" viewBox="0 0 150 360"
 preserveAspectRatio="xMidYMid meet"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"&gt;

  &lt;text x="70" y="50"&gt;Reference&lt;/text&gt;
  &lt;g&gt;
    &lt;circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" /&gt;
    &lt;circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" /&gt;
    &lt;circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" /&gt;
  &lt;/g&gt;


  &lt;text x="70" y="120"&gt;matrix&lt;/text&gt;

  &lt;filter id="colorMeMatrix"&gt;
    &lt;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" /&gt;
  &lt;/filter&gt;

  &lt;g filter="url(#colorMeMatrix)"&gt;
    &lt;circle cx="30" cy="100" r="20" fill="blue"  fill-opacity="0.5" /&gt;
    &lt;circle cx="20" cy="120" r="20" fill="green" fill-opacity="0.5" /&gt;
    &lt;circle cx="40" cy="120" r="20" fill="red"   fill-opacity="0.5" /&gt;
  &lt;/g&gt;


  &lt;text x="70" y="190"&gt;saturate&lt;/text&gt;

  &lt;filter id="colorMeSaturate"&gt;
    &lt;feColorMatrix in="SourceGraphic"
      type="saturate"
      values="0.2" /&gt;
  &lt;/filter&gt;

  &lt;g filter="url(#colorMeSaturate)"&gt;
    &lt;circle cx="30" cy="170" r="20" fill="blue" fill-opacity="0.5" /&gt;
    &lt;circle cx="20" cy="190" r="20" fill="green" fill-opacity="0.5" /&gt;
    &lt;circle cx="40" cy="190" r="20" fill="red" fill-opacity="0.5" /&gt;
  &lt;/g&gt;


  &lt;text x="70" y="260"&gt;hueRotate&lt;/text&gt;

  &lt;filter id="colorMeHueRotate"&gt;
    &lt;feColorMatrix in="SourceGraphic"
      type="hueRotate"
      values="180" /&gt;
  &lt;/filter&gt;

  &lt;g filter="url(#colorMeHueRotate)"&gt;
    &lt;circle cx="30" cy="240" r="20" fill="blue"  fill-opacity="0.5" /&gt;
    &lt;circle cx="20" cy="260" r="20" fill="green" fill-opacity="0.5" /&gt;
    &lt;circle cx="40" cy="260" r="20" fill="red"   fill-opacity="0.5" /&gt;
  &lt;/g&gt;


  &lt;text x="70" y="320"&gt;luminanceToAlpha&lt;/text&gt;

  &lt;filter id="colorMeLTA"&gt;
    &lt;feColorMatrix in="SourceGraphic"
      type="luminanceToAlpha" /&gt;
  &lt;/filter&gt;

  &lt;g filter="url(#colorMeLTA)"&gt;
    &lt;circle cx="30" cy="310" r="20" fill="blue"  fill-opacity="0.5" /&gt;
    &lt;circle cx="20" cy="330" r="20" fill="green" fill-opacity="0.5" /&gt;
    &lt;circle cx="40" cy="330" r="20" fill="red"   fill-opacity="0.5" /&gt;
  &lt;/g&gt;
&lt;/svg&gt;</pre>

<p>该示例渲染效果如下所示：</p>

<p>{{EmbedLiveSample("Example",300,700,"/files/4371/test.png")}}</p>

<h2 id="属性">属性</h2>

<h3 id="全局属性">全局属性</h3>

<ul>
 <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li>
 <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li>
 <li><a href="/en/SVG/Attribute#Filter" title="en/SVG/Attribute#Filter">滤镜属性</a> »</li>
 <li>{{ SVGAttr("class") }}</li>
 <li>{{ SVGAttr("style") }}</li>
</ul>

<h3 id="专有属性">专有属性</h3>

<ul>
 <li>{{ SVGAttr("in") }}</li>
 <li>{{ SVGAttr("type") }}</li>
 <li>{{ SVGAttr("values") }}</li>
</ul>

<h2 id="DOM_接口">DOM 接口</h2>

<p>该元素实现 <code><a href="/en/DOM/SVGFEColorMatrixElement" title="en/DOM/SVGFEColorMatrixElement">SVGFEColorMatrixElement</a></code> 接口。</p>

<h2 id="参见">参见</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="/en/SVG/Tutorial/Filter_effects" title="en/SVG/Tutorial/Filter_effects">SVG 教程：滤镜效果</a></li>
</ul>