javascript - jQuery 中的 attr() 是否强制小写？

Question

我正在尝试操作看起来像这样的 svg 'viewBox' 属性：

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

使用

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

但是，这会在名为“viewbox”的元素中创建一个新属性。注意小写而不是预期的驼峰式。我应该使用其他功能吗？

Answer 1

我能够使用纯 javascript 来获取元素并通过使用设置属性

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

和

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

Answer 2

根据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');

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)失败；你的钩子设置器不会被调用。相反，您应该使用 el.removeAttr('viewBox')。

Answer 4

您要确保在操作之前删除 attr（如果它已经存在）

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

然后重新创建它

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