opacity

Атрибут 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%" stop-color="skyblue" />
      <stop offset="100%" 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>

Примечания по использованию

<alpha-value>

Единое значение прозрачности, применяемое ко всему объекту, в виде <number>. Значения за пределами диапазона от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный) будут ограничены этим диапазоном.

Спецификации

Совместимость с браузерами

См. также

• Свойство CSS opacity
• fill-opacity
• stop-opacity
• stroke-opacity