斜率
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 |
瀏覽器相容性
載入中…