在我的网站中，我有 svg 图标，当它们悬停在其上方时，我想为其添加渐变颜色变化动画。看来附加元素不起作用。什么会？
这是我尝试使用的示例代码:
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("svg").mouseenter(function(){
$('path>.outline').append('<animate id="an" attributeName="fill" attributeType="CSS" from="rgb(222,222,186)" to="skyblue" begin="0s" dur="2s" repeatcount = "1" />');
});
});
</script>
</head>
<body>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
style="isolation:isolate" viewBox="-700 343.7 150 146.3" width="150" height="146.3">
<title>go to my github page</title><path class = "outline" d=" M -625.006 343.7 C -666.419 343.7 -700 377.281 -700 418.706 C -700 451.838 -678.512 479.95 -648.706 489.869 C -644.956 490.556 -643.587 488.244 -643.587 486.256 C -643.587 484.475 -643.65 479.756 -643.687 473.5 C -664.55 478.031 -668.95 463.444 -668.95 463.444 C -672.362 454.781 -677.275 452.475 -677.275 452.475 C -684.087 447.819 -676.762 447.919 -676.762 447.919 C -669.237 448.45 -665.275 455.65 -665.275 455.65 C -658.587 467.113 -647.719 463.8 -643.45 461.881 C -642.769 457.038 -640.831 453.731 -638.687 451.856 C -655.344 449.963 -672.85 443.531 -672.85 414.788 C -672.85 406.6 -669.925 399.906 -665.131 394.663 C -665.9 392.763 -668.475 385.138 -664.394 374.813 C -664.394 374.813 -658.094 372.794 -643.769 382.5 C -637.649 380.835 -631.336 379.986 -624.994 379.975 C -618.625 380.006 -612.206 380.838 -606.219 382.5 C -591.9 372.794 -585.612 374.813 -585.612 374.813 C -581.519 385.138 -584.094 392.763 -584.869 394.663 C -580.062 399.906 -577.162 406.6 -577.162 414.788 C -577.162 443.6 -594.7 449.938 -611.406 451.794 C -608.712 454.106 -606.312 458.688 -606.312 465.681 C -606.312 475.706 -606.406 483.794 -606.406 486.256 C -606.406 488.263 -605.056 490.594 -601.25 489.863 C -571.469 479.919 -550 451.831 -550 418.706 C -550 377.281 -583.581 343.7 -625.006 343.7 Z "
fill-rule="evenodd" fill="rgb(222,222,186)"></path>
</svg>
</body>
</html>
最佳答案
你不能用 jquery 附加 svg 元素:
$(document).ready(function(){
$("svg").mouseenter(function(){
var animate = document.createElementNS("http://www.w3.org/2000/svg", 'animate');
animate.setAttribute("id","an");
animate.setAttribute("attributeName","fill");
animate.setAttribute("attributeType","CSS");
animate.setAttribute("from","rgb(222,222,186");
animate.setAttribute("to","skyblue");
animate.setAttribute("begin","0s");
animate.setAttribute("dur","2s");
animate.setAttribute("repeatcount","1");
/* $('path>.outline').append('<animate id="an" attributeName="fill" attributeType="CSS" from="rgb(222,222,186)" to="skyblue" begin="0s" dur="2s" repeatcount = "1" />');*/
var outline = document.getElementsByClassName("outline")[0];
outline.appendChild(animate);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
style="isolation:isolate" viewBox="-700 343.7 150 146.3" width="150" height="146.3">
<title>go to my github page</title><path class = "outline" d=" M -625.006 343.7 C -666.419 343.7 -700 377.281 -700 418.706 C -700 451.838 -678.512 479.95 -648.706 489.869 C -644.956 490.556 -643.587 488.244 -643.587 486.256 C -643.587 484.475 -643.65 479.756 -643.687 473.5 C -664.55 478.031 -668.95 463.444 -668.95 463.444 C -672.362 454.781 -677.275 452.475 -677.275 452.475 C -684.087 447.819 -676.762 447.919 -676.762 447.919 C -669.237 448.45 -665.275 455.65 -665.275 455.65 C -658.587 467.113 -647.719 463.8 -643.45 461.881 C -642.769 457.038 -640.831 453.731 -638.687 451.856 C -655.344 449.963 -672.85 443.531 -672.85 414.788 C -672.85 406.6 -669.925 399.906 -665.131 394.663 C -665.9 392.763 -668.475 385.138 -664.394 374.813 C -664.394 374.813 -658.094 372.794 -643.769 382.5 C -637.649 380.835 -631.336 379.986 -624.994 379.975 C -618.625 380.006 -612.206 380.838 -606.219 382.5 C -591.9 372.794 -585.612 374.813 -585.612 374.813 C -581.519 385.138 -584.094 392.763 -584.869 394.663 C -580.062 399.906 -577.162 406.6 -577.162 414.788 C -577.162 443.6 -594.7 449.938 -611.406 451.794 C -608.712 454.106 -606.312 458.688 -606.312 465.681 C -606.312 475.706 -606.406 483.794 -606.406 486.256 C -606.406 488.263 -605.056 490.594 -601.25 489.863 C -571.469 479.919 -550 451.831 -550 418.706 C -550 377.281 -583.581 343.7 -625.006 343.7 Z "
fill-rule="evenodd" fill="rgb(222,222,186)"></path>
</svg>关于javascript - 使用 Jquery 通过附加 <animate> 来更改 SVG 颜色，为什么它不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49296625/