動畫弧上的Snap.svg內部陰影

我剛開始使用svgs和Snap.svg庫。在教程之後，我創建了一個弧進度指示器。我現在想要的是給動畫弧添加一個內部陰影。我閱讀文檔，但filter.shadow命令只給出了外部陰影的選項。我做了一些關於將濾鏡添加到常規svgs的研究，並且我向svg添加了一個綁定到Snap對象的濾鏡。它確實給了我內在的影子，但是它毀掉了弧形動畫;即使存在內部陰影，也只有大約一半的弧出現。我改變了一些嘗試修復它的過濾器設置，但沒有任何作用。我在想，過濾器只適用於靜態SVG。動畫弧上的Snap.svg內部陰影

任何幫助，將不勝感激。 Thanx

UPDATE 這是我正在使用的代碼。

<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)', 
     });

來源

2016-10-23 chavab_1

閱讀更多的是請加[MCVE]的問題。 –

我們需要查看您的代碼，以便我們可以進行測試。 – Ian

您可以調整其應用的過濾區域，使其不會被切斷。 Snap代碼似乎給我一個錯誤，所以我只是使用svg過濾器標記來嘗試它，因爲問題似乎與SVG相關，而不是Snap。

所以關鍵位改變會..

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

這給出了一個偏移範圍更廣。您可以在filter docs

jsfiddle

來源

2016-10-24 09:08:46 Ian

感謝很多，你是絕對正確的。我嘗試添加類似的屬性，但我仍然收到錯誤。我可能沒有正確的。再次，thanx。 –

我正在調查您提到的錯誤。你說得對，我只是在Firefox上進行測試，並沒有看到任何錯誤。然而，我只是試圖在Chrome上，我看到了錯誤：'錯誤：屬性寬度：期望的長度，「undefined」任何想法可能會導致它？我遵循文檔 –

我遵循指出要傳遞什麼參數的文檔。這是我使用的代碼： 'filter：s.filter（Snap.filter.shadow（0，2，3））' –

動畫弧上的Snap.svg內部陰影

回答

相關問題