Is there a way to cut out an svg path from another svg but leave remaining shape?-CodePudding

I have 2 main svgs one is a LOGO, and the other is a PILL shape I wish to cut out from the logo path. I have them in my index in <SVG> format. 4 letters in the logo needs to have each a cutout of this pill shape. I currently put all 4 paths of the pill svg into <clipPath> and tried cutting out the first pill shape from the 1st letter however I didn't get the desired result. I will attach an image of what I got vs what I wanted. Any help would be appreciated.

What I want to see - [1]: https://i.stack.imgur.com/5RqXk.png

What happened when I tried clip path - [2]: https://i.stack.imgur.com/WqRkl.png

I'm providing SVG code of the 1 letter and 1 pill shape for short demo purposes.

JS / REACT

<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;
}

CodePudding user response：

Yes, the mask was the best solve as I had to rotate the shapes in CSS. My solution was to make a mask in HTML and put each letter and pill in there. The mask layer should have all the layers you want to use in this process, make the layer you want to hide - black while the ones that should be seen is white. demonstrated below -

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;
}