непрозрачность

Атрибут opacity определяет прозрачность объекта или группы объектов, то есть степень перекрытия фоном позади элемента.

Вы можете использовать этот атрибут со следующими элементами SVG:

• <a>
• <circle>
• <ellipse>
• <foreignObject>
• <g>
• <image>
• <line>
• <marker>
• <path>
• <polygon>
• <polyline>
• <rect>
• <svg>
• <switch>
• <symbol>
• <text>
• <textPath>
• <tspan>
• <use>

В отличие от fill-opacity, stroke-opacity, и stop-opacity, которые применяются к отдельным операциям и отображаются во время отображения элемента, opacity применяется ко всему объекту или группе и больше похожа на пост-обработку отрендеренного изображения объекта или группы. Поэтому, если у вас есть одновременно opacity и другие атрибуты непрозрачности в одном месте, они будут накладываться друг на друга, и непрозрачность будет перемножаться.

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="0" y2="100%">
      <stop offset="0%" style="stop-color:skyblue;" />
      <stop offset="100%" style="stop-color:seagreen;" />
    </linearGradient>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" />
  <circle cx="50" cy="50" r="40" fill="black" />
  <circle cx="150" cy="50" r="40" fill="black" opacity="0.3" />
</svg>