Клавиша / esc

stroke

Управляем цветом и толщиной обводки у SVG.

Время чтения: меньше 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;
}

        
        
          
        
      

На практике

Скопировано

Realetive советует

Скопировано

🛠 CSS-свойство stroke влияет на цвет обводки только при вставке всего SVG-кода непосредственно в HTML — SVG-изображение,
вставленное через SVG-шрифт, <img>, <object> или background, background-image не увидит его.