Svg 有隐现边框的矩形

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

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

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

结果:

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

---

我还考虑过应用垂直于笔划的渐变，但SVG不支持这种功能。

正如@ABFORCE所写的，您可以通过

过滤器

元素提供所需的宽度和高度

例如：

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

---

.

您可以使用过滤器添加原始宽度和高度width@ABFORCE，你能解释一下吗？这几乎是我所需要的。你能解释一下空的feMergeNode是做什么的吗？它和，它把源图形放在上面一样。看起来不一样。看，我明确设置的地方。另外，这与缺少第二个合并节点不同。奇怪。我一定累了：）是的，你说得对。在参数中取消

，与在上一个过滤器步骤输出中进行相同。我已经更新了答案。