如何在从Figma复制的SVG路径内部添加文字？

解决方案 #

你需要调整SVG内部元素的顺序，同时给text标签添加定位和对齐属性即可实现效果，核心修改逻辑如下：

• 把<path>标签放在<text>标签前面：SVG的渲染顺序是后写的元素层级更高，先渲染背景气泡，再渲染文字才不会被遮挡
• 给<text>添加位置、对齐属性，让文字在气泡内居中：设置x/y为画布中心点，搭配水平+垂直居中属性即可快速实现居中效果
• 可根据需要自定义文字大小、颜色等样式属性

修改后的完整代码如下：

<svg width="185" height="89" viewBox="0 0 185  89" fill="none" xmlns="http://www.w3.org/2000/svg">
  <!-- 先渲染背景气泡 -->
  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.87195 4.36808C5 6.07937 5 8.31958 5 12.8V27.4268L0.481487 32.6984C-0.160496 33.4474 -0.160496 34.5526 0.481487 35.3016L5 40.5732V76.2C5 80.6804 5 82.9206 5.87195 84.6319C6.63893 86.1372 7.86278 87.3611 9.36808 88.1281C11.0794 89 13.3196 89 17.8 89H172.2C176.68 89 178.921 89 180.632 88.1281C182.137 87.3611 183.361 86.1372 184.128 84.6319C185 82.9206 185 80.6804 185 76.2V12.8C185 8.31958 185 6.07937 184.128 4.36808C183.361 2.86278 182.137 1.63893 180.632 0.871948C178.921 0 176.68 0 172.2 0H17.8C13.3196 0 11.0794 0 9.36808 0.871948C7.86278 1.63893 6.63893 2.86278 5.87195 4.36808Z" fill="#E06956" />
  <!-- 再渲染文字，添加居中属性 -->
  <text x="92.5" y="44.5" text-anchor="middle" dominant-baseline="middle" fill="#fff" font-size="16">hello</text>
</svg>

如果需要实现长文本自动换行，可以用<foreignObject>标签包裹HTML元素实现：

<svg width="185" height="89" viewBox="0 0 185  89" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.87195 4.36808C5 6.07937 5 8.31958 5 12.8V27.4268L0.481487 32.6984C-0.160496 33.4474 -0.160496 34.5526 0.481487 35.3016L5 40.5732V76.2C5 80.6804 5 82.9206 5.87195 84.6319C6.63893 86.1372 7.86278 87.3611 9.36808 88.1281C11.0794 89 13.3196 89 17.8 89H172.2C176.68 89 178.921 89 180.632 88.1281C182.137 87.3611 183.361 86.1372 184.128 84.6319C185 82.9206 185 80.6804 185 76.2V12.8C185 8.31958 185 6.07937 184.128 4.36808C183.361 2.86278 182.137 1.63893 180.632 0.871948C178.921 0 176.68 0 172.2 0H17.8C13.3196 0 11.0794 0 9.36808 0.871948C7.86278 1.63893 6.63893 2.86278 5.87195 4.36808Z" fill="#E06956" />
  <foreignObject x="20" y="10" width="145" height="69">
    <div xmlns="http://www.w3.org/1999/xhtml" style="color: #fff; font-size: 14px; line-height: 1.5;">
      这里可以放长文本，会自动换行适配气泡大小
    </div>
  </foreignObject>
</svg>

内容的提问来源于stack exchange，提问作者Nhan Nguyen