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

Question

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

http://i.imgur.com/zowzFQz.png

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

我已经尝试了一个径向渐变,它"有效",但它看起来并不那么好,我必须按千分之一百分数的顺序摆弄它才能完全正确,它只是感觉完全是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

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

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