带有隐约边框的矩形

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>

结果：

但它不符合要求，因为它在给定尺寸（width =“200”height =“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>

Live example