Добавить концентрические линии вокруг прямоугольника в SVG

Question

Я пытаюсь создать прямоугольник с тремя borders вокруг, используя фильтры. Результат должен выглядеть так:

но мой результат выглядит так:

Мой код:

<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>

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

_{Свободный перевод вопроса Add concentric lines around a rect in svg от участника @Andreas Köberle.}

Answer 1

Вам просто нужно увеличить границы фильтра, чтобы они выходили достаточно далеко за пределы фильтруемого объекта. Значения по умолчанию - дополнительные y="-10%" во всех направлениях, но этого недостаточно для вашего варианта использования.

Я выбрал y="-70%"

<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>

_{Свободный перевод ответа от участника @Robert Longson.}

Answer 2

Если вы хотите сохранить форму, вы не можете использовать feMorphology, потому что он использует квадратное ядро с равным весом. Вместо этого вам нужно использовать размытие и альфа-усиление (он же липкий (gooey) эффект). (Также нужно увеличить регион действия фильтра)

<svg width="1000px" height="1000px" >
    <rect width=300 height=50 rx=25 x=100 y=100 filter="url(#filter)" fill="white"></rect>
    <filter id="filter" x="-50%" y="-100%" height="400%" width="200%" color-interpolation-filters="sRGB">

      <feFlood flood-color="RGBA(173, 15, 91, 1.00)" result="fill1"/>
      <feGaussianBlur stdDeviation="8" in="SourceGraphic"/>
      <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -2" result="radius1"/>
      <feComposite in="fill1" in2="radius1" operator="in" result="compose1"/>
     
      <feFlood flood-color="RGBA(217, 145, 180, 1.00)" result="fill2"/>
      <feGaussianBlur stdDeviation="8" in="compose1"  />
      <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -2" result="radius2"/>
      <feComposite in="fill2" in2="radius2" operator="in" result="compose2"/>
      
           
      <feFlood flood-color="RGBA(247, 231, 239, 1.00)" result="fill3"/>
      <feGaussianBlur stdDeviation="8" in="compose2"/>
      <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -2" result="radius3"/>
      <feComposite in="fill3" in2="radius3" operator="in" result="compose3"/>
      
      <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>

_{Свободный перевод ответа от участника @Michael Mullany.}

БЛОГ НА HUSL

Добавить концентрические линии вокруг прямоугольника в SVG

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