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

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

Please add an executable StackOverflow Snippet to your post. It will help readers execute your code with one click. And help create answers with one click. See [How to add a StackOverflow snippet](https://meta.stackoverflow.com/questions/269753/feedback-requested-runnable-code-snippets-in-questions-and-answers) — Danny '365CSI' Engelman, Aug 23 '22 at 10:53

score 0 · Accepted Answer · answered Aug 23 '22 at 14:12

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>

OK NIce! if the slices should be clickable with a box shadow, I have to remove the clicked cirlcle in the DOM and add it at the end? — Mizu, Aug 24 '22 at 14:03
yes, there's no z-index inside an SVG element, so you have to delete and insert elements into the DOM in order to get proper layering. — Michael Mullany, Aug 24 '22 at 17:17

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

1 Answers1