color-interpolation

Ограниченная доступность

Эта функция не входит в Baseline, поскольку не работает в некоторых из наиболее широко используемых браузеров.

Атрибут color-interpolation задаёт цветовое пространство для интерполяции градиентов, анимации цветов и альфа-композитинга.

Примечание: Для эффектов фильтров свойство color-interpolation-filters управляет выбором используемого цветового пространства.

Свойство color-interpolation выбирает, будут ли операции с цветом выполняться в цветовом пространстве sRGB или в линеаризованном цветовом пространстве RGB (с линейной световой энергией). После выбора подходящего цветового пространства используется покомпонентная линейная интерполяция.

Когда дочерний элемент смешивается с фоном, тип смешивания определяется значением свойства color-interpolation дочернего элемента, а не значением color-interpolation родительского элемента. Для градиентов, в которых используется атрибут href или устаревший атрибут xlink:href для ссылки на другой градиент, используется значение свойства элемента градиента, на который непосредственно ссылается свойство fill или stroke. При анимации цветов интерполяция выполняется согласно значению свойства color-interpolation анимируемого элемента.

Примечание: Как атрибут представления, color-interpolation также имеет соответствующее свойство CSS: color-interpolation. Если указаны оба варианта, приоритет имеет свойство CSS.

Этот атрибут можно использовать со следующими элементами SVG:

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

Значение	`auto` \| `sRGB` \| `linearRGB`
Значение по умолчанию	`sRGB`
Анимируемость	дискретно

auto: Указывает, что пользовательский агент может выбрать для интерполяции цвета пространство sRGB или linearRGB. Этот вариант означает, что автор не требует выполнять интерполяцию цвета в определённом цветовом пространстве.
sRGB: Указывает, что интерполяция цвета должна выполняться в цветовом пространстве sRGB.
linearRGB: Указывает, что интерполяция цвета должна выполняться в линеаризованном цветовом пространстве RGB, описанном в спецификации sRGB.

Пример

В этом примере показаны четыре элемента SVG, каждый из которых содержит элемент <rect> и градиент, используемый в качестве заливки для <rect>. В первых двух элементах SVG используются элементы <linearGradient>, а в следующих двух — элементы <radialGradient>. В неподдерживаемых браузерах градиент выглядит одинаково.

В первом элементе SVG атрибут color-interpolation не включён в элемент <linearGradient>, значение которого по умолчанию — sRGB.

<svg width="450" height="70">
  <title>
    Example of linearGradient excluding the color-interpolation attribute
  </title>
  <defs>
    <linearGradient id="gradientDefault">
      <stop offset="0%" stop-color="white" />
      <stop offset="25%" stop-color="blue" />
      <stop offset="50%" stop-color="white" />
      <stop offset="75%" stop-color="red" />
      <stop offset="100%" stop-color="white" />
    </linearGradient>
  </defs>
  <rect
    x="0"
    y="0"
    width="400"
    height="40"
    fill="url(#gradientDefault)"
    stroke="black" />
  <text x="0" y="60" font-family="courier" font-size="16">
    color-interpolation not set
  </text>
</svg>

Во втором элементе SVG атрибут color-interpolation включён в элемент <linearGradient> и имеет значение linearRGB.

<svg width="450" height="70">
  <title>
    Example of linearGradient using the color-interpolation attribute
  </title>
  <defs>
    <linearGradient id="gradientLinearRGB" color-interpolation="linearRGB">
      <stop offset="0%" stop-color="white" />
      <stop offset="25%" stop-color="blue" />
      <stop offset="50%" stop-color="white" />
      <stop offset="75%" stop-color="red" />
      <stop offset="100%" stop-color="white" />
    </linearGradient>
  </defs>
  <rect
    x="0"
    y="0"
    width="400"
    height="40"
    fill="url(#gradientLinearRGB)"
    stroke="black" />
  <text x="0" y="60" font-family="courier" font-size="16">
    color-interpolation="linearRGB"
  </text>
</svg>

В третьем элементе SVG атрибут color-interpolation не включён в элемент <radialGradient>, значение которого по умолчанию — sRGB.

<svg width="450" height="70">
  <title>
    Example of radialGradient excluding the color-interpolation attribute
  </title>
  <defs>
    <radialGradient id="none">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="gold" />
    </radialGradient>
  </defs>
  <rect x="0" y="0" width="400" height="40" fill="url(#none)" stroke="black" />
  <text x="0" y="60" font-family="courier" font-size="16">
    color-interpolation not set
  </text>
</svg>

В четвёртом элементе SVG атрибут color-interpolation включён в элемент <radialGradient> и имеет значение linearRGB.

<svg width="450" height="70">
  <title>
    Example of radialGradient using the color-interpolation attribute
  </title>
  <defs>
    <radialGradient id="radLinearRGB" color-interpolation="linearRGB">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="gold" />
    </radialGradient>
  </defs>
  <rect
    x="0"
    y="0"
    width="400"
    height="40"
    fill="url(#radLinearRGB)"
    stroke="black" />
  <text x="0" y="60" font-family="courier" font-size="16">
    color-interpolation="linearRGB" (SVG attr)
  </text>
</svg>

Спецификации

Спецификация
Scalable Vector Graphics (SVG) 2> # ColorInterpolationProperty>

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

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`color-interpolation`	≤80 Реализовано только значение `sRGB` по умолчанию	≤80 Реализовано только значение `sRGB` по умолчанию	≤72	≤67 Реализовано только значение `sRGB` по умолчанию	≤13.1 Реализовано только значение `sRGB` по умолчанию	≤80 Реализовано только значение `sRGB` по умолчанию	≤79	≤57 Реализовано только значение `sRGB` по умолчанию	≤13.4 Реализовано только значение `sRGB` по умолчанию	≤13.0 Реализовано только значение `sRGB` по умолчанию	≤80 Реализовано только значение `sRGB` по умолчанию	≤13.4 Реализовано только значение `sRGB` по умолчанию
`linearGradient`	Нет	Нет	123	Нет	Нет	Нет	123	Нет	Нет	Нет	Нет	Нет
`sRGB`	≤80	≤80	≤72	≤67	≤13.1	≤80	≤79	≤57	≤13.4	≤13.0	≤80	≤13.4

См. также

<linearGradient>
<radialGradient>
Свойство CSS color-interpolation
Спецификация sRGB
color-interpolation-filters
Цвета компьютера работают неправильно — наглядная демонстрация linearRGB

© 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/color-interpolation