-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
127 lines (110 loc) · 3.32 KB
/
index.md
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
---
title: slope
slug: Web/SVG/Attribute/slope
page-type: svg-attribute
browser-compat: svg.elements.feFuncR
spec-urls: https://drafts.fxtf.org/filter-effects/#element-attrdef-fecomponenttransfer-slope
---
{{SVGRef}}
The **`slope`** attribute defines the values for linear filters, such as brightness.
The `slope` attribute is supported by children of the {{SVGElement("feComponentTransfer")}} filter primitive, including the `feFunc-RGBA` transfer functions. When the `type` of a transfer function is `linear`, the `slope` defines the slope of the linear function.
You can use this attribute with the following SVG component transfer function elements when `type="linear"` is set:
- {{SVGElement("feFuncR")}}
- {{SVGElement("feFuncG")}}
- {{SVGElement("feFuncB")}}
- {{SVGElement("feFuncA")}}
> [!NOTE]
> Originally, the `slope` attribute was used within {{SVGElement("font-face")}} to indicate the vertical stroke angle of a font. This use case has been deprecated.
## Usage notes
<table class="properties">
<tbody>
<tr>
<th scope="row">Value</th>
<td>
<code
><a href="/en-US/docs/Web/SVG/Content_type#number"
><number></a
></code
>
</td>
</tr>
<tr>
<th scope="row">Default value</th>
<td><code>1</code></td>
</tr>
<tr>
<th scope="row">Animatable</th>
<td>Yes</td>
</tr>
</tbody>
</table>
- `<number>`
- : This value indicates the slope of the linear component transfer functions.
## Examples
In this example, a gradient box has two text elements with linear filters applied. The slopes of the filter transfer functions of each filter differ.
```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="#ff0000" />
<stop offset="1" stop-color="#0000ff" />
</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>
```
{{EmbedLiveSample('Examples', 300, 200)}}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}