svg - 带有若隐若现的边框的矩形

Question

我想创建带有平滑边框的矩形。重要的部分，它的实体部分的大小应该是确定的。为了澄清，我举个例子：

我可以使用高斯滤波器达到预期的效果：

<svg id="svg-root" width="800" height="600"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <g id="test-body-content">
    <defs>
      <filter id="blur" filterUnits="userSpaceOnUse">
       <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
       <feMerge>
         <feMergeNode in="blur" />
       </feMerge>
      </filter>
    </defs>
    <rect x="50" y="50" width="200" height="100" fill="black" filter="url(#blur)"/>
  </g>
</svg>

结果：

但它不符合要求，因为它在给定尺寸（宽度=“200”高度=“100”）内不是完全实心的：

我还考虑过应用垂直于笔划的渐变，但 SVG 不支持这样的事情。

Answer 1

正如@ABFORCE 所写，您可以通过filter元素提供所需的宽度和高度。

例如：

<filter id="blur" filterUnits="objectBoundingBox" 
        x="0" y="0" width="100%" height="100%">
   ...
</filter>

请注意，这意味着上面的过滤器将被裁剪到过滤元素的边界框。

如果您想要过滤器输出中的原始形状，您可以像这样添加另一个 feMergeNode：

<svg id="svg-root" width="800" height="600"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <g id="test-body-content">
    <defs>
      <filter id="blur" filterUnits="userSpaceOnUse">
       <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
       <feMerge>
         <feMergeNode in="blur" />
         <feMergeNode in="SourceGraphic"/>
       </feMerge>
      </filter>
    </defs>
    <rect x="50" y="50" width="200" height="100" fill="black" filter="url(#blur)"/>
  </g>
</svg>

活生生的例子。