Question

我刚刚开始使用svgs和Snap.svg库。在教程之后我创建了一个弧形进度指示器。我现在想要的是为动画弧添加内部阴影。我阅读了文档，但filter.shadow命令只提供了外部阴影的选项。我做了一些关于向常规svgs添加过滤器的研究，我在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

动画弧

1 个答案: