Using SVG filter to add border to the text

Question

I have learned from here to used filter to add a background to the text in SVG. But how can I add a border to the text?

<svg width="100%" height="100%">
  <defs>
    <filter x="0" y="0" width="1" height="1" id="solid">
      <feFlood flood-color="yellow"/>
      <feComposite in="SourceGraphic"/>
    </filter>
  </defs>
<text filter="url(#solid)" x="20" y="50" font-size="50">solid background</text>
</svg>

I want to have both background and border. Thanks in forward. — MRP, Jul 18 '18 at 14:13

Robert Longson · Accepted Answer · 2018-07-18T15:06:24.380

Use another slightly bigger filter to create the border.

<svg width="100%" height="100%">
  <defs>
    <filter x="0" y="0" width="1" height="1" id="solid">
      <feFlood flood-color="yellow"/>
      <feComposite in="SourceGraphic"/>
    </filter>
    <filter x="-0.005" y="-0.01" width="1.01" height="1.02" id="border">
      <feFlood flood-color="black"/>
      <feComposite in="SourceGraphic"/>
    </filter>
  </defs>
<g filter="url(#border)">
  <text filter="url(#solid)" x="20" y="50" font-size="50">solid background</text>
<g>
</svg>

Looks like Chrome doesn't support multiple filters on the same element but if you have a browser that does e.g. Firefox you can avoid the extra <g> element...

<svg width="100%" height="100%">
  <defs>
    <filter x="0" y="0" width="1" height="1" id="solid">
      <feFlood flood-color="yellow"/>
      <feComposite in="SourceGraphic"/>
    </filter>
    <filter x="-0.005" y="-0.01" width="1.01" height="1.02" id="border">
      <feFlood flood-color="black"/>
      <feComposite in="SourceGraphic"/>
    </filter>
  </defs>
  <text filter="url(#solid) url(#border)" x="20" y="50" font-size="50">solid background</text>
</svg>

Using SVG filter to add border to the text

1 Answers1