javascript - SVG gets cropped -
so got svg , i'm having couple problems related fact instead of being resized fit container, svg image gets cropped out instead.
html:
<!doctype html> <html> <head> <title>eye</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="js/snap.svg.js"></script> <script src="js/eye.js"></script> </head> <body> <svg id="svg"></svg> </body> </html>
js:
window.onload = function() { var s = snap("#svg"); var circle = s.circle(90,120,80); var square = s.rect(210,40,160,160); var ellipse = s.ellipse(460,120,50,80); }
now, css code surely isn't cropped anymore since user agent stylesheet on google chrome contains "overflow:hidden" regarding svgs. right way resolve matter? also, why cropped instead of scaled? should "draw" svgs using percentages instead of pixels?
you have not set intrinsic dimension of svg. should add viewbox
attribute specify part of svg, want show. (the "complete" svg plain endless)
additionally can set extrinsic dimension of svg container. size of box, in svg appear.
together this:
<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 550 300"></svg>
#svg { overflow: visible; width: 100%; }
Comments
Post a Comment