如何单独调整SVG右侧宽度适配文本？或用CSS实现该异形容器？

我了解SVG本身没有内容适配的概念，这个问题已经困扰我多日。我有一个Figma设计的图形（可导出SVG），是两个形状通过Figma的UNION规则合并而成：

body { background-color: #7fb6ff80;}

<svg width="188" height="71" viewBox="0 0 188 71" fill="none" xmlns="http://www.w3.org/2000/svg">
  <mask id="path-1-inside-1_193_1631" fill="white">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M72.3203 50.6719C68.8459 50.6719 65.7635 52.7341 63.7839 55.5894C57.4655 64.7034 46.9298 70.6719 35 70.6719C15.67 70.6719 0 55.0019 0 35.6719C0 16.342 15.67 0.671936 35 0.671936C46.9298 0.671936 57.4655 6.64051 63.7839 15.7544C65.7635 18.6098 68.8459 20.6719 72.3203 20.6719H173C181.284 20.6719 188 27.3877 188 35.6719C188 43.9562 181.284 50.6719 173 50.6719H72.3203Z"/>
  </mask>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M72.3203 50.6719C68.8459 50.6719 65.7635 52.7341 63.7839 55.5894C57.4655 64.7034 46.9298 70.6719 35 70.6719C15.67 70.6719 0 55.0019 0 35.6719C0 16.342 15.67 0.671936 35 0.671936C46.9298 0.671936 57.4655 6.64051 63.7839 15.7544C65.7635 18.6098 68.8459 20.6719 72.3203 20.6719H173C181.284 20.6719 188 27.3877 188 35.6719C188 43.9562 181.284 50.6719 173 50.6719H72.3203Z" fill="white"/>
  <path d="M63.7839 15.7544L62.9621 16.3242L63.7839 15.7544ZM62.9621 55.0197C56.8225 63.8757 46.588 69.6719 35 69.6719V71.6719C47.2715 71.6719 58.1085 65.531 64.6057 56.1592L62.9621 55.0197ZM35 69.6719C16.2223 69.6719 1 54.4496 1 35.6719H-1C-1 55.5542 15.1177 71.6719 35 71.6719V69.6719ZM1 35.6719C1 16.8943 16.2223 1.67194 35 1.67194V-0.328064C15.1177 -0.328064 -1 15.7897 -1 35.6719H1ZM35 1.67194C46.588 1.67194 56.8225 7.4682 62.9621 16.3242L64.6057 15.1847C58.1085 5.81283 47.2715 -0.328064 35 -0.328064V1.67194ZM72.3203 21.6719H173V19.6719H72.3203V21.6719ZM173 21.6719C180.732 21.6719 187 27.9399 187 35.6719H189C189 26.8354 181.837 19.6719 173 19.6719V21.6719ZM187 35.6719C187 43.4039 180.732 49.6719 173 49.6719V51.6719C181.837 51.6719 189 44.5085 189 35.6719H187ZM173 49.6719H72.3203V51.6719H173V49.6719ZM62.9621 16.3242C65.0754 19.3724 68.4347 21.6719 72.3203 21.6719V19.6719C69.2571 19.6719 66.4515 17.8471 64.6057 15.1847L62.9621 16.3242ZM64.6057 56.1592C66.4515 53.4968 69.2571 51.6719 72.3203 51.6719V49.6719C68.4347 49.6719 65.0754 51.9714 62.9621 55.0197L64.6057 56.1592Z" fill="#F2F2F2" mask="url(#path-1-inside-1_193_1631)"/>
</svg>

当前遇到的问题："Your Collection"这类文本在多语言场景下需要向右扩展（比如西班牙语"Tu Coleccion"或更长文本），现咨询两个问题：

1. 如何在不改动左侧圆形部分的前提下，调整SVG右侧区域的宽度以适配文本内容？
2. 如何不使用SVG，仅通过CSS实现该图形？难点在于圆形与矩形衔接处的曲线，其余部分较易实现。

问题1：SVG宽度适配文本的实现方式 #

核心思路是拆分SVG结构，让左侧圆形固定，右侧区域改为动态拉伸，并将文本嵌入SVG内部，让SVG随文本宽度自动调整：

• 拆分原路径：将左侧圆形和右侧可拉伸区域分离
• 用<defs>复用路径代码，减少冗余
• 设置SVG的width为auto，右侧矩形使用width="100%"
• 在SVG内部添加<text>元素承载文本，确保SVG宽度跟随文本变化

body { background-color: #7fb6ff80; }

<svg viewBox="0 0 100 71" fill="none" xmlns="http://www.w3.org/2000/svg" width="auto">
  <!-- 定义可复用的路径和遮罩 -->
  <defs>
    <path id="fixed-left-circle" d="M35 70.6719C15.67 70.6719 0 55.0019 0 35.6719C0 16.342 15.67 0.671936 35 0.671936C46.9298 0.671936 57.4655 6.64051 63.7839 15.7544C65.7635 18.6098 68.8459 20.6719 72.3203 20.6719V50.6719C68.8459 50.6719 65.7635 52.7341 63.7839 55.5894C57.4655 64.7034 46.9298 70.6719 35 70.6719Z" />
    <mask id="stretch-mask" fill="white">
      <use href="#fixed-left-circle" />
      <rect x="72.3203" y="20.6719" width="100%" height="30" />
    </mask>
  </defs>

  <!-- 绘制基础形状 -->
  <g mask="url(#stretch-mask)">
    <use href="#fixed-left-circle" fill="white" />
    <rect x="72.3203" y="20.6719" width="100%" height="30" fill="white" />
    <!-- 内部浅色装饰 -->
    <path d="M63.7839 15.7544L62.9621 16.3242L63.7839 15.7544ZM62.9621 55.0197C56.8225 63.8757 46.588 69.6719 35 69.6719V71.6719C47.2715 71.6719 58.1085 65.531 64.6057 56.1592L62.9621 55.0197ZM35 69.6719C16.2223 69.6719 1 54.4496 1 35.6719H-1C-1 55.5542 15.1177 71.6719 35 71.6719V69.6719ZM1 35.6719C1 16.8943 16.2223 1.67194 35 1.67194V-0.328064C15.1177 -0.328064 -1 15.7897 -1 35.6719H1ZM35 1.67194C46.588 1.67194 56.8225 7.4682 62.9621 16.3242L64.6057 15.1847C58.1085 5.81283 47.2715 -0.328064 35 -0.328064V1.67194ZM72.3203 21.6719H100V19.6719H72.3203V21.6719ZM100 21.6719C107.732 21.6719 114 27.9399 114 35.6719H116C116 26.8354 108.837 19.6719 100 19.6719V21.6719ZM114 35.6719C114 43.4039 107.732 49.6719 100 49.6719V51.6719C108.837 51.6719 116 44.5085 116 35.6719H114ZM100 49.6719H72.3203V51.6719H100V49.6719ZM62.9621 16.3242C65.0754 19.3724 68.4347 21.6719 72.3203 21.6719V19.6719C69.2571 19.6719 66.4515 17.8471 64.6057 15.1847L62.9621 16.3242ZM64.6057 56.1592C66.4515 53.4968 69.2571 51.6719 72.3203 51.6719V49.6719C68.4347 49.6719 65.0754 51.9714 62.9621 55.0197L64.6057 56.1592Z" fill="#F2F2F2" />
  </g>

  <!-- 嵌入文本，可根据需求修改内容 -->
  <text x="80" y="40" font-size="16" fill="#333">Tu Coleccion</text>
</svg>

问题2：纯CSS实现该图形 #

核心用border-radius实现左侧圆形，伪元素模拟衔接曲线，渐变+遮罩实现内部浅色装饰，容器自动随文本宽度扩展：

body { background-color: #7fb6ff80; }

.collection-badge {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding: 0 20px 0 70px;
  height: 71px;
  background-color: white;
  border-radius: 35.5px; /* 高度一半，实现左侧圆形 */
}

/* 衔接处曲线 */
.collection-badge::before {
  content: '';
  position: absolute;
  left: 72px;
  top: 20