斜率
slope 属性定义线性滤镜（如亮度）的值。
slope 属性被 <feComponentTransfer> 滤镜原语的子元素支持，包括 feFunc-RGBA 传递函数。当传递函数的 type 是 linear 时，slope 定义了线性函数的斜率。
当设置了 type="linear" 时，您可以将此属性与以下 SVG 组件传递函数元素一起使用
注意： 最初，slope 属性用于 <font-face> 中，以指示字体的垂直笔画角度。此用例已被弃用。
用法说明
| 值 |
<number>
|
|---|---|
| 默认值 | 1 |
| 可动画的 | 是 |
<number>-
此值表示线性组件传递函数的斜率。
示例
在此示例中，一个渐变框有两个应用了线性滤镜的文本元素。每个滤镜的滤镜传递函数的斜率不同。
html
<svg
width="8cm"
height="4cm"
viewBox="0 0 800 400"
xmlns="http://www.w3.org/2000/svg"
version="1.1">
<title>Examples of feComponentTransfer operations</title>
<desc>
Text strings showing the effects of the slope attribute of the
feComponentTransfer filter function linear options.
</desc>
<defs>
<linearGradient
id="MyGradient"
gradientUnits="userSpaceOnUse"
x1="100"
y1="0"
x2="600"
y2="0">
<stop offset="0" stop-color="red" />
<stop offset="1" stop-color="blue" />
</linearGradient>
<filter
id="Linear1"
filterUnits="objectBoundingBox"
x="0%"
y="0%"
width="100%"
height="100%">
<feComponentTransfer>
<feFuncR type="linear" slope="1" />
<feFuncG type="linear" slope="1" />
<feFuncB type="linear" slope="1" />
</feComponentTransfer>
</filter>
<filter
id="Linear2"
filterUnits="objectBoundingBox"
x="0%"
y="0%"
width="100%"
height="100%">
<feComponentTransfer>
<feFuncR type="linear" slope="0.5" />
<feFuncG type="linear" slope="2.5" />
<feFuncB type="linear" slope="5" />
</feComponentTransfer>
</filter>
</defs>
<rect fill="none" stroke="blue" x="1" y="1" width="798" height="398" />
<g
font-family="Verdana"
font-size="100"
font-weight="bold"
fill="url(#MyGradient)">
<text x="100" y="190" filter="url(#Linear1)">Slope1</text>
<text x="100" y="290" filter="url(#Linear2)">Slope2</text>
</g>
</svg>
规范
| 规范 |
|---|
| 滤镜效果模块第 1 级 # element-attrdef-fecomponenttransfer-slope |
浏览器兼容性
加载中…