SVG Piechart with stroke-dasharray: box-shadow on slice not working - svg

Question

I generated a SVG piechart with stroke-dasharray but unfortunately I could not set a box-shadow for a specific slice (to mark is as active etc.). Normally it would work with filter: drop-shadow(0 4px 25px rgba(0, 0, 0, 0.75));. I also tried some different ways to integrate <filter> inside the svg but then it changed the whole size of the slide. Can somebody help to achieve this?
body {
padding: 1rem;
background: #bbb;
text-align: center;
}
svg:not(:root) {
overflow: visible;
}
svg {
height: 280px;
width: 280px;
border: 20px solid white;
border-radius: 50%;
[id="1"] {
filter: drop-shadow(0 4px 25px rgba(0, 0, 0, 0.75));
}
}
<!-- 4 Elements -->
<svg height="20" width="20" viewBox="0 0 20 20">
<circle id="1" r="5" cx="10" cy="10"
stroke="tomato"
stroke-width="10"
stroke-dasharray="calc(90 * 31.42 / 360) 31.42"
transform="rotate(-90)"
transform-origin="center center"
/>
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="blue"
stroke-width="10"
stroke-dasharray="calc(90 * 31.42 / 360) 31.42"
transform-origin="center center"
/>
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="yellow"
stroke-width="10"
stroke-dasharray="calc(90 * 31.42 / 360) 31.42"
transform="rotate(90) scale(1.15)"
transform-origin="center center"
/>
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="green"
stroke-width="10"
stroke-dasharray="calc(90 * 31.42 / 360) 31.42"
transform="rotate(180)"
transform-origin="center center"
/>
</svg>
<!-- 5 Elements -->
<!-- <svg height="20" width="20" viewBox="0 0 20 20">
<circle r="10" cx="10" cy="10" fill="white" />
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="tomato"
stroke-width="10"
stroke-dasharray="calc(72 * 31.42 / 360) 31.42"
transform="rotate(-90)"
transform-origin="center center"
/>
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="blue"
stroke-width="8"
stroke-dasharray="calc(72 * 31.42 / 360) 31.42"
transform="rotate(-18)"
transform-origin="center center"
/>
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="yellow"
stroke-width="8"
stroke-dasharray="calc(72 * 31.42 / 360) 31.42"
360-6 transform-origin="center center"
/>
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="magenta"
stroke-width="8"
stroke-dasharray="calc(72 * 31.42 / 360) 31.42"
transform="rotate(126)"
transform-origin="center center"
/>
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="green"
stroke-width="8"
stroke-dasharray="calc(72 * 31.42 / 360) 31.42"
transform="rotate(198)"
transform-origin="center center"
/>
</svg> -->
<!-- <svg height="20" width="20" viewBox="0 0 20 20">
<circle r="10" cx="10" cy="10" stroke="pink" />
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="tomato"
stroke-width="10"
stroke-dasharray="calc(60 * 31.42 / 360) 31.42"
transform="rotate(-90)"
transform-origin="center center"
/>
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="blue"
stroke-width="10"
stroke-dasharray="calc(60 * 31.42 / 360) 31.42"
transform="rotate(-30)"
transform-origin="center center"
/>
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="yellow"
stroke-width="10"
transform="rotate(30)"
stroke-dasharray="calc(60 * 31.42 / 360) 31.42"
transform-origin="center center"
/>
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="magenta"
stroke-width="10"
stroke-dasharray="calc(60 * 31.42 / 360) 31.42"
transform="rotate(90)"
transform-origin="center center"
/>
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="green"
stroke-width="10"
stroke-dasharray="calc(60 * 31.42 / 360) 31.42"
transform="rotate(150)"
transform-origin="center center"
/>
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="aqua"
stroke-width="10"
stroke-dasharray="calc(60 * 31.42 / 360) 31.42"
transform="rotate(210)"
transform-origin="center center"
/>
</svg> -->
What it should look like

Answer 1

The shape that you want to apply the shadow to, has to be drawn last, so the shadow is not overdrawn by the other shapes. Also, the CSS filter version doesn't seem to be working for some reason - so you will have to replace it with an SVG version. Here is something that works. Note that the shape is rotated, but feOffset applies dx and dy pre-rotation, so adding a dx = 2 doesn't move the shadow to the right.
body {
padding: 1rem;
background: #bbb;
text-align: center;
}
svg:not(:root) {
overflow: visible;
}
svg {
height: 280px;
width: 280px;
border: 20px solid white;
border-radius: 50%;
}
<!-- 4 Elements -->
<svg height="20" width="20" viewBox="0 0 20 20">
<defs>
<filter id="dshadow" x="-100%" y="-100%" width="300%" height="300%">
<feGaussianBlur stdDeviation="1"/>
<feOffset dx="-1" result="shadow"/>
<feFlood flood-color="black" flood-opacity="0.75"/>
<feComposite operator="in" in2="shadow"/>
<feComposite operator="over" in="SourceGraphic"/>
</filter>
</defs>
<circle id="1" r="5" cx="10" cy="10"
stroke="tomato"
stroke-width="10"
stroke-dasharray="calc(90 * 31.42 / 360) 31.42"
transform="rotate(-90)"
transform-origin="center center"
/>
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="blue"
stroke-width="10"
stroke-dasharray="calc(90 * 31.42 / 360) 31.42"
transform-origin="center center"
/>
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="green"
stroke-width="10"
stroke-dasharray="calc(90 * 31.42 / 360) 31.42"
transform="rotate(180)"
transform-origin="center center"
/>
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="yellow"
stroke-width="10"
stroke-dasharray="calc(90 * 31.42 / 360) 31.42"
transform="rotate(90) scale(1.15)"
transform-origin="center center"
filter="url(#dshadow)"
/>
</svg>