stroke

Как и у одноимённого 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 советует

Скопировать ссылку "Realetive советует" Скопировано

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

+ Развернуть