Liệu attr() trong chữ thường của jQuery?

Question

Tôi đang cố gắng để thao tác svg thuộc tính 'viewBox' mà trông giống như sau:

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

Sử dụng

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

Tuy nhiên, điều này tạo ra một thuộc tính mới trong các yếu tố được gọi là "viewbox". Lưu ý chữ thường thay vì camelCase dự định. Có một chức năng khác mà tôi nên sử dụng không?

Answer 1

tôi đã có thể sử dụng javascript tinh khiết để có được các yếu tố và đặt thuộc tính bằng cách sử dụng

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

và

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

Answer 2

bạn muốn chắc chắn rằng bạn loại bỏ các attr nếu nó đã tồn tại trước khi thao tác nó

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

và sau đó tái tạo lại nó

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

Answer 3

Bạn có thể sử dụng móc 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); 
    }, 
    }; 
}); 

Bây giờ jQuery sẽ sẽ sử dụng setter của bạn/thu khí để thao tác những thuộc tính.

Lưu ý rằng el.attr('viewBox', null) sẽ không thành công; hook setter của bạn sẽ không được gọi. Thay vào đó bạn nên sử dụng el.removeAttr ('viewBox').

Answer 4

Mỗi http://www.w3.org/TR/xhtml1/#h-4.2 "Tài liệu XHTML phải sử dụng chữ thường cho tất cả các tên thuộc tính và phần tử HTML".

Vì vậy, để tránh việc các thuộc tính chuyển đổi thành chữ thường trong một tài liệu XHTML bạn cần để tạo ra các yếu tố xác định một namespace sử dụng document.createElementNS(), như:

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

Nếu bạn có kế hoạch để thêm một yếu tố <use/> bạn cũng cần phải xác định không gian tên trong khi tạo ra nguyên tố này cũng như các thuộc tính xlink:href, như:

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