CSS-свойство `color-interpolation`

CSS-свойство color-interpolation используется в SVG для указания цветового пространства, применяемого элементами SVG <linearGradient> и <radialGradient>.

Синтаксис

/* Keyword values */
color-interpolation: auto;
color-interpolation: sRGB;
color-interpolation: linearRGB;

Значения

Для этого свойства указывается одно из следующих ключевых слов:

auto

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

sRGB

Указывает, что интерполяция цветов должна выполняться в цветовом пространстве sRGB. Используется по умолчанию, если свойство color-interpolation не задано.

linearRGB

Указывает, что интерполяция цветов должна выполняться в линеаризованном цветовом пространстве RGB, как описано в спецификации sRGB.

Формальное определение

Формальный синтаксис

Пример

В первом примере SVG свойство color-interpolation не указано для элемента <linearGradient>, поэтому по умолчанию для интерполяции цветов используется sRGB. Во втором примере показана интерполяция цветов с использованием значения linearRGB.

<svg width="450" height="70">
  <title>Example of using the color-interpolation CSS Property</title>
  <defs>
    <linearGradient id="sRGB">
      <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(#sRGB)" stroke="black" />
  <text x="0" y="60" font-family="courier" font-size="16">
    no color-interpolation (CSS property)
  </text>
</svg>

<svg width="450" height="70">
  <title>Example of using the color-interpolation CSS Property</title>
  <defs>
    <linearGradient id="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(#linearRGB)"
    stroke="black" />
  <text x="0" y="60" font-family="courier" font-size="16">
    color-interpolation: linearRGB; (CSS property)
  </text>
</svg>

svg {
  display: block;
}

#linearRGB {
  color-interpolation: linearRGB;
}

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

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

См. также

• <linearGradient>
• <radialGradient>
• Атрибут SVG color-interpolation