Учебник SVG

Элемент SVG

Элемент SVG <clipPath>

Элемент <clipPath> SVG используется для вырезки форм SVG по определенному пути. Это также называется SVG вырезкой. Формы, находящиеся внутри пути, видны, а внешние части не видны.

Онлайн примеры

В следующем примере используется clipPath для рисования синего сектора.

Пример

<svg　height="450"　width="450">
　　<defs>
　　　　　　<clipPath　id="clip">
　　　　　　　　　　<rect　x="15"　y="15"　width="40"　height="40"　/>
　　　　　　</clipPath>
　　</defs>
　　<circle　cx="25"　cy="25"　r="30"
　　　　　　　　　　style="fill:　#0000ff;　clip-path:　url(#clip);　"　/>
</svg>

Тестировать, посмотрите‹/›

Результат выполнения будет следующим:

Объяснение использования

Теперь вы можете видеть, что остальная часть круга, находящаяся внутри контура вырезки, была вырезана.
Атрибут id элемента <clipPath> определяет уникальное имя пути вырезки.

Более подробные примеры онлайн

В следующем примере используется clipPath для рисования сердца.

Пример

<style>
svg{width:40%;height:30%}
@keyframes　openYourHeart　{from　{r:　0}　to　{r:　60px}}
#myClip　circle　{
　　animation:　openYourHeart　15s　infinite;
}
</style>
<svg　viewBox="0　0　100　100">
　　<clipPath　id="myClip">
　　　　}
　　　　　　Все, что находится вне окружности, будет обрезано и станет невидимым.
　　　　-->
　　　　<circle　cx="40"　cy="35"　r="35"></circle>
　　</clipPath>
　
　　}
　　<path id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z"></path>
　
　　}
　　　　Только та часть красного круга, которая находится внутри черного сердца, видна;
　　　　По мере увеличения окружности круга он постепенно превращается в красное сердце.
　　-->
　　<use clip-path="url(#myClip)" xlink:href="#heart" fill="red"></use>
</svg>

Проверьте, посмотрите ‹/›

Результат выполнения:

Элемент SVG <mask>Элемент SVG <pattern>