Erzwingt attr() in jQuery Kleinbuchstaben?

Ich versuche, das Attribut „viewBox“ von svg zu manipulieren, das ungefähr so ​​​​aussieht:

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

Verwenden

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

Dadurch wird jedoch ein neues Attribut im Element mit dem Namen “Viewbox” erstellt. Beachten Sie die Kleinschreibung anstelle des beabsichtigten camelCase. Gibt es eine andere Funktion, die ich verwenden sollte?

Ich konnte reines Javascript verwenden, um das Element abzurufen und das Attribut mithilfe von festzulegen

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

und

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

Pro http://www.w3.org/TR/xhtml1/#h-4.2 “XHTML-Dokumente müssen für alle HTML-Element- und Attributnamen Kleinbuchstaben verwenden.”

Um also zu vermeiden, dass das Attribut in einem XHTML-Dokument in Kleinbuchstaben konvertiert wird, müssen Sie das Element erstellen, das einen Namensraum mit angibt document.createElementNS(), mögen:

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('viewBox', '0 0 512 512’);

Wenn Sie vorhaben, eine hinzuzufügen <use/> -Element müssen Sie auch den Namensraum angeben, während Sie das Element erstellen, sowie die xlink:href Attribut, wie:

var use = document.createElementNS('http://www.w3.org/2000/svg','use');
    use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#your_svg_id');

Sie könnten jQuery-Hooks verwenden:

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

Jetzt verwendet jQuery Ihre Setter/Getter, um diese Attribute zu manipulieren.

Notiz das el.attr('viewBox', null) wäre gescheitert Ihr Hakensetzer wird nicht aufgerufen. Stattdessen sollten Sie el.removeAttr(‘viewBox’) verwenden.

Sie möchten sicherstellen, dass Sie das attr entfernen, falls es bereits vorhanden ist, bevor Sie es manipulieren

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

und dann neu erstellen

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