Question

我已经看到类似于这个的问题，但提供的解决方案并不适用于我。我在svg标签中有67个多边形。我想调整svg及其多边形的大小。下面的代码没有缩放。我做错了什么？

    <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

你不应该摆弄viewBox属性。如果要调整SVG的大小，请更改其width和height属性。

Answer 2

我最终做的是拿一把尺子测量多边形的累积宽度。基于此，我可以计算出如何调整它们的大小：

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');

使用jquery调整svg中的多边形大小

2 个答案: