使用snap.svg缩放SVG



我试图通过使用snap.svg

将SVG缩放,或者通过将其包裹或更改其宽度高度来扩展。

嗨,有小提琴https://jsfiddle.net/95sqchoo/

我希望将路径添加到SVG中,然后在SVG内获取扩展路径。

添加一个视口似乎不会改变任何东西

var s = Snap('#svg')
var path = s.path('m78.95998,72.09938c-14.78655,5.14428 -46.79804,-6.55764 -52.51163,-21.83775c-7.47018,-19.97898 7.4647,-37.90911 25.30962,-44.25391s61.60102,-6.8391 85.76581,22.53791s-7.92264,69.82076 -44.90485,73.07832c-34.70821,3.05718 -90.12087,-18.83796 -90.11891,-49.58309')
var bbox = s.getBBox()
s.attr({
    width: bbox.width,
    height: bbox.height,
    preserveAspectRatio: 'xMaxYMax',
    viewport: `0 0 ${bbox.width} ${bbox.height}`
})

设置viewBox值足以使SVG量表。

var s = Snap('#svg')
	var path = s.path('m78.95998,72.09938c-14.78655,5.14428 -46.79804,-6.55764 -52.51163,-21.83775c-7.47018,-19.97898 7.4647,-37.90911 25.30962,-44.25391s61.60102,-6.8391 85.76581,22.53791s-7.92264,69.82076 -44.90485,73.07832c-34.70821,3.05718 -90.12087,-18.83796 -90.11891,-49.58309')
var bbox = s.getBBox();
var viewBox = bbox.x+' '+bbox.y+' '+bbox.width+' '+ bbox.height;
  s.attr({
     viewBox: viewBox
  })
<svg id='svg'/>

最新更新