CODEWITHSUNDEEP
javascriptjquerysvg
TheRealPapa
TheRealPapa

Reputation: 4539

Scaling and centering SVG with JS

Learning SVG / snap. With some help I can pull a region from a map and load it onto a modal per the fiddle here.

I am now trying to keep the SVG within a 200px by 200px div, maintaining its aspect ratio, and to scale, so each region in the modal will fit in the above box but remain to scale against other regions. 

   var m = Snap('#world-map');
   var d = Snap('#svg-region');
   var regionSVG = m.select('#' + region);
   var p = regionSVG.clone();
   d.append(p);
   var bb = regionSVG.getBBox();

   var vb = bb.x + ' ' + bb.y + ' ' + bb.width + ' ' + bb.height;
   d.attr({
     viewBox: vb
   })

I tried processing the data in the bbox to create a scale, but failed miserably.

function zoomBBox(bbox)
{
    var zbbox, ratio, diffx, diffy;
    var length = 200;

    if (bbox.width > bbox.height) {
        ratio = bbox.width / length;
        zbbox.width = length;
        zbbox.height = bbox.height * ratio;
    } else {
        ratio = bbox.height / length;
        zbbox.width = bbox.width * ratio;
        zbbox.height = length;
    }

    diffx = (zbbox.width - length) / 2;
    diffy = (zbbox.height - length) / 2;

    zbbox.x = bbox.x + diffx;
    zbbox.y = bbox.y + diffy;

    return zbbox;
}

Upvotes: 0

Views: 181

Answers (2)

Littlemad
Littlemad

Reputation: 711

You just need the power of CSS :D

You need to define in the SVG #svg-region inside the modal via css HEIGHT & WIDTH that you want that they appear at their maximum. For example 100px & 100px and they will be rendered inside that box

#svg-region{width:100px; height:100px;}

For aligning it, use a as wrapper around #svg-region with the following css (I think that should work, didn't test it to align vertically and horizontally)

.wrapper{display:flex; jusfity-alignment:center; align-item:center;}

Upvotes: 0

caramba
caramba

Reputation: 22480

just add

.modal-body svg {
  max-width: 100%;
  max-height: 100%;
}

https://jsfiddle.net/0djhebes/7/

Upvotes: 1

Related Questions