Snap.svgアニメーションアークの内側の影

Question

私はsvgsとSnap.svgライブラリで作業を始めました。チュートリアルの後、私は弧の進捗インジケータを作成しました。私が今したいのは、アニメーションアークに内側の影を追加することです。私は文書を読んだが、filter.shadowコマンドは外側の影のオプションしか与えない。私は定期的なsvgsにフィルタを追加するいくつかの研究を行い、私は私のスナップオブジェクトにバインドしているsvgに1つを追加しました。それは私に内面の影を与えますが、弧のアニメーションを破壊します。内側の影が存在しても弧の約半分しか現れない。私はそれを修正しようとしているフィルタ設定のいくつかを変更しましたが、何も動作しません。私はフィルタが静的なSVGのためだけに働くと思っています。

ご協力いただければ幸いです。 Thanx

更新 ここに私が使用しているコードがあります。

<svg class="gauge" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
x="0px" y="0px" viewBox="0 0 400 200" xml:space="preserve"> 
    <path fill="none" stroke="#D1D2D1" stroke-miterlimit="10" d="M199.7,12.7V18h0.4v-5.3H199.7z M382,200c0-50-20.3-95.4-53.1-128.4 
    l8.4-8.4l-0.4-0.4l-8.4,8.4C295.6,38.4,250.1,18,200,18S104.5,38.3,71.5,71.2l-8.3-8.3l-0.4,0.4l8.3,8.3C38.3,104.5,18,149.9,18,200 
    h44c0-38,15.4-72.4,40.3-97.4l7.5,7.5l0.4-0.4l-7.5-7.5c24.9-24.8,59.2-40.2,97.1-40.3v10.5h0.5V62c38.1,0.1,72.6,15.6,97.5,40.7 
    c-0.1-0.1-0.2-0.2-0.3-0.4l-7.4,7.4l0.4,0.4l7.4-7.4c24.8,25,40.2,59.4,40.2,97.3H382z M102.3,102.6l0.3-0.3L102.3,102.6z"/> 
</svg> 



<script type="text/javascript"> 
var canvasSize = 400, 
    centre = canvasSize/2, 
    radius = canvasSize*0.8/2, 
    s = Snap('.gauge'), 
    path = "", 
    startY = centre-radius, 
    arc = s.path(path); 

function fill(percent) { 
    var endpoint = percent*180; 
    Snap.animate(0, endpoint, function (val) { 
     arc.remove(); 
     var d = val, 
      dr = d-180; 
      radians = Math.PI*(dr)/180, 
      endx = centre + radius*Math.cos(radians), 
      endy = centre + radius * Math.sin(radians), 
      largeArc = d>180 ? 1 : 0; 
      path = "M"+startY+","+centre+" A"+radius+","+radius+" 0 "+largeArc+",1 "+endx+","+endy; 
      arc = s.path(path); 
      arc.attr({ 
      stroke: '#fff', 
      fill: 'none', 
      strokeWidth: 44, 
      }); 
    }, 1500, mina.backout); 


} 

fill(50/100); 
</script> 

アウターシャドーを取得するためにこのコードを属性に追加しました。

arc.attr({ 
    filter : s.filter(Snap.filter.shadow(1, 1, 2, 'black', 0.5)) 
}) 

私は、内側の影に似たものがあるのだろうかと思っていました。

これを埋め込みsvgに追加してから、アニメートされたアークに属性を追加して、通常の静的なSVGのように動作すると考えました。それは私に内面の影を与えますが、アニメーションアークの一部だけが表示されます。長方形内に表示されます。

<defs> 
    <filter id="inner-shadow"> 
     <feGaussianBlur result="offset-blur" stdDeviation="5"></feGaussianBlur> 
     <feOffset dx="1" dy="1"></feOffset> 
     <feFlood flood-color="black" flood-opacity="1" result="color"></feFlood> 
     <feComposite operator="in" in2="offset-blur"></feComposite> 
     <feComponentTransfer> 
     <feFuncA slope="0.5"></feFuncA> 
     </feComponentTransfer> 
     <feMerge> 
     <feMergeNode></feMergeNode> 
     <feMergeNode in="SourceGraphic"></feMergeNode> 
     </feMerge> 
    </filter> 
    </defs> 

     arc.attr({ 
      stroke: '#fff', 
      fill: 'none', 
      strokeWidth: 44, 
      filter: 'url(#inner-shadow)', 
     }); 

Answer 1

フィルタの適用範囲を調整して、カットオフしないように調整することができます。スナップコードは私にエラーを出すように見えたので、スナップではなく、SVG関連の問題のように、svgフィルターマークアップを使って試しました。

だから、変更するキービットは次のようになります。..

<filter id="inner-shadow" y="-30" x="-30" height="400" width="500"> 

これは、より広い範囲をオフセットできます。あなたは質問には、[MCVE]を追加してくださいfilter docs

jsfiddle