Вырезание и маскирование

Мы создаем вышеупомянутый полукруг на основе элемента 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 не будет нарисован. Вместо этого его данные пикселей будут использоваться для определения, какие пиксели окружности «попадут» в окончательное отображение. Поскольку прямоугольник покрывает только верхнюю половину окружности, нижняя половина окружности исчезнет:

Теперь у нас есть полукруг, без необходимости работы с дугами в элементах пути. Для вырезания каждый путь внутри 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 позволяет задать прозрачность для целого элемента:

<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%, что приводит к двуцветной обводке.

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