如何在svg圈子中創建插入陰影？

Question

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

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

我很好的形狀本身，而是我跟在後面圓的插圖陰影中掙扎。

我試過了一個徑向漸變，它'可以'，但它看起來不太好，我必須擺弄千分之一的百分之一秒的停止值才能使它完全正確，它只是感覺完全哈克。

有沒有更好的方法？

代碼以產生所述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>