While I've seen a similar question here: How to add box-shadow to a svg path circle shape, I am struggling to grasp how the transition from box shadow characteristics to SVG drop shadow characteristics was achieved. (Especially given that SVG Drop shadows do not have a spread radius concept.)
I am aiming for this specific box shadow effect: box-shadow: 0px 10px 25px 0px rgba(18, 103, 17, 0.15);
At present, my code looks like this:
<svg width="250" height="250">
<defs>
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="25" />
<feOffset dx="0" dy="10" result="offsetblur" />
<feOffset dx="-10" dy="0" result="offsetblur" />
<feFlood flood-color="rgba(18, 103, 17, 0.15)" flood-opacity="1" />
<feComposite in2="offsetblur" operator="in" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<circle cx="112.53" cy="112.53" r="87" fill="none" stroke="#74C947" stroke-width="25.53" style="filter: url(#drop-shadow);"></circle>
</svg>If using CSS box shadow directly on the SVG circle is an option, I'm open to it, but it seems only drop shadows are allowed.