svg更改颜色等样式

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