slope

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

The slope attribute defines the values for linear filters, such as brightness.

The slope attribute is supported by children of the <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:

Note: Originally, the slope attribute was used within <font-face> to indicate the vertical stroke angle of a font. This use case has been deprecated.

Usage notes

Value <number>
Default value 1
Animatable Yes
<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.

Specifications

Specification
Filter Effects Module Level 1
# element-attrdef-fecomponenttransfer-slope

Browser compatibility