隱藏SVG對象 - jQuery的

Question

<object id="edge-up" height="26px" width="208px" data="svg/edge-up.svg" type="image/svg+xml"></object> 

---

$("#edge-up").hide('slow'); 

是否有可能隱藏SVG對象與.hide（ '慢'）？它工作正常，沒有'慢'選項。任何想法 ？

Answer 1

jQuery可以與SVG元素一起使用，但應該理解HTML元素的DOM接口與SVG的不同。這就是爲什麼jQuery不能使用fadeOut爲SVG元素製作動畫的原因，或者甚至像你正在嘗試的那樣隱藏它們。

要隱藏，請將SVG元素的display屬性設置爲none。雖然jQuery不是爲了與SVG DOM接口進行交互而設計的，但它仍然可以處理SVG元素所在的DOM元素。

$("#idOfSVGElement").attr("display", "none"); //will hide an element. 
    $("#idOfSVGElement").removeAttr("display"); //will show it again. 

需要修正： jQuery的失敗源於一個事實，即是嘗試使用SVG元素的樣式屬性來隱藏。就實現接口的瀏覽器而言，style ='display：none'不適用於SVG元素。

總結：SVG和HTML元素的DOM接口是不同的

這也是爲什麼一個不能創建使用jQuery SVG元素，通過使用例如：

$("<rect>").attr(...etc ...); 

因爲jQuery將創建一個HTML元素名稱rect，而不是一個SVG元素。區別在於實際實現的接口！很酷嗎？ :)