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

Question

使用纯SVG可以制作出这样的东西吗？

没有Javascript，固定大小或html。

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

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

Answer 1

您可以通过两种替代方式使用过滤器：

1. 进行泛洪，使其模糊，然后修剪低不透明度，然后将剩余的不透明度调到最大
2. 通过feImage走私到圆角rect中，并使用相对大小对其进行拉伸

在两种情况下，填充都是相对的，因此，如果文本太长，则圆角将溢出过滤区域。与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>