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以将其保存在一个地方。