為什麼 jQuery 不能可靠地在 SVG 元素中加入類別？

jQuery SVG：類別修改的限制

嘗試使用 jQuery 操作 SVG 元素上的類別時，您可能會遇到困難。讓我們探討一下這個問題。

在您提供的程式碼中，您嘗試使用 .addClass() 將「按一下」類別新增至 SVG 矩形。但是，由於 jQuery 的潛在限制，此方法可能無法正常運作。

3 之前的 JQuery 版本在與 SVG 元素互動時有已知問題。具體來說，他們無法可靠地從 SVG 元素中新增或刪除類別。這是因為 jQuery 主要操作底層 HTML DOM，而 SVG 元素具有不同的內部表示。

解決方法：

要克服此限制，您可以採用以下方法解決方法：

• 升級到jQuery 33 ： 版本jQuery 的第3 章解決了SVG 類別操作的問題。如果可能，請更新至此版本以解決問題。
• 使用 Vanilla JavaScript： 在現代瀏覽器中，您可以直接存取元素的 classList 屬性並對其進行修改。例如：

const element = document.getElementById("p5");
element.classList.add("clicked");

• 使用 jQuery 的 .attr(): 可以使用 .attr() 來操作類別屬性。但是，請記住，這會更改整個類別列表，而不僅僅是新增或刪除單一類別。

$("#p5").attr("class", "jimmy clicked");

透過實作這些解決方法，您應該能夠有效地從 SVG 元素中新增和刪除類別中使用 jQuery 或普通 JavaScript。

以上是為什麼 jQuery 不能可靠地在 SVG 元素中加入類別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！