stroke

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Как и у одноимённого SVG-атрибута, задаёт цвет обводки SVG-элемента. При наличии указанного через CSS или атрибут на этом же SVG-теге свойства stroke-width — толщины обводки, которая должна быть больше 0.

Пример

Секция статьи "Пример"
        
          
          .circle {    stroke: #123456;}
          .circle {
    stroke: #123456;
}

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"

Свойство соответствует SVG-атрибуту stroke и содержит обозначение цвета.

Помимо стандартных форматов: именованного цвета (orange, rebeccapurple и др.), RGB(A), HEX и HSL(A), stroke поддерживает формат ссылки на SVG-элемент, который будет как паттерн заполнять площадь обводки:

        
          
          .circle {    stroke: url(#pattern);}
          .circle {
    stroke: url(#pattern);
}

        
        
          
        
      
Открыть демо в новой вкладке

Подсказки

Секция статьи "Подсказки"

💡 Через CSS-свойство можно управлять цветом обводки SVG-элементов с помощью других возможностей CSS, например, при наведении курсора:

        
          
          .circle {    stroke: url(#pattern);}.circle:hover {    stroke: blue;}
          .circle {
    stroke: url(#pattern);
}

.circle:hover {
    stroke: blue;
}

        
        
          
        
      

На практике

Секция статьи "На практике"