在svg中的矩形周围添加同心线

Question

我尝试使用过滤器创建一个带有 3 个边框的矩形。 结果应如下所示：

但我的结果是这样的：

代码：

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

知道如何使用过滤器来解决这个问题。

Answer 1

如果要保留形状，则不能使用 feMorphology，因为它使用方形均匀加权内核。相反，您必须使用模糊和 alpha 增强（又名粘糊糊的效果）。 （还需要增加过滤区域）

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

Answer 2

您只需要增加过滤器边界，使它们延伸到被过滤对象之外足够远的地方。

默认值是在所有方向上额外增加 10%，但这对于您的用例来说还不够。

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

Answer 3

你不能用单独的路径来代替吗？

<svg width="320" height="120" viewBox="0 0 320 120">
<rect x="10" y="10" width="300" height="100" rx="50" ry="50" fill="none" stroke="#fad" stroke-width="10"/>
<rect x="20" y="20" width="280" height="80" rx="40" ry="40" fill="none" stroke="#b58" stroke-width="10"/>
<rect x="30" y="30" width="260" height="60" rx="30" ry="30" fill="none" stroke="#603" stroke-width="10"/>
</svg>