Прямоугольник с надвигающейся рамкой

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.