Атрибут стоп-цвета SVG

Опубликовано: 25 Февраля, 2022

Атрибут stop-color используется для указания цвета, который будет использоваться в конечной точке градиента. Это влияет только на элемент <stop>. Значение этого атрибута по умолчанию - «черный».

Синтаксис:

 стоп-цвет = текущий цвет | цвет | icccolor

Значения атрибутов: этот атрибут принимает значения, указанные выше и описанные ниже:

  • currentcolor: обозначает текущий цвет заливки.
  • цвет: указывает значение цвета.
  • icccolor: указывает цветовой профиль ICC.

Примеры ниже иллюстрируют использование атрибута «стоп-цвет».

Пример 1:

Выход:

Example 2:

HTML

<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
  
    <svg height="200" width="200">
        <defs>
            <linearGradient id="gradient">
                <stop offset="20%" 
                    stop-color="rgb(20, 200, 0)" 
                    stop-opacity="0.4" />
  
                <stop offset="80%" 
                    stop-color="rgb(200, 200, 0)" 
                    stop-opacity="0.4" />
            </linearGradient>
        </defs>
  
        <rect width="100%" height="100%" 
            fill="url(#gradient)" 
            style="stroke: green;" />
  
        <rect x="30" y="30" width="70%" 
            height="70%" fill="url(#gradient)" />
  
        <text fill="Green" y="100" font-size="25">
            GeeksForGeeks
        </text>
    </svg>
</body>
  
</html>

Выход: