Using feMorphology svg filter trims corners in the output

I am using SVG filter feMorphology's dilate to implement shadow spread for a shape.

Am expecting below result.

<?xml version="1.0" encoding="UTF-8"?> <svg width="188px" height="209px" viewBox="0 0 188 209" version="1.1" xmlns="" xmlns:xlink=""> <title>Test</title> <defs> <polygon points="94 29 168 194 20 194"></polygon> <filter x="-100%" y="-100%" width="1000%" height="1000%" filterUnits="userSpaceOnUse"> <feMorphology radius="5" operator="dilate" in="SourceAlpha" result="morphOut"></feMorphology> <feMerge> <feMergeNode in="morphOut"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> </defs> <g> <path d="M 20 20 L 120 20 L 120 120 L 20 120 z " filter="url(#filter)" stroke-width="1" fill-rule="evenodd" fill="rgb(216,216,216)"/> <path d="M 70 150 L 120 200 L 20 200 z" filter="url(#filter)" stroke-width="1" fill-rule="evenodd" fill="rgb(216,216,216)"/> </g> </svg>

But my code returns somewhat trimmed corners in some shapes. Help me sort out this.

1 Answer

The filter is working as expected:

The dilation (or erosion) kernel is a rectangle with a width of 2*x-radius and a height of 2*y-radius. In dilation, the output pixel is the individual component-wise maximum of the corresponding R,G,B,A values in the input image's kernel rectangle. In erosion, the output pixel is the individual component-wise minimum of the corresponding R,G,B,A values in the input image's kernel rectangle.

Imagine a square of, in your case, 10px × 10px, moving along the path. For dilation, the outermost pixel the square sweeps over will define the new outer border of the grafic. (For erosion, it would be the outermost pixel inside the path the square does not sweep over.)