resizing polygons in svg using jquery - svg

Question

I've seen problems similar to this one, but the solutions offered haven't worked for me. I have 67 polygons inside an svg tag. I want to resize the svg and its polygons. The code below doesn't scale. What are I doing wrong?
<svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" width="800" height="948" viewBox="0 0 800 948" transform="scale(3)" >
<polygon fill="#DCDDDE" stroke="#000000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
51.863,2.318 51.33,24.344 60.904,24.341 60.368,36.8 56.213,36.622 32.925,36.452 6.163,35.635 6.265,25.489 10.962,22.776
12.801,22.523 18.542,20.605 26.558,16.127 28.034,14.607 29.153,11.827 30.635,10.309 32.479,10.057 33.056,10.166 32.949,10.741
33.309,12.004 33.885,12.114 38.582,9.402 42.008,7.054 43.958,6.223 45.329,5.283 48.545,4.089 50.599,2.681 "/>
...(more polygons)
</svg>

Answer 1

You shouldn't be fiddling with the viewBox attribute. If you want to resize the SVG, change its width and height attributes.

Answer 2

What I finally did was take a ruler and measure the cumulative width of the polygons. Based on that, I could calculate how to resize them:
jquery:
var mapW = $('#map').width();
var mapH = Math.round(mapW * 255 / 477);
var svg = $('svg');
svg.attr('viewbox', '0 0 ' + mapW + ' ' + mapH);
svg.attr('preserveaspectratio', 'xminymin meet');
svg.attr('width', mapW+'px');
svg.attr('height', mapH+'px');
svg.attr('enable-background', "new 0 0 "+mapW + " " + mapH);
//svg.children().attr('transform', 'scale(1.2)');
var s = svg.children();
//I used a ruler to measure the width of the polygons - 360
var factor = mapW /360 ;
console.log(factor);
svg.children().attr('transform', 'scale(' + factor + ')');
//must change svg height to accommodate new height
svg.attr('height', mapH*factor+'px');