为什么jQuery自动小写属性值？答案

【问题标题】：Why is jQuery auto lower casing attribute values?为什么jQuery自动小写属性值？
【发布时间】：2012-04-30 20:47:02
【问题描述】：

我正在使用直接放入 HTML 文件中的 SVG

<svg>
   Contents...
</svg>

使用 javascript/jQuery 我想为 SVG 添加一个属性

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

这是运行上述脚本后修改后的 SVG

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

注意它放置的是视图框而不是视图框。由于 viewbox (小写) 不做任何事情，我需要它是 viewBox (camelcase)

有什么想法吗？

** 更新**

我运行了一个小测试，从服务器端渲染 viewBox 属性，然后运行上面的脚本。可以看到 1. 从服务端渲染的时候，没问题。 2. jQuery 不识别camelCase viewBox 属性并插入另一个全小写。

<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>

【问题讨论】：

标签： jquery

【解决方案1】：

我可能取决于您的编码文档类型。 XHTML documents must use lower case for all HTML element and attribute names。我不确定 HTML。

更新 2

我能找到的唯一解决方案是使用：

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

更新

我无法以任何理由解释它，我在自己的主机上进行了测试，因为 JsFiddle 总是使用 XHTML（嘘！）。在所有情况下它都是小写的，但它仍然是 FF、Chrome 和 IE9 中的 SVG 元素（我不知道它们是否有效，因为我害怕我不知道 SVG）。

【讨论】：

我将我的 HTML 文件更改为以查看是否有帮助，但没有运气。 w3.org/TR/SVG/coords.html#ViewBoxAttribute 这是对 viewBag 属性的引用。还有其他想法吗？
更新2，我猜需要使用setAttribute内置的Javascript :(

【解决方案2】：

因为 html 不区分大小写，xhtml 标签和属性应该小写，所以 jQuery 将属性名称转换为小写。因为 xml 是区分大小写的，当嵌入的 xml 语言像 SVG 一样使用驼峰式属性名称时，这是一个问题。

您可以使用 jQuery 钩子来处理那些您不希望大小写转换的属性名称。如果 jQuery 找到jQuery.attrHooks[attributename].set 要设置它将使用它来设置属性。 jQuery.attrHooks[attributename].get 在尝试检索属性值时也是如此。例如：

['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);
    },
  };
});

现在 jQuery 将使用您的 setter/getter 来操作这些属性。

注意：el.attr('viewBox', null) 会失败；你的钩子设置器不会被调用。相反，您应该使用 el.removeAttr('viewBox')。

【讨论】：

虽然此方法有效，但它不会阻止旧行为的发生。所以一个元素最终会同时具有viewbox 和viewBox 属性。并不是说它不起作用，而是它没有尽可能干净。
我没有注意到。查看jQuery.fn.attr，它应该将属性设置委托给钩子。它如何设置属性的小写版本？ github.com/jquery/jquery/blob/master/src/attributes/…
@JasmineHegman 已修复。如果设置属性成功，jquery 期望 setter 返回 true

【解决方案3】：

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

jQuery 认识到它们 toLower 所有属性名称，但不关心例外/删除此行，因为与 SVG 相关的错误被忽略（在我看来 toLower 是多余的）。

【讨论】：