我想在點擊這個按鈕時，將一個類切換到按鈕標簽內的svg。

下面是我的按鈕的html代碼:

<button class="control-btn" id="control-btn-edit">
                    <svg id="edit-svg" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 528.899 528.899" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M328.883,89.125l107.59,107.589l-272.34,272.34L56.604,361.465L328.883,89.125z M518.113,63.177l-47.981-47.981 c-18.543-18.543-48.653-18.543-67.259,0l-45.961,45.961l107.59,107.59l53.611-53.611 C532.495,100.753,532.495,77.559,518.113,63.177z M0.3,512.69c-1.958,8.812,5.998,16.708,14.811,14.565l119.891-29.069 L27.473,390.597L0.3,512.69z"></path> </g> </g></svg>
                </button>

下面是我想添加到svg中的類的css代碼:

.pressed {
  fill: #19ba00;
}

最后，這里是我想要添加的函數的javascript代碼(該函數包含引用不同元素的代碼):

const tableCell = document.querySelector(".divTableCell");
const cellInput = document.querySelector(".cellInput");
const table = document.querySelector(".divTable");
const display = document.querySelector(".display");
const navButton = document.querySelector(".nav-button");
const addButton = document.querySelector("#control-btn-add");
const genButton = document.querySelector("#control-btn-generate");
const editButton = document.querySelector("#control-btn-edit");
const editButtonSvg = document.querySelector("#edit-svg");

editButton.addEventListener("click", () => {
    let allCellInputs = document.querySelectorAll(".cellInput");
    for (let i = 0; i < allCellInputs.length; i++) {
        allCellInputs[i].toggleAttribute("disabled");
    }
    editButtonSvg.classList.toggle("pressed");
});

正如你所看到的，我已經嘗試使用classList.toggle()方法，但它不起作用。當我手動將該類添加到html svg元素時，它也無法工作。

我已經嘗試將類更改為id，并使用toggleAttribute()方法，但效果并不好。

我發現當我使用setAttribute()方法時，它工作得很好，但是我沒有得到我想要的切換效果。

事實上，我檢查了你的代碼，它的唯一區別是 我給圖標增加了寬度

#edit-svg {
        width: 24px;
    }