To have two strokes and blur on an svg polygon or circle I have created a filter which does it, although the second "stroke" (created with the filter) gets clipped or isn't like a perfect circle. Any idea how to solve this issue the right way?
<svg height="500" width="400">
<defs>
<filter id="select-highlight" width="200%" height="200%" x="-50%" y="-50%">
<feOffset in="SourceGraphic" dx="0" dy="0" result="offset"></feOffset>
<feMorphology in="offset" result="offsetmorph" operator="dilate" radius="2"></feMorphology>
<feFlood flood-color="white"></feFlood>
<feComposite operator="in" in2="offsetmorph" result="stroke"></feComposite>
<feGaussianBlur stdDeviation="5" result="offsetblur"></feGaussianBlur>
<feFlood flood-color="#4881D7"></feFlood>
<feComposite operator="in" in2="offsetblur" result="blur"></feComposite>
<feMerge>
<feMergeNode in="blur"></feMergeNode>
<feMergeNode in="stroke"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<g transform="translate(50,50) scale(3)">
<polygon points=" 22,0
44,10
44,34
22,44
0,34
0,10" fill="#e6a6d5" stroke="#4881D7" stroke-width="2" filter="url(#select-highlight)"></polygon>
</g>
<g transform="translate(50,250) scale(3)">
<circle cx="22" cy="22" r="22" fill="#b6ccef" stroke="#4881D7" stroke-width="2" filter="url(#select-highlight)"></circle>
</g>
</svg>
feMorphology uses a square search box when it performs a dilation, so it's going to create these kinds of clipping effects. An alternative way to dilate a shape that preserves the original shape is to do a Gaussian Blur and then use an feComposite/feFuncA/table to convert the blurred area into a fully opaque shape. Like so:
<svg height="500" width="400" color-interpolation-filters="sRGB">
<defs>
<filter id="select-highlight" width="200%" height="200%" x="-50%" y="-50%" filterRes="1000">
<feOffset in="SourceGraphic" dx="0" dy="0" result="offset"></feOffset>
<feGaussianBlur stdDeviation="2" />
<feComponentTransfer result="offsetmorph">
<feFuncA type="table" tableValues="0 .05 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"/>
</feComponentTransfer>
<feFlood flood-color="white"></feFlood>
<feComposite operator="in" in2="offsetmorph" result="stroke"></feComposite>
<feGaussianBlur stdDeviation="5" result="offsetblur"></feGaussianBlur>
<feFlood flood-color="#4881D7"></feFlood>
<feComposite operator="in" in2="offsetblur" result="blur"></feComposite>
<feMerge>
<feMergeNode in="blur"></feMergeNode>
<feMergeNode in="stroke"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<g transform="translate(50,50) scale(3)">
<polygon points=" 22,0
44,10
44,34
22,44
0,34
0,10" fill="#e6a6d5" stroke="#4881D7" stroke-width="2" filter="url(#select-highlight)"></polygon>
</g>
<g transform="translate(50,250) scale(3)">
<circle cx="22" cy="22" r="22" fill="#b6ccef" stroke="#4881D7" stroke-width="2" filter="url(#select-highlight)"></circle>
</g>
</svg>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With