In my website I have svg icons, to whom I would like to add gradual color change animations, when they are hovered over. It seems that appending the element doesn't works. What would?
Here's and example code that I'm trying to work with:
<!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>
you can'"t append svg elements with jquery :
$(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>