Есть ли способ вырезать путь svg из другого svg, но оставить оставшуюся форму?
У меня есть 2 основных svg, один из которых - ЛОГОТИП, а другой - форма ТАБЛЕТКИ, которую я хочу вырезать из пути логотипа. Они есть у меня в индексе в формате <SVG>. 4 буквы в логотипе должны иметь вырез в форме этой таблетки. В настоящее время я поместил все 4 пути svg таблетки в <clipPath> и попытался вырезать первую форму таблетки из 1-й буквы, однако я не получил желаемого результата. Я прикреплю изображение того, что я получил против того, что я хотел. Любая помощь будет оценена по достоинству.
Что я хочу увидеть - [1]: https://i.stack.imgur.com/5RqXk.png
Что произошло, когда я попробовал клип-путь - [2]: https://i.stack.imgur.com/WqRkl.png
Я предоставляю код SVG в форме 1 буквы и 1 таблетки для коротких демонстрационных целей.
JS / РЕАКТ
<div className = "wrapper-logo">
<svg className = "App-logo" viewBox = "0 0 375 84" fill = "#DB3232" xmlns = "http://www.w3.org/2000/svg">
<path className = "LETTER-P" d = "M39.3,6.1c9.59-.72,18.89,2.31,26.17,8.58,14.99,12.98,16.72,35.69,3.68,50.69-12.98,15.07-35.76,16.8-50.75,3.82-2.52-2.24-4.76-4.83-6.63-7.64v14.13c0,1.59-1.3,2.88-2.88,2.88s-2.88-1.3-2.88-2.88V41.94c0-8.58,3.1-16.94,8.72-23.43,6.27-7.28,14.99-11.68,24.58-12.4Z"/></svg>
<svg className = "App-pill" viewBox = "0 0 375 84" fill = "#DB3232" xmlns = "http://www.w3.org/2000/svg"><defs>
<clipPath id = "pill-1" ><path className = "pill-1" d = "M47.3377 18.8021L18.8226 47.1101C13.7279 52.1678 13.7293 60.3942 18.8258 65.3743C23.9223 70.4298 32.2122 70.4281 37.2309 65.3704L65.746 37.0624C68.2554 34.5713 69.5477 31.2502 69.5471 27.9295C69.5465 24.6087 68.253 21.2882 65.7428 18.7982C60.7223 13.7426 52.4325 13.7444 47.3377 18.8021Z" fill = "#EFE5DC"/></clipPath>
</svg>
</div>
CSS
.App-logo {
min-width: 100%;
pointer-events: none;
}
.App-pill {
min-width: 100%;
margin-top: -20px;
pointer-events: none;
position: absolute;
z-index: 2;
top: 0;
left: 0;
}
/* LETTER */
.LETTER-P {
clip-path: url(#pill-1);
}
/* PILL */
.pill-1 {
/* mask-composite: exclude; */
transform: rotate(204deg);
transform-origin: 42px 42px;
}
Если вам не нужно динамически изменять/анимировать свой логотип, вы можете использовать составной путь, используя чередующиеся направления пути для вырезанных областей. См. пример codepen. Вы можете создавать составные контуры в любом векторном редакторе (например, inkscape), используя такие операции с контурами, как вычитание/извлечение.
спасибо всем, я опубликую свое решение ниже
Ответы 1
Да, маска была лучшим решением, так как мне приходилось вращать фигуры в CSS. Мое решение состояло в том, чтобы сделать маску в HTML и поместить туда каждую букву и таблетку. Слой маски должен содержать все слои, которые вы хотите использовать в этом процессе, сделайте слой, который вы хотите скрыть, черным, а те, которые должны быть видны, белыми. продемонстрировано ниже -
HTML
<div className = "wrapper-logo">
<svg className = "App-logo" viewBox = "0 0 375 84" fill = "#DB3232" xmlns = "http://www.w3.org/2000/svg">
<path className = "LETTER-P" d = "M39.3,6.1c9.59-.72,18.89,2.31,26.17,8.58,14.99,12.98,16.72,35.69,3.68,50.69-12.98,15.07-35.76,16.8-50.75,3.82-2.52-2.24-4.76-4.83-6.63-7.64v14.13c0,1.59-1.3,2.88-2.88,2.88s-2.88-1.3-2.88-2.88V41.94c0-8.58,3.1-16.94,8.72-23.43,6.27-7.28,14.99-11.68,24.58-12.4Z"/></svg>
<svg className = "App-pill" viewBox = "0 0 375 84" fill = "#DB3232" xmlns = "http://www.w3.org/2000/svg"><defs>
<mask id = "mask-p">
<path className = "LETTER-P" d = "M39.3,6.1c9.59-.72,18.89,2.31,26.17,8.58,14.99,12.98,16.72,35.69,3.68,50.69-12.98,15.07-35.76,16.8-50.75,3.82-2.52-2.24-4.76-4.83-6.63-7.64v14.13c0,1.59-1.3,2.88-2.88,2.88s-2.88-1.3-2.88-2.88V41.94c0-8.58,3.1-16.94,8.72-23.43,6.27-7.28,14.99-11.68,24.58-12.4Z" fill = "white"/>
<path className = "pill-1" d = "M47.3377 18.8021L18.8226 47.1101C13.7279 52.1678 13.7293 60.3942 18.8258 65.3743C23.9223 70.4298 32.2122 70.4281 37.2309 65.3704L65.746 37.0624C68.2554 34.5713 69.5477 31.2502 69.5471 27.9295C69.5465 24.6087 68.253 21.2882 65.7428 18.7982C60.7223 13.7426 52.4325 13.7444 47.3377 18.8021Z" fill = "black"/>
</mask>
</defs>
</svg>
</div>
CSS
.LETTER-P {
mask: url(#mask-p);
}
.pill-1 {
transform: rotate(0deg);
transform-origin: 42px 42px;
}
вместо этого вы, вероятно, захотите использовать маску.