我的创作纪念日

最新推荐文章于 2024-09-26 11:44:38 发布

星辰北海

最新推荐文章于 2024-09-26 11:44:38 发布

阅读量79

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_44797881/article/details/133977832

版权

如何动态更改iconfont多色图标的颜色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态更改多色图标的颜色</title>
    <script src="./js/jquery-1.11.3.min.js"></script>
    <style>
        /* common.css */
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
            font-size: 48px;
            /* color: pink; */
        }
        .deng {
            width: 500px;
            height: 200px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="deng">
        <hr>
        <svg t="1697976680934" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="2181" width="200" height="200" >
            <path d="M760.64 942.672H263.352L14.72 511.992l248.624-430.664h497.304L1009.28 512l-248.64 430.68z"
                fill="blue" p-id="2182"></path>
            <path
                d="M722.912 508.48l-36.768-72.232a37.376 37.376 0 0 0-33.352-20.536H572.568a0.944 0.944 0 0 1-0.64-0.272 0.96 0.96 0 0 1-0.304-0.672V323.44a27.12 27.12 0 0 0-27.112-27.104h-43.344a27.12 27.12 0 0 0-27.16 27.104v91.32a0.96 0.96 0 0 1-0.96 0.96h-56.232c-14.208 0-51.016 7.936-57.384 20.52l-36.752 72.24a27.712 27.712 0 0 0 1.072 27.256 27.552 27.552 0 0 0 22.824 13.28c-2.304 48.64-18.456 99.168-43.456 134.632a27.936 27.936 0 0 0-1.968 28.96 27.792 27.792 0 0 0 24.816 15.04h337.68a37.64 37.64 0 0 0 36.24-27.64c7.456-27.216 13.68-51.96 14.168-79.4a163.496 163.496 0 0 0-14.456-71.584 27.912 27.912 0 0 0 22.68-13.928 27.904 27.904 0 0 0 0.64-26.616z m-53.896 183.12a5.624 5.624 0 0 1-5.36 4.056H579.064c21.76-26.472 24.936-62.168 22.136-83.104a15.944 15.944 0 0 0-17.92-13.72 16.024 16.024 0 0 0-13.808 17.896c0.32 2.544 7.256 62.424-44.512 77.176-1.4 0.4-2.664 1.04-3.856 1.76h-46.048c21.76-26.48 24.96-62.168 22.16-83.112a15.936 15.936 0 0 0-17.968-13.744 16 16 0 0 0-13.752 17.976c0.336 2.536 7.672 62.24-44.536 77.128a15.84 15.84 0 0 0-3.848 1.744H333.632c25.784-39.568 42.448-93.16 44.904-145.112l0.032-0.64H664.88l5.56 12.304a132.592 132.592 0 0 1 11.624 57.84c-0.424 23.696-5.912 45.488-13.048 71.552z m13.72-173.704H376.296l-22.16-0.656 31.624-62.176c7.152-3.504 23.864-7.344 31.144-7.344h56.144a33 33 0 0 0 32.96-32.96V328.352h33.616v86.92l0.016 0.496a33.16 33.16 0 0 0 10.144 22.784 32.776 32.776 0 0 0 22.784 9.168h80.224c2 0 3.872 1.16 4.832 3.056l33.936 66.656-8.824 0.48z"
                fill="red" p-id="2183" ></path>
        </svg>
    </div>
    <script>
        $(function() {
        //    初始化
        })
        //  获取到path dom 更改path dom节点里面的fill的属性  第一个path操作外图标颜色  第二个path操作里面图标的颜色
        // 对icon设置color颜色 且当fill属性不存在或者设置为fill="#" 时  color颜色作用到整体
        $(".deng").on("click",function() {
            console.log($(".icon path").eq(0),"kllk")
            console.log($(".icon path").eq(0).attr("fill","green"))
        })
    </script>
</body>

</html>