Snap.load（）svg img併爲其子節點的填充顏色設置動畫效果

Question

我使用Snap.svg來爲懸停上的SVG圖像製作動畫。在這種情況下，我試圖使圖像變大一點（1.1x），然後更改填充顏色。懸停時，圖像可以正確縮放，但填充顏色不變。我懷疑這是因爲圖像由填充顏色所在的三個子元素組成，但我無法弄清楚如何訪問它們。

這裏的HTML：

<svg id="mySvg" width="200" height="200" 
viewBox="0 0 2000 2000" preserveAspectRatio="none"></svg> 

而這裏的JavaScript的：

var s = Snap("#mySvg"); 
      var g = s.group(); 
      var tux = Snap.load("3d_glasses.svg", function (loadedFragment) { 
       g.append(loadedFragment); 
       g.hover(hoverover, hoverout); 
      }); 

      var hoverover = function() { 
       g.animate({ 
        transform: 'scale(1.1)', 
        fill: '#FF0000' 
       }, 1000, mina.bounce); 

      }; 
      var hoverout = function() { 
       g.animate({ 
        transform: 'scale(1)', 
        fill: '#252525' 
       }, 1000, mina.bounce); 
      }; 

我的SVG圖像文件（3d_glasses.svg）看起來是這樣的：

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1024px" height="1024px" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="nonzero" clip-rule="evenodd" viewBox="0 0 10240 10240" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <title>3D_glasses icon</title> 
    <path id="curve2" fill="#252525" d="M6669 6080c-89,-175 -174,-356 -261,-531 -39,-78 -85,-152 -137,-222 -131,-175 -191,-356 -191,-575l0 -592 2560 0 0 1920 -1971 0z"/> 
    <path id="curve1" fill="#252525" d="M3571 6080c89,-175 174,-356 261,-531 39,-78 85,-152 137,-222 131,-175 191,-356 191,-575l0 -592 -2560 0 0 1920 1971 0z"/> 
    <path id="curve0" fill="#252525" d="M960 3200l8320 0c176,0 320,144 320,320l0 3200c0,176 -144,320 -320,320l-2804 0c-249,0 -462,-132 -573,-354l-354 -707c-83,-167 -243,-266 -429,-266 -186,0 -346,99 -429,266l-354 707c-111,222 -324,354 -573,354l-2804 0c-176,0 -320,-144 -320,-320l0 -3200c0,-176 144,-320 320,-320zm5162 2492c120,240 249,708 547,708l1971 0c176,0 320,-144 320,-320l0 -1920c0,-176 -144,-320 -320,-320l-2560 0c-176,0 -320,144 -320,320l0 592c0,288 83,536 255,767 41,54 76,113 107,173zm-2551 708c123,0 229,-65 285,-175 90,-177 174,-356 262,-533 31,-60 67,-119 107,-173 172,-231 255,-479 255,-767l0 -592c0,-176 -144,-320 -320,-320l-2560 0c-176,0 -320,144 -320,320l0 1920c0,176 144,320 320,320l1971 0z"/> 
</svg> 

Answer 1

您應該刪除在源SVG文件中填充路徑元素的屬性。
當路徑元素具有填充屬性時，g元素的填充值包含這些路徑將被忽略用於渲染。

<?xml version="1.0" encoding="UTF-8"?> 
<svg xmlns="http://www.w3.org/2000/svg" width="1024px" height="1024px" fill-rule="nonzero" viewBox="0 0 10240 10240" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <title>3D_glasses icon</title> 
    <path id="curve2" d="M6669 6080c-89,..."/> 
    <path id="curve1" d="M3571 6080c89,-175 174..."/> 
    <path id="curve0" d="M960 3200..."/> 
</svg> 

如果您不能編輯SVG文件，您可以通過調用SVGDOM的removeAttribute方法來刪除填充屬性。

Answer 2

defghi正確的是元素的填充值導致問題。

雖然我打算給出一個替代答案，但我認爲它根據個人喜好可以更好地用於其他代碼和解決方案。

而不是刪除填充，我可能會使用css過渡，這樣原始填充保持不變。因此，它的工作有點像......

s.select("g").hover(hoverFunc, hoverOut); 

function hoverFunc() { 
    this.selectAll('path').forEach(function(el){ 
     el.attr({ class: 'redfadein' }) }); 
    this.animate({ transform: 's1.1,1.1' }, 1000); 
}; 

function hoverOut() { 
    this.selectAll('path').forEach(function(el){ 
     el.attr({ class: 'redfadeout' }) }); 
    this.animate({ transform: 's1,1' }, 1000); 
}; 

和CSS

redfadein { 
    transition: fill 1s ease; 
    fill:red; 
} 

.redfadeout { 
    transition: fill 1s ease; 
} 

jsfiddle

你也可能只是希望把在空間中的白色背景填充（或小的不透明度）路徑的中間，所以它不會在空白區域懸停。您也可以將比例尺移至CSS以將其保存在一個地方。