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

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

Answer 2

您应该从源SVG文件中的路径元素中删除填充属性当path元素具有fill属性时，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方法删除填充属性。

Snap.load（）一个svg img，并为它的子节点的填充颜色设置动画

2 个答案: