Урок №5. Использование маски <clipPath> для скрытия определённых областей элементов SVG

С помощью элементов <clipPath> и <mask> можно показывать или прятать определённые области элементов SVG. Разница между двумя подходами в том, что <clipPath> работает на уровне геометрических объектов, т.е. создаёт области, которые могут быть видны или не видны. А <mask> работает на пиксельном уровне, т.е. не только создаёт геометрические объекты, но и позволяет регулировать, например, прозрачность.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Пример использования clipPath в svg</title>
   </head>
   <body>
      <svg width="600" height="600">
         <defs>
            <clipPath id="demo">
               <circle cx="0%" cy="15%" r="70%"/>
            </clipPath>
         </defs>
         <image class="image"
         href="heli.jpg"
         x="10" y="50" width="100%" height="100%"
         clip-path="url(#demo)"/>
      </svg>
   </body>
</html>

А вот так выглядит изображение после применения clipPath в форме круга в SVG. Всё, что находится за пределами круга, было обрезано.