为什么jQuery自动降低套管属性值？

Question

我正在使用直接放入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。由于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>

Answer 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我害怕）。

Answer 2

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

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

['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 / getters来操作这些属性。

注意：el.attr('viewBox', null)会失败;你的钩子定位器不会被叫到。相反，你应该使用el.removeAttr（＆＃39; viewBox＆＃39;）。

Answer 3

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

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

Answer 4

你可以使用它。我想你是在即开发者工具栏中看到的

很好

它只显示小写

但如果您尝试提醒驼峰案例值 - 您将看到结果。

尝试做：

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