files/zh-cn/web/svg/element/feconvolvematrix/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

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

<p><code>feConvolveMatrix</code>元素应用了一个矩阵卷积滤镜效果。一个卷积在输入图像中把像素与邻近像素组合起来制作出结果图像。通过卷积可以实现各种成像操作，包括模糊、边缘检测、锐化、压花和斜角。</p>

<p>一个矩阵卷积是基于一个 nxm矩阵(卷积内核)，用来描述如何将给定的输入图像的像素值与相邻像素合并为一个输出像素值。每个输出像素是由应用的内核矩阵来处理相应的源像素和它的相邻像素。基本的卷积公式是对给定的每个像素进行如下应用:</p>

<p>COLORX,Y = ( <br>
 SUM I=0 to [<a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementOrderAttribute" rel="nofollow noreferrer">orderY</a>-1] { <br>
 SUM J=0 to [<a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementOrderAttribute" rel="nofollow noreferrer">orderX</a>-1] { <br>
 SOURCE X-<a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementTargetXAttribute" rel="nofollow noreferrer">targetX</a>+J, Y-<a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementTargetYAttribute" rel="nofollow noreferrer">targetY</a>+I * <a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementKernelMatrixAttribute" rel="nofollow noreferrer">kernelMatrix</a><a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementOrderAttribute" rel="nofollow noreferrer">orderX</a>-J-1, <a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementOrderAttribute" rel="nofollow noreferrer">orderY</a>-I-1 <br>
 } <br>
 } <br>
 ) / <a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementDivisorAttribute" rel="nofollow noreferrer">divisor</a> + <a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementBiasAttribute" rel="nofollow noreferrer">bias</a> * ALPHAX,Y </p>

<p>其中“orderX”和"orderY"表示<a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementOrderAttribute" rel="nofollow noreferrer">‘order’</a> 的x和y值，"targetX"表示<a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementTargetXAttribute" rel="nofollow noreferrer">‘targetX’</a> 属性的值，"targetY"表示<a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementTargetYAttribute" rel="nofollow noreferrer">‘targetY’</a> 的值，"kernelMatrix" 表示 <a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementKernelMatrixAttribute" rel="nofollow noreferrer">‘kernelMatrix’</a>属性的值，"divisor"表示 <a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementDivisorAttribute" rel="nofollow noreferrer">‘divisor’</a>属性的值， "bias" 表示 <a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementBiasAttribute" rel="nofollow noreferrer">‘bias’</a>属性的值。</p>

<p>注意上述公式中内核矩阵的值是被旋转180度后被使用，这是为了符合许多计算机图形学教科书中的理论。</p>

<p>这里举例说明,假设你有一个5x5像素的输入图像，其中一个颜色通道的色值如下：</p>

<pre><code>  0  20  40 235 235
  100 120 140 235 235
  200 220 240 235 235
  225 225 255 255 255
  225 225 255 255 255
</code></pre>

<p>你定义一个3*3卷积核如下：</p>

<pre><code> 1 2 3
  4 5 6
  7 8 9
</code></pre>

<p>让我们专注于图像的第二行和第二列的颜色值（源像素值为120）。最简单的情况（输入图像的像素网格与内核像素网格完全对齐）,<a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementDivisorAttribute" rel="nofollow noreferrer">‘divisor’</a>, <a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementTargetXAttribute" rel="nofollow noreferrer">‘targetX’</a> 和<a href="http://link.zhihu.com/?target=https%3A//www.w3.org/TR/SVG/filters.html%23feConvolveMatrixElementTargetYAttribute" rel="nofollow noreferrer">‘targetY’</a>都是默认值，那么输出色值将是:</p>

<pre><code>(9*  0 + 8* 20 + 7* 40 +
6*100 + 5*120 + 4*140 +
3*200 + 2*220 + 1*240) / (9+8+7+6+5+4+3+2+1)</code></pre>

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

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

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

<h3 id="SVG">SVG</h3>

<pre><code>&lt;svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
  &lt;defs&gt;
    &lt;filter id="emboss"&gt;
      &lt;feConvolveMatrix
          kernelMatrix="3 0 0
                        0 0 0
                        0 0 -3"/&gt;
    &lt;/filter&gt;
  &lt;/defs&gt;

  &lt;image xlink:href="/files/12668/MDN.svg" x="0" y="0"
      height="200" width="200" style="filter:url(#emboss);" /&gt;
&lt;/svg&gt;</code></pre>

<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("order") }}</li>
 <li>{{ SVGAttr("kernelMatrix") }}</li>
 <li>{{ SVGAttr("divisor") }}</li>
 <li>{{ SVGAttr("bias") }}</li>
 <li>{{ SVGAttr("targetX") }}</li>
 <li>{{ SVGAttr("targetY") }}</li>
 <li>{{ SVGAttr("edgeMode") }}</li>
 <li>{{ SVGAttr("kernelUnitLength") }}</li>
 <li>{{ SVGAttr("preserveAlpha") }}</li>
</ul>

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

<p>该元素实现了<code><a href="/en/DOM/SVGFEConvolveMatrixElement" title="en/DOM/SVGFEConvolveMatrixElement">SVGFEConvolveMatrixElement</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("feColorMatrix") }}</li>
 <li>{{ SVGElement("feComponentTransfer") }}</li>
 <li>{{ SVGElement("feComposite") }}</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>