是否ATTR（）jQuery中力小寫？

Question

我試圖操縱SVG「視框」屬性，它看起來是這樣的：

<svg viewBox="0 0 100 200" width="100" ...> ... </svg> 

使用

$("svg").attr("viewBox","..."); 

然而，這創造了所謂的「視框」的元素的新屬性。注意小寫字母而不是預期的camelCase。我應該使用另一個功能嗎？

Answer 1

我能夠用純JavaScript來獲取元素通過使用

var svg = document.getElementsByTagName("svg")[0]; 

和

設置屬性

svg.setAttribute("viewBox","..."); 

Answer 2

你要確保你刪除ATTR如果操縱它

$("svg").removeAttr("viewBox") 

之前就已經存在，然後重新創建

$("svg").attr("viewBox","..."); 

Answer 3

您可以使用jQuery掛鉤：

['preserveAspectRatio', 'viewBox'].forEach(function(k) { 
    $.attrHooks[k.toLowerCase()] = { 
    set: function(el, value) { 
     el.setAttribute(k, value); 
     return true; 
    }, 
    get: function(el) { 
     return el.getAttribute(k); 
    }, 
    }; 
}); 

現在jQuery將將使用您的setter/getter方法來處理這些屬性。

注意即el.attr('viewBox', null)將失敗;你的hook setter不會被調用。相反，你應該使用el.removeAttr（'viewBox'）。

Answer 4

每http://www.w3.org/TR/xhtml1/#h-4.2「XHTML文檔必須使用小寫對所有HTML元素和屬性名。」

所以爲了避免屬性轉換XHTML文檔中爲小寫，你需要創建元素指定使用document.createElementNS()命名空間，如：

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); 
    svg.setAttribute('viewBox', '0 0 512 512’); 

如果您還打算增加一個<use/>元素你需要指定命名空間在創建元素還有xlink:href屬性，如：

var use = document.createElementNS('http://www.w3.org/2000/svg','use'); 
    use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#your_svg_id');