English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Учебник по SVG

Элементы SVG

Элемент剪切 пути <clippath> SVG

SVG-путь реза (также известный как SVG реза) используется для реза форм SVG по определенному пути. Часть формы, находящаяся внутри пути, видна, а часть, находящаяся снаружи, не видна.

Пример пути реза

Это пример простого пути реза:

<svg width="200" height="100" style="border: 1px solid #cccccc;">
　　　　<defs>
　　　　　　　　<clippath id="clipPath">
　　　　　　　　　　　　<rect x="15" y="15" width="40" height="40"></rect>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<circle cx="25" cy="25" r="20" style="fill: #0000ff; clip-path: url(#clipPath);"></circle>
</svg>
<svg width="200" height="100" style="border: 1px solid #cccccc;">
　　　　<defs>
　　　　　　　　<clippath id="clipPath2">
　　　　　　　　　　　　<rect x="15" y="15" width="40" height="40"></rect>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<circle cx="25" cy="25" r="20" style="fill: #0000ff; clip-path: url(#clipPath2);"></circle>
　　　　<rect x="15" y="15" width="40" height="40" style="stroke: #000000; fill:none;"></rect>
</svg>
Тест, чтобы проверить‹/›

Этот пример определяет путь реза, напоминающий прямоугольник (форма в элементе <clipPath>). Круг, определенный в конце примера, вызывается свойством clip-path с помощью id атрибута <clipPath>.

В левом нижнем углу показано полученное изображение. Справа показано то же изображение, но также нарисован контур вырезки.

Обратите внимание, что только круговая часть видна внутри контура вырезки. Остальная часть будет вырезана.

Продвинутые контуры вырезки

Вы можете использовать для контура вырезки не только прямоугольники. Вы можете использовать круги,椭圆, многоугольники или пользовательские пути. Любая форма SVG может быть использована в качестве контура вырезки.

Вот пример использования элемента <path> в качестве контура вырезки,因为这些 являются наиболее продвинутыми типами контуров вырезки, которые вы можете использовать. Контур вырезки будет применен к элементу <rect>.

<svg width="200" height="100" style="border: 1px solid #cccccc;">
　　　　<rect x="5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00;">
</svg>
<svg width="200" height="100" style="border: 1px solid #cccccc;">
　　　　<defs>
　　　　　　　　<clippath id="clipPath3">
　　　　　　　　　　　　<path d="M10,10 q60,60 100,0 q50,50 50,50 l40,0 l-40,40 l-100,-20">
　　　　　　　　</clippath>
　　　　</defs>
　　　　<rect x="5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00; clip-path: url(#clipPath3);">
</svg>
Тест, чтобы проверить‹/›

Это полученное изображение - справа. Слева показано изображение без контура вырезки.

Контур вырезки на группе

Контур вырезки может быть применен к группе SVG-форм, а не к каждой форме по отдельности. Достаточно поместить формы внутри элемента <g>, затем установить CSS-свойство clip-path на этом элементе. Вот пример:

<svg width="200" height="100" style="border: 1px solid #cccccc;">
　　　　<rect x="5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00;">
　　　　<circle cx="20" cy="20" r="20" style="stroke: none; fill: #ff0000;"></circle>
</svg>
<svg width="200" height="100" style="border: 1px solid #cccccc;">
　　　　<defs>
　　　　　　　　<clippath id="clipPath4">
　　　　　　　　　　　　<rect x="10" y="20" width="100" height="20"></rect>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<g style="clip-path: url(#clipPath4);">
　　　　　　　　<rect x="5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00;"></rect>
　　　　　　　　<circle cx="20" cy="20" r="20" style="stroke: none; fill: #ff0000;"></circle>
　　　　</g>
</svg>
Тест, чтобы проверить‹/›

Ниже приведены изображения без контура вырезки, затем изображение с примененным контуром вырезки:

Текст в качестве контура вырезки

Текст также может быть использован в качестве контуров вырезки. Вот пример:

<svg width="200" height="100" style="border: 1px solid #cccccc;">
　　　　<rect x="5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00;">
　　　　<circle cx="20" cy="20" r="20" style="stroke: none; fill: #ff0000;"></circle>
</svg>
<svg width="200" height="100" style="border: 1px solid #cccccc;">
　　　　<defs>
　　　　　　　　<clippath id="clipPath5">
　　　　　　　　　　　　<text x="10" y="20" style="font-size: 20px;">
　　　　　　　　　　　　　　　　Это текст
　　　　　　　　　　　　</text>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<g style="clip-path: url(#clipPath5);">
　　　　　　　　<rect x="5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00;"></rect>
　　　　　　　　<circle cx="20" cy="20" r="20" style="stroke: none; fill: #ff0000;"></circle>
　　　　</g>
</svg>
Тест, чтобы проверить‹/›

Результаты изображений с и без пути реза:

Это текст

Как вы видите, сейчас отображается только часть формы текста внутри.

Фильтр <filter> SVGРеференсное руководство по SVG