Обрезка и маскирование

Сначала может показаться противоречивым удалять часть созданного вами. Но, например, когда вы попробуете создать полукруг в SVG, вы быстро узнаете, для чего нужны следующие свойства:

• Обрезка — удаление частей элементов, определяемых другими частями. В этом случае эффекты частичной прозрачности невозможны: подход работает по принципу «всё или ничего».

• Маскирование, с другой стороны, позволяет создавать мягкие края с учётом прозрачности и значений серого в маске.

Создание областей обрезки

Создадим упомянутый выше полукруг на основе элемента circle:

<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="cut-off-bottom">
      <rect x="0" y="0" width="200" height="100" />
    </clipPath>
  </defs>

  <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
</svg>

В центре с координатами (100,100) рисуется круг радиусом 100. Атрибут clip-path ссылается на элемент <clipPath> с единственным элементом rect. Сам по себе этот прямоугольник закрасил бы верхнюю половину холста чёрным цветом. Обратите внимание: элемент clipPath обычно помещают в раздел defs.

Однако элемент rect рисоваться не будет. Вместо этого его данные о пикселях будут использоваться для определения того, какие пиксели круга попадут в итоговое изображение. Поскольку прямоугольник покрывает только верхнюю половину круга, нижняя половина исчезнет:

Теперь у нас есть полукруг, и нам не пришлось работать с дугами в элементах path. При обрезке проверяется каждый путь внутри clipPath с учётом его свойств обводки и трансформации. Затем любая часть целевого объекта, находящаяся в прозрачной области результирующего содержимого clipPath, не отображается. Цвет, непрозрачность и подобные свойства не влияют на результат, если только они не делают части объекта полностью невидимыми.

Маскирование

Эффект маскирования особенно наглядно демонстрирует градиент. Если нужно, чтобы элемент постепенно исчезал, этого эффекта можно быстро добиться с помощью масок.

<svg
  width="200"
  height="200"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="Gradient">
      <stop offset="0" stop-color="black" />
      <stop offset="1" stop-color="white" />
    </linearGradient>
    <mask id="Mask">
      <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)" />
    </mask>
  </defs>

  <rect x="0" y="0" width="200" height="200" fill="green" />
  <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" />
</svg>

Видно, что на самом нижнем слое находится заполненный зелёным цветом элемент rect, а поверх него — заполненный красным цветом элемент rect. У последнего атрибут mask указывает на элемент mask. Содержимое маски — это единственный элемент rect, заполненный градиентом от чёрного к белому. В результате пиксели красного прямоугольника используют значение яркости содержимого маски в качестве значения альфа-канала (прозрачности), и мы видим градиент от зелёного к красному:

Прозрачность с помощью opacity

Атрибут opacity позволяет задать прозрачность всего элемента:

<rect x="0" y="0" width="100" height="100" opacity=".5" />

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

<svg
  width="200"
  height="200"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="0" y="0" width="200" height="200" fill="blue" />
  <circle
    cx="100"
    cy="100"
    r="50"
    stroke="yellow"
    stroke-width="40"
    stroke-opacity=".5"
    fill="red" />
</svg>

В этом примере на синем фоне виден красный круг. Для жёлтой обводки задана непрозрачность 50%, поэтому она фактически состоит из двух цветов.

Использование известных приёмов CSS

Один из самых мощных инструментов в арсенале веб-разработчика — display: none. Поэтому неудивительно, что это свойство CSS было добавлено и в SVG, вместе с visibility и clip, определёнными в CSS 2. Чтобы сбросить ранее заданное значение display: none, важно знать, что исходное значение для всех элементов SVG — inline.