个人中心
gpt4 book ai didi

javascript - 使用 Jquery 通过附加 来更改 SVG 颜色，为什么它不起作用？

转载 作者：行者123 更新时间：2023-12-03 02:17:42 25 4
gpt4 key购买 nike

在我的网站中，我有 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/

25 4 0
文章推荐： javascript - ant-design select 样式不正确
文章推荐： python - 使用Python播放声音
文章推荐： elasticsearch - 如何在 Elasticsearch 中部分匹配多个单词的通配符查询？
文章推荐： javascript - 如何在odoo中从JS调用python函数？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com