svgの円ストロークに挿入シャドウを作成するにはどうすればよいですか？

Question

SVGで次のウィジェットを作成するにはどうすればよいですか？

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

は、私は、それ自体の形状の罰金が、私は戻って、円上のはめ込み影で苦労しています。

私は放射状のグラデーションを試しましたが、それは「うまくいく」とは思えませんが、それはすばらしく見えません。ちょうどいい感じを得るには、1000分の1完全にハッキー。

良い方法がありますか？

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