边框若隐若现的矩形

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> 

注意，这意味着，上述过滤器将被夹在过滤元件的boundingBox的。

如果你想在滤波器输出原来的形状，你可以添加其他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。