diff options
Diffstat (limited to 'files/zh-cn/web/svg/element/fecomponenttransfer/index.html')
| -rw-r--r-- | files/zh-cn/web/svg/element/fecomponenttransfer/index.html | 139 |
1 files changed, 139 insertions, 0 deletions
diff --git a/files/zh-cn/web/svg/element/fecomponenttransfer/index.html b/files/zh-cn/web/svg/element/fecomponenttransfer/index.html new file mode 100644 index 0000000000..0935e85fcb --- /dev/null +++ b/files/zh-cn/web/svg/element/fecomponenttransfer/index.html @@ -0,0 +1,139 @@ +--- +title: feComponentTransfer +slug: Web/SVG/Element/feComponentTransfer +tags: + - SVG + - SVG滤镜 + - 元素 + - 需要兼容性表 + - 需要示例 +translation_of: Web/SVG/Element/feComponentTransfer +--- +<div>{{SVGRef}}</div> + +<p><strong><code><feComponentTransfer></code></strong> <a href="https://developer.mozilla.org/en-US/docs/Web/SVG">SVG</a>滤镜基元对每个像素执行颜色分量的数据重映射.它允许进行像亮度调整,对比度调整,色彩平衡或阈值的操作.</p> + +<p>计算是使用非预乘色值进行执行的.(译者:什么是非预乘数据:非预乘数据可以理解为例如rgba(180,160,130,0.8))中的180,160,130,它们没有被除以255以及乘以透明度0.8而转化为0~1范围的值,当被除以255并且乘以0.8而转化为0~1范围中的值的预处理被称为premultiplied color value(预乘数据)).颜色值在每一个通道(R,G,B,A)中被分别修改然后输出,这些通道分别是 {{SVGElement("feFuncR")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, and {{SVGElement("feFuncA")}}.</p> + +<h2 id="用法">用法</h2> + +<p>{{svginfo}}</p> + +<h2 id="示例">示例</h2> + +<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> +</ul> + +<h2 id="DOM_接口">DOM 接口</h2> + +<p>该元素实现了<code><a href="/en/DOM/SVGFEComponentTransferElement" title="en/DOM/SVGFEComponentTransferElement">SVGFEComponentTransferElement</a></code>接口。</p> + +<h2 id="示例_2">示例</h2> + +<h3 id="SVG">SVG</h3> + +<pre><code><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300"> + <defs> + <linearGradient id="rainbow" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="100%" y2="0"> + <stop offset="0" stop-color="#ff0000"></stop> + <stop offset="0.2" stop-color="#ffff00"></stop> + <stop offset="0.4" stop-color="#00ff00"></stop> + <stop offset="0.6" stop-color="#00ffff"></stop> + <stop offset="0.8" stop-color="#0000ff"></stop> + <stop offset="1" stop-color="#800080"></stop> + </linearGradient> + <filter id="identity" x="0" y="0" width="100%" height="100%"> + <feComponentTransfer> + <feFuncR type="identity"></feFuncR> + <feFuncG type="identity"></feFuncG> + <feFuncB type="identity"></feFuncB> + <feFuncA type="identity"></feFuncA> + </feComponentTransfer> + </filter> + <filter id="table" x="0" y="0" width="100%" height="100%"> + <feComponentTransfer> + <feFuncR type="table" tableValues="0 0 1 1"></feFuncR> + <feFuncG type="table" tableValues="1 1 0 0"></feFuncG> + <feFuncB type="table" tableValues="0 1 1 0"></feFuncB> + </feComponentTransfer> + </filter> + <filter id="linear" x="0" y="0" width="100%" height="100%"> + <feComponentTransfer> + <feFuncR type="linear" slope="0.5" intercept="0"></feFuncR> + <feFuncG type="linear" slope="0.5" intercept="0.25"></feFuncG> + <feFuncB type="linear" slope="0.5" intercept="0.5"></feFuncB> + </feComponentTransfer> + </filter> + <filter id="gamma" x="0" y="0" width="100%" height="100%"> + <feComponentTransfer> + <feFuncR type="gamma" amplitude="4" exponent="7" offset="0"></feFuncR> + <feFuncG type="gamma" amplitude="4" exponent="4" offset="0"></feFuncG> + <feFuncB type="gamma" amplitude="4" exponent="1" offset="0"></feFuncB> + </feComponentTransfer> + </filter> + </defs> + + <g font-weight="bold"> + <text x="0" y="5%">Default</text> + <rect x="0" y="8%" width="100%" height="20"></rect> + <text x="0" y="26%">Identity</text> + <rect x="0" y="29%" width="100%" height="20" style="filter:url(#identity)"></rect> + <text x="0" y="47%">Table lookup</text> + <rect x="0" y="50%" width="100%" height="20" style="filter:url(#table)"></rect> + <text x="0" y="68%">Linear function</text> + <rect x="0" y="71%" width="100%" height="20" style="filter:url(#linear)"></rect> + <text x="0" y="89%">Gamma function</text> + <rect x="0" y="92%" width="100%" height="20" style="filter:url(#gamma)"></rect> + </g> +</svg></code></pre> + +<h3 id="CSS">CSS</h3> + +<pre><code>rect { + fill: url(#rainbow); +}</code></pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Example", "100%", 340)}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("feBlend") }}</li> + <li>{{ SVGElement("feColorMatrix") }}</li> + <li>{{ SVGElement("feComposite") }}</li> + <li>{{ SVGElement("feConvolveMatrix") }}</li> + <li>{{ SVGElement("feDiffuseLighting") }}</li> + <li>{{ SVGElement("feDisplacementMap") }}</li> + <li>{{ SVGElement("feFlood") }}</li> + <li>{{ SVGElement("feFuncA") }}</li> + <li>{{ SVGElement("feFuncB") }}</li> + <li>{{ SVGElement("feFuncG") }}</li> + <li>{{ SVGElement("feFuncR") }}</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> |