Зміна властивостей в SVG

Використовуючи CSS можна динамічно змінювати деякі властивості й характеристики векторних зображень або іконок. наприклад при наведенні мишки. Розглянемо далі головні приклади.

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

Властивість fill - визначає колір заливки графічного елемента. Колір можна задавати в будь-якому форматі. Якщо цій властивості задати значення none, то вона стане прозорою.

.icon {
  fill: #007bff; /* колір символу */
}

.icon:hover {
  fill: red; /* колір символу при hover */
}

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

Властивість fill-opacity - визначає прозорість кольору заливки, а не всього кольору або елемента. Тобто властивості opacity або stroke-opacity це відповідно налаштування просторості всього елемента і його обводки. Значення задається числом від 0 до 1.

.icon {
  fill-opacity: 1;
}

.icon:hover {
fill-opacity: 0.5;
}

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

Властивість stroke - визначає колір контуру графічного елемента. За замовчуванням не має значення.

.icon {
  stroke: red;
}

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

Властивість stroke-width - визначає ширину контуру графічного елемента. Якщо задане значення stroke, то значення stroke-width за замовчуванням 1px. Інакше потрібно додатково задати цю властивість.

.icon {
  stroke: red;
  stroke-width: 2px;
}

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

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

.icon {
  stroke: red;
  stroke-opacity: 1;
}

Крім того, у SVG через CSS можна керувати такими властивостями: opacity (прозорість всього елемента), transform (трансформація елемента), gradient (використання градієнту для заливки), clip-path (визначає область, яка використовується для обрізання графічних елементів).