stroke (SVG)

CSS-свойство stroke задаёт цвет и стиль обводки SVG-фигур.

Зачем нужно

Управляет обводкой SVG через CSS: цвет, толщина, пунктир, анимация рисования линий (stroke-dashoffset).

Где используется

  • Outline-иконки с hover-эффектом
  • Анимация рисования линий (line drawing)
  • Прогресс-бары на SVG (круглые/линейные)

Code example

/* Базовая обводка */
.icon-outline {
  fill: none;
  stroke: #3b82f6;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Hover */
.icon-outline:hover {
  stroke: #1d4ed8;
  stroke-width: 2.5;
}

/* Пунктирная линия */
.dashed {
  stroke-dasharray: 8 4; /* 8px линия, 4px пробел */
}

/* Анимация рисования */
.draw-line {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: draw 2s ease forwards;
}
@keyframes draw {
  to { stroke-dashoffset: 0; }
}

/* Круглый прогресс-бар */
.progress-ring {
  fill: none;
  stroke: #3b82f6;
  stroke-width: 4;
  stroke-dasharray: 251; /* 2 * PI * r */
  stroke-dashoffset: 63; /* 75% заполнения */
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
}

Связанные темы

Ресурсы