如何用SVG从Logo路径裁剪胶囊形状并保留剩余图形？

问题核心 #

你遇到的问题主要有两点：

1. CSS transform 对 <clipPath> 内部的路径无效，所以给 .pill-1 加的旋转不会作用到裁剪路径上
2. 裁剪路径和被裁剪的字母分属两个不同SVG，坐标系不统一，导致裁剪区域位置偏差

修改后的代码 #

JS/React #

<div className="wrapper-logo">
  <svg className="App-logo" viewBox="0 0 375 84" fill="#DB3232" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <!-- 将clipPath移到当前SVG内部，确保坐标系一致 -->
      <clipPath id="pill-1">
        <!-- 使用SVG原生transform属性实现旋转，而非CSS -->
        <path 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" 
              transform="rotate(204 42 42)" />
      </clipPath>
    </defs>
    <!-- 应用裁剪路径 -->
    <path className="LETTER-P" clip-path="url(#pill-1)" 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并调整样式，否则可移除 -->
  <svg className="App-pill" viewBox="0 0 375 84" fill="none" stroke="#EFE5DC" strokeWidth="2" xmlns="http://www.w3.org/2000/svg">
    <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" 
          transform="rotate(204 42 42)" />
  </svg>
</div>

CSS #

.wrapper-logo {
  position: relative; /* 确保绝对定位的胶囊SVG有参照 */
}

.App-logo {
  min-width: 100%;
  pointer-events: none;
}

.App-pill {
  min-width: 100%;
  pointer-events: none;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
}

/* 移除原有的.pill-1 CSS变换，改用SVG内部的transform属性 */

关键修改说明 #

1. 统一SVG上下文：将<clipPath>移到包含字母的SVG内部，确保裁剪路径和被裁剪元素共享同一个坐标系，避免位置偏差
2. 使用SVG原生transform：CSS transform无法作用于<clipPath>内部的元素，改用SVG元素自带的transform属性实现旋转，变换会直接应用到裁剪路径上
3. 调整胶囊SVG样式：如需显示胶囊轮廓，将填充改为无、添加描边，避免遮挡字母
4. 设置容器定位：给.wrapper-logo添加position: relative，确保绝对定位的胶囊SVG定位正确

扩展到4个字母的方案 #

重复上述逻辑，为每个字母创建独立的<clipPath>，调整每个胶囊路径的旋转角度和位置，确保每个字母的裁剪区域匹配预期即可。

内容的提问来源于stack exchange，提问作者Laiqa Mohid