Javascript load（）一个svg img并对其填充颜色设置动画'；s子节点

我使用Snap.svg在悬停时为svg图像设置动画。在本例中，我尝试将图像放大一点（1.1x），然后更改填充颜色。悬停时，图像将正确缩放，但填充颜色不变。我怀疑这是因为图像由三个子元素组成，这是填充颜色所在的位置，但我不知道如何访问它们

以下是html：

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

我的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>

3D_眼镜图标

您应该从源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>

3D_眼镜图标

---

如果无法编辑SVG文件，可以通过调用SVGDOM的removeAttribute方法删除填充属性。

您应该从源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>

3D_眼镜图标

---

如果无法编辑SVG文件，可以通过调用SVGDOM的removeAttribute方法删除填充属性。

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;
 }

---

你可能只想在路径的中间放置一个白色填充的背景（或者小的不透明度），这样它不会在白色空间中停留。您还可以将比例移动到css，以便将所有比例保持在一个位置。

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;
 }

---

你可能只想在路径的中间放置一个白色填充的背景（或者小的不透明度），这样它不会在白色空间中停留。您还可以将比例移动到css，以将其保持在一个位置。

虽然我认为这是问题的正确根源，但我想知道仅仅应用css是否是一个更简单的想法，因为我认为它应该覆盖svg填充。这样就不需要更改填充。是的，如果您直接（通过使用css或js）更改路径元素的填充属性，则不需要更改填充。但是在本例中，Brent Barbata在g元素上使用Snap.svg的animate方法，因此g元素是动画的。非常感谢您的帮助。虽然我认为这是问题的正确来源，但我想仅仅应用css是否是一个更简单的想法，因为我认为它应该覆盖svg填充。这样就不需要更改填充。是的，如果您直接（通过使用css或js）更改路径元素的填充属性，则不需要更改填充。但在本例中，Brent Barbata在g元素上使用Snap.svg的动画方法，因此g元素是动画的。非常感谢您的帮助。非常感谢您的时间。遗憾的是，我不能同时接受这两个答案，但我决定使用@defghi1977解决方案，因为尽管css转换有效，snap.svg提供了css转换无法提供的动画。再次感谢，这是我第一次使用svg图像，我从你的帖子中学到了很多。非常感谢你抽出时间。遗憾的是，我不能同时接受这两个答案，但我决定使用@defghi1977解决方案，因为尽管css转换有效，snap.svg提供了css转换无法提供的动画。再次感谢您，这是我第一次使用svg图像，我从您的帖子中学到了很多。