Оформлення фігур

В CSS можна динамічно змінювати деякі характеристики вбудованого векторного зображення або іконки з SVG-спрайту, наприклад заливання, колір або тип обведення. Значення можна задавати як атрибутами SVG-фігур, так і однойменними CSS-властивостями. На практиці для оформлення фігур використовують не атрибути, а CSS-код, оскільки його простіше підтримувати і змінювати.

Властивість fill

Управляє кольором заливання. Колір можна задавати в будь-якому зручному форматі. Якщо колір заливання не вказаний, фігура буде залита поточним кольором тексту, за замовчуванням чорним (#000000). Повністю прибрати заливання можна значенням none, в результаті вийде повністю прозора фігура.

/* Встановлюємо колір заливання у спокійному стані. */
.icon {
  fill: #2a2a2a;
}

/* Змінюємо колір заливання при ховері. */
.icon:hover {
  fill: #ff6347;
}

Властивість fill-opacity

Управляє тільки прозорістю кольору заливання, а не всього кольору або елемента, тобто відрізняється від opacity або stroke-opacity. Наприклад, якщо у іконки буде задане червоне обведення, то на її колір ця властивість не вплине. Значення задається числом від 0 до 1.

.icon {
  fill: #2a2a2a;
  fill-opacity: 0.7;
}

/* fill-opacity також застосується до нового кольору при ховері. */
.icon:hover {
  fill: #03a9f4;
}

Властивість stroke

Встановлює колір обведення. За замовчуванням не має значення. Характеристики обведення, наприклад колір і товщина, задаються окремими властивостями.

.icon {
  stroke: #f44336;
}

Властивість stroke-width

Контролює товщину обведення. Значення за замовчуванням 1px, тому для однопіксельного обведення достатньо вказати колір у властивості stroke. Якщо задана товщина обведення, але не заданий колір, вона не відобразиться.

.icon {
  stroke: #f44336;
  stroke-width: 3px;
}

Властивість stroke-opacity

Управляє тільки прозорістю кольору обведення, а не всього кольору або елемента. Значення задається числом від 0 до 1.

.icon {
  stroke: #f44336;
  stroke-width: 3px;
  stroke-opacity: 0.7;
}