如何在svg圆形笔划上创建插入阴影？

Question

如何在SVG中创建以下小部件？

我对形状本身很好，但我正在与后面的圆圈上的插入阴影挣扎。

我已经尝试了一个径向渐变，它“有效”，但它看起来并不那么好，我必须按千分之一的百分比来调整停止值才能使它完全正确，它只是感觉完全是hacky。

有没有更好的办法？

生成SVG的代码：

<svg width="180" height="180" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle cx="90" cy="90" r="72" fill="none" stroke="#ddd" stroke-width="18"></circle>
  <path class="main-arc" d="M 90 18 A 72 72 0 1 1 85.47908259388944 18.142075553164446" fill="transparent" stroke-width="18" stroke="black" stroke-linecap="round" style="stroke-dasharray: 452.389; stroke-dashoffset: 366.435;">
  </path>
</svg>

Answer 1

在较暗的灰色背景上绘制一个浅灰色的描边圆圈，应用高斯模糊滤镜，并使用clipPath剪切结果：

<svg width="360" height="360" viewBox="0 0 180 180">
  <defs>
    
    <!-- Gaussian blur filter used to soften the shadow edges -->
    <filter id="blur" filterUnits="userSpaceOnUse" x="-90" y="-90"
            width="180" height="180">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
    </filter>
    
    <!-- Annular clip path for the progress meter background -->
    <clipPath id="ring" clip-rule="evenodd">
      <path d="M0-81A81 81 0 0 1 0 81A81 81 0 0 1 0-81z
               M0-63A63 63 0 0 1 0 63A63 63 0 0 1 0-63z" />
    </clipPath>
    
  </defs>
  
  <!-- Set orgin to centre of drawing -->
  <g transform="translate(90,90)">
  
    <!-- Start with pale yellow background -->
    <rect x="-90" y="-90" width="180" height="180" fill="#e8e0ce"
          stroke="none" />
    
    <!-- Draw the progress ring on top, and clip using the above clip path -->
    <g clip-path="url(#ring)">

      <!-- Dark grey background -->
      <rect x="-85" y="-85" width="170" height="170" fill="#433"
            stroke="none" />

      <!-- Lighter grey circle with blur filter applied -->
      <circle cx="0" cy="2.5" r="72" stroke="#655" stroke-width="18"
              stroke="#655" fill="none" filter="url(#blur)"/>
      
    </g>
    
    <!-- Progress bar and text -->
    <path class="main-arc" d="M 0 -72 A 72 72 0 1 1 -4.52 -71.86"
          style="stroke-dasharray: 452.389; stroke-dashoffset: 366.435;"
          fill="transparent" stroke-width="18" stroke="#b65"
          stroke-linecap="round" />
    <text x="0" y="0" font-size="40" font-family="'Trebuchet MS', sans-serif"
          fill="#655" text-anchor="middle" dominant-baseline="central">
      20%
    </text>
    
  </g>
</svg>

Answer 2

那么你可以通过插入阴影轻松实现：

<svg width="180" height="180">
<defs>
<filter id="inset-shadow">
  <feFlood flood-color="black"/>
  <feComposite operator="out" in2="SourceGraphic"/>
  <feGaussianBlur stdDeviation="2"/>
  <feComposite operator="atop" in2="SourceGraphic"/>

</filter>
</defs>

  <circle filter="url(#inset-shadow)" cx="90" cy="90" r="72" fill="none" stroke="#ddd" stroke-width="18"></circle>
  <path class="main-arc" d="M 90 18 A 72 72 0 1 1 85.47908259388944 18.142075553164446" fill="transparent" stroke-width="18" stroke="black" stroke-linecap="round" style="stroke-dasharray: 452.389; stroke-dashoffset: 366.435;">
  </path>
</svg>

但如果你真的想要一个3D效果，那么你需要一个灯光效果：

<svg width="180" height="180" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="inset-shadow">
  <feFlood flood-color="black"/>
  <feComposite operator="xor" in2="SourceGraphic"/>
  <feGaussianBlur stdDeviation="1"/>
  <feComposite operator="in" in2="SourceGraphic" result="map"/>
  <feDiffuseLighting lighting-color="white" surfaceScale="2" diffuseConstant="1">
  <feSpotLight x="-30" y="-30" z="230"/>
</feDiffuseLighting>
  <feBlend mode="multiply" in="SourceGraphic" />
  <feComposite operator="in" in2="SourceGraphic"/>

</filter>
</defs>

  <circle filter="url(#inset-shadow)" cx="90" cy="90" r="72" fill="none" stroke="#ddd" stroke-width="18"></circle>
  <path class="main-arc" d="M 90 18 A 72 72 0 1 1 85.47908259388944 18.142075553164446" fill="transparent" stroke-width="18" stroke="black" stroke-linecap="round" style="stroke-dasharray: 452.389; stroke-dashoffset: 366.435;">
  </path>
</svg>