简体   繁体   中英

Scale svg using snap.svg

I am trying to get an svg to scale, either by wrapping it in div or change its width height, all by using snap.svg

Hi have fiddle https://jsfiddle.net/95sqchoo/

I would like the path to be added to the svg and then get that path to scale within the svg.

Adding a viewport does not seem to change anything

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

Setting a viewBox value is enough to make the svg scale.

 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'/> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM