使用snap.svg缩放svg

Question

我试图通过使用snap.svg

将svg包装在div中或更改其宽度高度

你好小提琴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}`
})

Answer 1

设置viewBox值足以使svg缩放。

＆＃13;

＆＃13;

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
  })

＆＃13;

<svg id='svg'/>

＆＃13;

＆＃13;

＆＃13;