🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Доступно в Baseline в статусе «Widely Available» с 2022-09-24

SVG позволяет задавать прозрачность элементов с помощью атрибутов fill-opacity и stroke-opacity. Первое управляет прозрачностью заливки фигуры, второе — линий контура. Эти свойства помогают создавать плавные градиенты, тени и эффекты прозрачности, делая графику более живой и многослойной.

Пример:

<svg width="200" height="200">
  <circle cx="100" cy="100" r="80" fill="blue" fill-opacity="0.5" stroke="black" stroke-width="4" stroke-opacity="0.8" />
</svg>

Здесь fill-opacity уменьшает прозрачность заливки, а stroke-opacity — линий. Можно управлять ими как через CSS, так и напрямую в атрибутах элемента, чтобы добиться нужного эффекта прозрачности в SVG.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.