SVG - 带有背景颜色和圆角边框的文本

Question

有没有可能用纯 SVG 做这样的事情？

没有 Javascript、固定大小或 html。

我尝试使用 rect 元素，但这不是一个灵活的解决方案。

我尝试使用过滤器，但这是没有圆角的解决方案。

Answer 1

您可以通过两种替代方式使用过滤器来做到这一点:

1. 做一个泛光，模糊它，然后剪掉低不透明度，然后将剩余的不透明度调到完全
2. 通过 feImage 在圆角矩形中走私并使用相对尺寸来拉伸(stretch)它

在这两种情况下，填充都是相对的，因此如果您的文本太长，圆角会溢出过滤器区域。与 CSS 不同，您不能在 SVG 中组合相对和绝对大小(至少 SVG 1.1)。所以这和你得到的一样好。

由于您确实在寻找 HTML 文本行为，但又希望在 SVG 中使用它，您可能需要考虑使用 foreignObject 并以这种方式嵌入 HTML 文本。

<svg width="800px" height="600px">
<defs>
  <filter id="rounded-corners" x="-5%" width="110%" y="0%" height="100%">
<feFlood flood-color="#FFAA55"/>
<feGaussianBlur stdDeviation="2"/>
<feComponentTransfer>
  <feFuncA type="table"tableValues="0 0 0 1"/>
</feComponentTransfer>

<feComponentTransfer>
  <feFuncA type="table"tableValues="0 1 1 1 1 1 1 1"/>
</feComponentTransfer>
   <feComposite operator="over" in="SourceGraphic"/>
  </filter>
  
   <filter id="rounded-corners-2" primitiveUnits="objectBoundingBox">
<feImage preserveAspectRatio="none" width="110%" height="110%" x="-5%" y="0%"  xlink:href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 400 40' height='40' width='400'%3E%3Crect fill='red' x='0' y='0' rx='10' ry='10' width='400' height='40'/%3E%3C/svg%3E"/>
   <feComposite operator="over" in="SourceGraphic"/>
  </filter> 
  
  
  </defs>

  
  <text filter="url(#rounded-corners)" x="20" y="40" style="font-size:30">Blur & opacity filter</text>
  
  <text filter="url(#rounded-corners)" x="20" y="80" style="font-size:30"> But the x padding is relative and overflows with long text</text>
  
<text filter="url(#rounded-corners-2)" x="20" y="140" style="font-size:30">feImage and a rect filter</text>
  
<text filter="url(#rounded-corners-2)" x="20" y="180" style="font-size:30">But you still can't get away from relative padding</text>

</svg>