javascript - jQueryのattr（）は小文字を強制しますか？

Question

次のようなsvg'viewBox'属性を操作しようとしています。

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

使用する

$("svg").attr("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要素と属性名に小文字を使用する必要があります。」

document.createElementNS()したがって、XHTMLドキュメントで属性が小文字に変換されないようにするには、次のように名前空間を指定する要素を作成する必要があります。

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はセッター/ゲッターを使用してこれらの属性を操作します。

それel.attr('viewBox', null)は失敗したことに注意してください。フックセッターは呼び出されません。代わりに、el.removeAttr（'viewBox'）を使用する必要があります。

Answer 4

attrを操作する前に、attrがすでに存在する場合は、必ず削除してください。

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

そしてそれを再作成します

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