slope

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна во всех браузерах с ⁨июля 2015⁩ года.

Атрибут slope задаёт значения для линейных фильтров, например фильтров яркости.

Атрибут slope поддерживается дочерними элементами примитива фильтра <feComponentTransfer>, включая функции передачи feFunc-RGBA. Если значение type функции передачи равно linear, атрибут slope задаёт наклон линейной функции.

Этот атрибут можно использовать со следующими элементами функций передачи компонентов SVG, если задано значение type="linear":

Примечание: Изначально атрибут slope использовался в <font-face> для обозначения угла наклона вертикального штриха шрифта. Этот вариант использования устарел.

Примечания по использованию

Значение	`<number>`
Значение по умолчанию	`1`
Анимируемый	Да

<number>: Это значение задаёт наклон линейных функций передачи компонентов.

Примеры

В этом примере к тексту в градиентном блоке применены два линейных фильтра. Наклоны функций передачи фильтров различаются.

<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>

Совместимость с браузерами

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari для iOS	Samsung Internet	WebView для Android	WebView для iOS
`slope`	5	12	3	15	6	18	4	14	6	1.0	4.4	6

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/slope