我可以將 CSS :hover 樣式套用到 SVG `` 元素嗎？

您可以將 :hover 樣式套用至 SVG USE 元素嗎？

對嵌入在 中的 SVG 元素進行樣式設定使用 CSS :hover 偽類的部分可能具有挑戰性。儘管它們存在於 DOM 中，但由於 SVG 的構造方式，這些元素無法直接定位。

理解問題：

SVG 規範指定複製 中引用的元素的數量DOM 樹中的部分不包含任何 CSS 屬性或級聯值。這意味著 CSS2 中的選擇器無法套用於引用元素中的克隆元素，從而無法使用 :hover 樣式直接定位這些元素。

Firefox 中的部分支援：

雖然大多數瀏覽器不支援在中直接定位虛擬元素。參考，Firefox 提供部分支援。它允許透過將 currentColor 指派給引用的元素，然後變更 的顏色屬性來修改填滿或描邊顏色。

有限的瀏覽器支援：

但是，此方法的相容性有限，僅應在專門針對 Firefox 時使用。為了實現跨瀏覽器相容性，必須採用其他方法。

替代解決方案：

解決此問題的一種方法是使用 JavaScript 在執行時間操作 SVG DOM並將懸停樣式動態套用於虛擬元素。雖然這種方法提供了更大的靈活性，但它需要額外的腳本，並且可能不適合所有場景。

另一個解決方案涉及利用 元素與蒙版相結合。透過在中定義剪輯路徑部分並將其連結到套用於 的遮罩。元素，無需直接針對虛擬元素即可實現偽懸停效果。此方法提供了更好的瀏覽器支持，並且更符合 SVG 原則。

結論：

使用 將 :hover 偽類應用於嵌入的 SVG 元素由於 SVG 規範的限制，標籤並不簡單。 Firefox 中存在部分支持，但為了跨瀏覽器相容性，可以使用 JavaScript 操作或 等替代方法。應考慮屏蔽。

以上是我可以將 CSS :hover 樣式套用到 SVG `` 元素嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！