svg更改颜色等样式

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

.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>