动画圆弧上的Snap.svg内部阴影

我刚刚开始使用svg和Snap.svg库。在一个教程之后，我创建了一个圆弧进度指示器。我现在想要的是为动画圆弧添加一个内部阴影。我阅读了文档，但是

filter.shadow

命令只提供了外部阴影的选项。我做了一些关于向常规svg添加过滤器的研究，并向绑定到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)',
        });

arc.attr({
笔划：“#fff”，
填写：'无'，
冲程宽度：44，
过滤器：“url（#内部阴影）”，
});

您可以调整其应用的过滤器区域，使其不会被切断。Snap代码似乎给了我一个错误，所以我只是尝试使用svg过滤器标记，因为问题似乎与svg相关，而不是Snap

因此，要改变的关键是

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

这使得偏移范围更宽。你可以在

---

请在问题中添加一个。我们需要查看您的代码以便进行测试。Thanx很多，您完全正确。我尝试添加类似的属性，但仍然出现错误。我可能没有正确的答案。再一次，thanx，我正在调查你提到的错误。你说得对，我只是在Firefox上测试，没有发现任何错误。然而，我刚刚在Chrome上试过，我看到了错误：

error:attributewidth:Expected length，“undefined”

有什么想法可以导致它吗？？我遵循的是说明要传递哪些参数的文档。这是我正在使用的代码：“filter:s.filter（Snap.filter.shadow（0,2,3））”不管怎样，我发现了问题。我使用的是旧版本的Snap.svg源代码。我刚刚下载了0.4.1，这一版本消除了错误。再一次，thanx。如果您想以像素为单位调整过滤区域的大小，则必须在过滤元素中添加“filterUnits='userSpaceOnUse'”——否则Firefox会认为您需要30000%的宽度。