SVG分段与笔划-dasharray:盒-阴影在切片上不工作

Question

我用笔画-dasharray生成了一个SVG片段，但不幸的是，我无法为特定的部分设置一个框影(标记为活动的等等)。正常情况下，它将与filter: drop-shadow(0 4px 25px rgba(0, 0, 0, 0.75));一起工作。我还尝试了一些不同的方法来集成svg中的<filter>，但随后它改变了幻灯片的整体大小。有人能帮上忙吗？

​

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> -->

​

它应该是什么样子

​

​

Answer 1

要将阴影应用到的形状必须是最后绘制的，因此阴影不会被其他形状过度绘制。此外，CSS过滤器版本似乎由于某些原因而无法工作，因此您必须用SVG版本替换它。下面是一些有用的东西。注意，形状是旋转的，但是feOffset应用dx和dy预旋转，所以添加dx =2不会将阴影移到右边。

​

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>

​