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.