Add concentric lines around a rect in svg

Question

I try to create a rect with 3 borders around using filters. The result should look like this:

but my result looks like this:

code:

<svg width=1000 height=1000 >
    <rect width=300 height=50 rx=25 x=100 y=100 filter="url(#filter)" fill="white"></rect>
    <filter id="filter">

      <feFlood flood-color="RGBA(173, 15, 91, 1.00)" result="fill1"></feFlood>
      <feMorphology in="SourceAlpha" operator="dilate" radius="8" result="radius1"></feMorphology>
      <feComposite in="fill1" in2="radius1" operator="in" result="compose1"></feComposite>
     
      <feFlood flood-color="RGBA(217, 145, 180, 1.00)" result="fill2"></feFlood>
      <feMorphology in="SourceAlpha" operator="dilate" radius="16" result="radius2"></feMorphology>
      <feComposite in="fill2" in2="radius2" operator="in" result="compose2"></feComposite>
      
           
      <feFlood flood-color="RGBA(247, 231, 239, 1.00)" result="fill3"></feFlood>
      <feMorphology in="SourceAlpha" operator="dilate" radius="24" result="radius3"></feMorphology>
      <feComposite in="fill3" in2="radius3" operator="in" result="compose3"></feComposite>
      
      <feMerge result="a452afbd-5e3f-4c25-abcf-3c77051dd340">
        <feMergeNode in="compose3"></feMergeNode>
        <feMergeNode in="compose2"></feMergeNode>

        <feMergeNode in="compose1"></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>

      </feMerge>
    </filter>
  </svg>

any idea how to get this right using filters.

Answer 1

You just neede to increase the filter bounds so they extend far enough outside the object being filtered.

The defaults are an additional 10% in all directions but that's not enough for your use case.

<svg width=1000 height=1000 >
    <rect width=300 height=50 rx=25 x=100 y=100 filter="url(#filter)" fill="white"></rect>
    <filter id="filter" y="-70%" height="240%">

      <feFlood flood-color="RGBA(173, 15, 91, 1.00)" result="fill1"></feFlood>
      <feMorphology in="SourceAlpha" operator="dilate" radius="8" result="radius1"></feMorphology>
      <feComposite in="fill1" in2="radius1" operator="in" result="compose1"></feComposite>
     
      <feFlood flood-color="RGBA(217, 145, 180, 1.00)" result="fill2"></feFlood>
      <feMorphology in="SourceAlpha" operator="dilate" radius="16" result="radius2"></feMorphology>
      <feComposite in="fill2" in2="radius2" operator="in" result="compose2"></feComposite>
      
           
      <feFlood flood-color="RGBA(247, 231, 239, 1.00)" result="fill3"></feFlood>
      <feMorphology in="SourceAlpha" operator="dilate" radius="24" result="radius3"></feMorphology>
      <feComposite in="fill3" in2="radius3" operator="in" result="compose3"></feComposite>
      
      <feMerge result="a452afbd-5e3f-4c25-abcf-3c77051dd340">
        <feMergeNode in="compose3"></feMergeNode>
        <feMergeNode in="compose2"></feMergeNode>

        <feMergeNode in="compose1"></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>

      </feMerge>
    </filter>
  </svg>