如何将带有背景颜色的“SVG”元素包裹在文本周围

Answer 1

对话气泡宽 167，高 67。使 viewBox 适合该尺寸。在 x 轴中，文本应该位于中间——如果是 50%。在 y 轴上，对话气泡的“指针”高度为 16，因此文本必须放置在 y 轴上的

(67 - 16) / 2 + 16

中。

<div class="bubble" id="bubble-1">
  <svg xmlns="http://www.w3.org/2000/svg" width="285" viewBox="0 0 167 67">
    <path d="M149.738 16L140.5 0L131.262 16H4C1.79086 16 0 17.7909 0 20V63C0 65.2091 1.79086 67 4 67H163C165.209 67 167 65.2091 167 63V20C167 17.7909 165.209 16 163 16H149.738Z"
    fill="#FFF28D" />
    <text x="50%" y="41.5" fill="#000" dominant-baseline="middel"
      text-anchor="middle">Some twxt here</text>
 </svg>
</div>