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

Question

我刚开始使用 svgs 和 Snap.svg 库。按照教程，我创建了一个弧形进度指示器。我现在想要的是为动画弧线添加一个内部阴影。我阅读了文档，但 filter.shadow 命令只提供了外部阴影的选项。我做了一些关于向常规 svg 添加过滤器的研究，并且我向绑定到我的 Snap 对象的 svg 添加了一个。它确实给了我内阴影，但是它破坏了弧形动画；即使存在内部阴影，也只出现大约一半的圆弧。我更改了一些过滤器设置试图修复它但没有任何效果。我认为过滤器仅适用于静态 svgs。

如有任何帮助，我们将不胜感激。谢谢

更新这是我正在使用的代码。

<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

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

Snap.svg inner shadow on animated arc

svg

shadow

svg-animate

svg-filters

snap.svg