Tại sao giá trị thuộc tính vỏ bọc của jQuery tự động thấp hơn?

Question

tôi đang làm việc với tập tin SVG lên được trực tiếp đặt vào một tập tin HTML

<svg> 
    Contents... 
</svg> 

Sử dụng javascript/jQuery Tôi muốn thêm một thuộc tính cho SVG

$("svg").attr("viewBox", "0 0 166 361"); 

Đây là SVG sửa đổi sau khi chạy đoạn mã trên

<svg viewbox="0 0 166 361"> 
    Contents... 
</svg> 

để ý rằng nó đặt hộp xem không phải hộp xem. Vì khung nhìn (chữ thường) không làm bất cứ điều gì tôi cần nó là hộp xem (camelcase)

Bất kỳ ý tưởng nào?

** Cập nhật **

Tôi chạy một thử nghiệm nhỏ nơi tôi đã hiển thị thuộc tính viewBox từ phía máy chủ, sau đó tôi chạy tập lệnh ở trên. Bạn có thể thấy rằng 1. Khi kết xuất từ ​​phía máy chủ, nó là tốt. 2. jQuery không nhận ra thuộc tính viewel camelCase và chèn một số khác vào tất cả các chữ thường.

<svg version="1.1" id="Layer_1" x="0pt" y="0pt" width="332" 
    height="722" viewBox=" 0 0 100 100" viewbox="0 0 166 332"> 
... 
</svg> 

Answer 1

Tôi có thể phụ thuộc vào loại tài liệu mã hóa của bạn. XHTML documents must use lower case for all HTML element and attribute names. Tôi không chắc chắn về HTML.

Cập nhật 2

Giải pháp duy nhất tôi có thể tìm thấy là sử dụng:

$("svg")[0].setAttribute("viewBox", "0 0 166 361"); 

Cập nhật

Tôi không thể giải thích nó vì lý do nào, tôi thử nghiệm trên của tôi máy chủ riêng vì JsFiddle luôn sử dụng XHTML (boo!). Trong mọi trường hợp, nó là chữ thường, nhưng nó vẫn là một phần tử SVG trong FF, Chrome và IE9 (Tôi không biết liệu chúng có hợp lệ không vì tôi không biết SVG tôi sợ).

Answer 2

bạn thể sử dụng nó. Tôi đoán bạn đang nhìn thấy nó trong tức là nhà phát triển công cụ thanh

nó tốt

nó chỉ hiển thị nó thành chữ thường

nhưng nếu bạn cố gắng để cảnh báo giá trị trường hợp lạc đà - bạn SẼ thấy một kết quả.

cố gắng làm:

alert(("svg").attr("viewBox")); 

Answer 3

http://docs.jquery.com/Won't_Fix#SVG.2FXML.2FVML_Bugs

jQuery nhận ra rằng họ ToLower tất cả các tên thuộc tính nhưng không quan tâm đến những ngoại lệ/xóa dòng này như lỗi liên quan đến SVG được bỏ qua (các ToLower là không cần thiết theo ý kiến ​​của tôi).

Answer 4

Vì html không phân biệt chữ hoa và thẻ xhtml và thuộc tính nên viết hoa chữ thường, jQuery chuyển đổi tên thuộc tính thành chữ thường. Vì xml phân biệt chữ hoa chữ thường, đây là vấn đề đối với ngôn ngữ xml được nhúng khi chúng sử dụng tên thuộc tính trường hợp camel như SVG.

Bạn có thể sử dụng các móc jQuery để xử lý các tên thuộc tính mà bạn muốn trường hợp không được chuyển đổi. Nếu jQuery tìm thấy jQuery.attrHooks[attributename].set để đặt, nó sẽ sử dụng nó để đặt thuộc tính. Tương tự cho jQuery.attrHooks[attributename].get khi cố gắng truy xuất giá trị thuộc tính. Ví dụ:

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

Bây giờ jQuery sẽ sử dụng setter/getters để thao tác các thuộc tính đó.

Lưu ý: 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').