Comment obtenir la hauteur/largeur d'un groupe SVG élément?

J'ai besoin de connaître la largeur et la hauteur d'un élément SVG? Im essayant d'utiliser les éléments suivants:

$('g#myGroup').height()

...mais le résultat est toujours à zéro?

InformationsquelleAutor josef.van.niekerk | 2011-10-01
  1. 44

    svg <g> éléments n'ont pas explicite attributs height et width, elles automatique de la taille de tout ce qu'ils contiennent. Vous pouvez obtenir leur hauteur/largeur en appelant getBBox sur l'élément que:

    var height = document.getElementById("myGroup").getBBox().height;

    Si vous êtes vraiment en jquery vous pouvez l'écrire comme

    $('g#myGroup').get(0).getBBox().height;

    selon Reed Bobine

    • Réponse parfaite - pourriez avoir utilisé la version jQuery plutôt que depuis l'OP est l'aide que: $('g#myGroup').get(0).getBBox().hauteur
    • ce n'est pas la version jQuery. .get retourne l'élément DOM, jquery ne sait pas sur bbox.
    • J'étais en soulignant que $().get() pourrait être utilisé au lieu de la plus document.getElementById(), que la question d'origine utilise jQuery. Robert correctement incorporés ma suggestion.
    InformationsquelleAutor Robert Longson
  2. 3

    Je n'ai pas pu obtenir toutes les réponses ci-dessus pour travailler, mais ne viennent à travers cette solution pour le trouver avec d3:

    var height = d3.select('#myGroup').select('svg').node().getBBox().height;
var width = d3.select('#myGroup').select('svg').node().getBBox().width;

    getBBox() ici, la largeur et la hauteur de l'élément de groupe. C'est très simple.

    • J'ai essayé avec les deux getBBox() et getBoundingClientRect(). Les deux ont été montrant fn n'est pas défini. Et la réponse ci-dessus fonctionne très bien pour moi. Tx
    InformationsquelleAutor William Hampshire
  3. 2

    Basée sur la réponse ci-dessus, vous pouvez créer des fonctions jQuery .widthSVG() et .heightSVG()

    /*
 * .widthSVG(className)
 * Get the current computed width for the first element in the set of matched SVG elements.
 */

$.fn.widthSVG = function(){
    return ($(this).get(0)) ? $(this).get(0).getBBox().width : null;
};

/*
 * .heightSVG(className)
 * Get the current computed height for the first element in the set of matched SVG elements.
 */
$.fn.heightSVG = function(){
    return ($(this).get(0)) ? $(this).get(0).getBBox().height : null;
};
    InformationsquelleAutor Sagar Gala