码迷,mamicode.com
首页 > 其他好文 > 详细

svg更改颜色等样式

时间:2021-06-06 18:55:04      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:资源   fill   pat   button   title   box   div   hover   颜色   

.cls-1 {
     fill: #cccccc;
}
.cls-1:hover {
      fill: orange !important;
}
    <svg xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 10.7 11.15">
        <defs>
        </defs>
        <title>资源 8</title>
        <g id="图层_2" data-name="图层 2">
            <g id="图层_1-2" data-name="图层 1">
                <path id="cls-1"  class="cls-1"  
                    d="M9.44,4.37,6.21,1.15A2,2,0,0,0,4.44.59,5.32,5.32,0,1,0,10.65,6a.14.14,0,0,0-.09-.14c-.07-.07-.24,0-.24,0H8.27a.68.68,0,0,0-.28,0,.19.19,0,0,0-.09,0L5.37,8.44a.16.16,0,0,1-.14,0L2.71,5.92a.21.21,0,0,1,0-.19L5.23,3.21c.06,0,.12,0,.14,0L7.71,5.54a1,1,0,0,0,.23.14c.11,0,.27-.09.28-.09L9.44,4.37ZM10.6,2.74a.3.3,0,0,1,.1.23.49.49,0,0,1-.14.24l-.84.84L6.87,1.2C5.67-.08,4.72.43,4.72.45A3.51,3.51,0,0,1,8.88,1Z" />
            </g>
        </g>
    </svg>
 
 
    function test(){
            var elPath=document.getElementById("cls-1");
            // elPath
            console.log(elPath)
            elPath.style.fill="pink"
    }
    
 
<button onclick="test()">12321321</button>
 
 
 
 
 
 

  

svg更改颜色等样式

标签:资源   fill   pat   button   title   box   div   hover   颜色   

原文地址:https://www.cnblogs.com/geekjsp/p/14853808.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!