ContextQMD
Back to Content

slope

files/en-us/web/svg/reference/attribute/slope/index.md

latest3.1 KB
Original Source

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 <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/Guides/Content_type#number" >&#x3C;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="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>

{{EmbedLiveSample('Examples', 300, 200)}}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}