de la bbox() renvoie les mêmes valeurs après l'échelle()

Question

var SVGElement = SVG('elementId'); 
var group = SVGElement.group().path('M50,49.67a18.5,18.5,0,1,0-18.5-18.5A18.52,18.52,0,0,0,50,49.67Zm0-31a12.5,12.5,0,1,1-12.5,12.5A12.51,12.51,0,0,1,50,18.67Z') 

bbox_beforeScale = group.bbox() 
group.scale(2) 
bbox_afterScale = group.bbox() 

bbox_beforeScale == bbox_afterScale // true 

appel de fonction BBox ne pas calculer la position mise à jour, la hauteur et la largeur

Answer 1

Pour développer les commentaires de Robert, la méthode SVG getBBox() - qui svg.js utilisera sous le capot de bbox() - retourne le cadre de délimitation de l'élément. Mais il ne tient compte d'aucun transform sur cet élément.

Pour obtenir la zone de délimitation après la transformez, vous devez envelopper l'élément dans un groupe, et appellent getBBox() (bbox()) à ce sujet.

Dans votre cas, vous avez déjà enveloppé le chemin dans un groupe. Mais la chose que vous appelez group est en réalité le chemin, pas le groupe.

Essayez quelque chose comme ceci:

var group = SVGElement.group(); 
var path = group.path(..); 

bbox_beforeScale = group.bbox(); 
path.scale(2); 
bbox_afterScale = group.bbox(); 

var SVGElement = SVG('elementId'); 
 
var group = SVGElement.group(); 
 
var path = group.path('M50,49.67a18.5,18.5,0,1,0-18.5-18.5A18.52,18.52,0,0,0,50,49.67Zm0-31a12.5,12.5,0,1,1-12.5,12.5A12.51,12.51,0,0,1,50,18.67Z'); 
 

 
bbox_beforeScale = group.bbox(); 
 
path.scale(2); 
 
bbox_afterScale = group.bbox(); 
 

 
// draw bbox 
 
SVGElement.rect(bbox_afterScale.width, bbox_afterScale.height).addClass('box').move(bbox_afterScale.x, bbox_afterScale.y);

path { 
 
    fill: #f06; 
 
} 
 

 
.box { 
 
    fill: none; 
 
    strokeWidth: 1; 
 
    stroke: green; 
 
}

<script src="https://cdn.rawgit.com/svgdotjs/svg.js/master/dist/svg.min.js"></script> 
 

 
<div id="elementId"></div>