svg

Rectangle with looming border

I want to create rectangle with smoothed border. Important part that size of it's solid part should be certain. To clarify I'll give an example:

I can achieve desired effect with Gaussian filter:

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

Result:

rect1

But it doesn't meet requirements because it is not fully solid within given dimensions (width="200" height="100"):

enter image description here

Also I thought about applying gradient perpendicular to stroke, but SVG doesn't support such thing.

Solution

  • As @ABFORCE wrote you can provide the width and height you want via the filter element.

    For example:

    <filter id="blur" filterUnits="objectBoundingBox" 
        x="0" y="0" width="100%" height="100%">
   ...
</filter>

    Note that this means that above filter will be clipped to the boundingbox of the filtered element.

    If you want the original shape in the filter output you could add another feMergeNode like this:

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