интерполяция-цветов

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

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

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

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

Примечание: В качестве презентационного атрибута 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.

html

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

html

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

html

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

html

<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 # ИнтерполяцияЦветов

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`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`
`linearGradient`	Нет	Нет	123	Нет	Нет	Нет	123	Нет	Нет	Нет	Нет
`sRGB`	≤80	≤80	≤72	67	≤13.1	80	79	57	≤13.4	13.0	80

См. также

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

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