애니메이션 아크의 Snap.svg 내부 그림자

Question

방금 ​​svgs 및 Snap.svg 라이브러리 작업을 시작했습니다. 튜토리얼을 따라 아크 진행 표시기를 만들었습니다. 이제 애니메이션 원에 내부 그림자를 추가하고 싶습니다. 설명서를 읽었지만 filter.shadow 명령은 바깥 쪽 그림자 옵션 만 제공합니다. 일반 svgs 필터를 추가하는 몇 가지 연구를 수행하고 내 Snap 개체에 바인딩 할 svg 하나를 추가했습니다. 그것은 내면의 그림자를 주지만, 아크 애니메이션은 파멸됩니다. 내부 그림자가 존재하더라도 원호의 약 절반 만 나타납니다. 일부 필터 설정을 수정하려고했지만 아무것도 수정하지 않았습니다. 그 필터는 정적 인 SVG에서만 작동한다고 생각합니다.

도움을 주시면 감사하겠습니다. 고맙습니다

업데이트 여기에 제가 사용하고있는 코드가 있습니다.

<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