Snap.svg внутренняя тень на анимированной дуге

Question

Я только начинаю работать с svgs и библиотекой Snap.svg. После учебника я создал индикатор прогресса дуги. Теперь я хочу добавить внутреннюю тень к анимированной дуге. Я прочитал документацию, но команда filter.shadow дает только внешнюю тень. Я провел некоторое исследование по добавлению фильтров в обычные svgs, и я добавил его в svg, который я привязываю к моему объекту Snap. Это дает мне внутреннюю тень, однако она разрушает анимацию дуги; появляется только около половины дуги, хотя присутствует внутренняя тень. Я изменил некоторые настройки фильтра, пытаясь исправить это, но ничего не работает. Я думаю, что фильтр работает только для статических 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

Вы можете отрегулировать область фильтра, на которую она наложена, чтобы она не обрезалась. Код Snap, казалось, дал мне ошибку, поэтому я просто попробовал его с помощью разметки svg-фильтра, поскольку проблема, похоже, связана с SVG, а не с Snap.

Поэтому ключ немного изменить будет ..

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

Это дает смещение более широкий диапазон. Вы можете узнать больше о том, что в filter docs

jsfiddle