邊框若隱若現的矩形

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。