SVG - текст с цветом фона и закругленными borders

Question

Можно ли сделать такое с pure SVG, как на изображении?

Без Javascript, фиксированных размеров или HTML.

Я пытался использовать прямоугольный элемент, но это не гибкое решение. Также я пытался использовать фильтр, но это решение без закругленных углов.

_{Свободный перевод вопроса SVG - Text with background color and rounded borders от участника @holden321.}

Answer 1

Вы можете сделать это с помощью фильтра двумя альтернативными способами:

Примените feFlood фильтр, размытие его, затем обрезайте низкие непрозрачности, далее наберите оставшуюся непрозрачность до полной.
Проведите в прямоугольнике с закругленными углами текст через feImage и используйте относительный размер, чтобы растянуть его.

В обоих случаях отступы относительны, поэтому, если ваш текст слишком длинный, закругленные углы переполняют область фильтра. В отличие от 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>

_{Свободный перевод ответа SVG - Text with background color and rounded borders от участника @Michael Mullany.}

БЛОГ НА HUSL

SVG - текст с цветом фона и закругленными borders

Ответы (1 шт):