Menu
I am trying to have a fluid SVG canvas that can resize easily. So far I'm using percentages everywhere. However it seems like SVG polygon and paths do not support percentages in point attribute. Here's an example:
(jsFiddle)
<svg width='90%' height='90%' style='background-color: whitesmoke'> <rect x='40%' y='40%' width='25%' height='25%' /> <polygon points="0,0 0,100 30,20 30,0" /> <polygon points="30,0 30,20 60,0 60,0" /> <polygon points="60,0 60,0 90,30 90,0" /> </svg> However if I start to change numbers in points attribute to percentages it fails with parsing error in console. I am looking for a way to have the polygon that can resize with the <svg> element.
582
Nearly every length measurement in SVG can be expressed by a percentage. With a few exceptions, those percentages are relative to the SVG coordinate system size—the size defined by the viewBox of the nearest ancestor <svg> or <symbol> (or by its actual width and height, if it doesn't have a viewBox ).
The points attribute defines the x and y coordinates for each corner of the polygon.
Most of the web browsers can display SVG just like they can display PNG, GIF, and JPG. To draw a polygon in HTML SVG, use the SVG <polygon> element. The <polygon> element creates a graphic containing at least three sides. The points attribute is the x and y coordinates for each corner of the polygon.
The viewBox is an attribute of the SVG element in HTML. It is used to scale the SVG element that means we can set the coordinates as well as width and height. Syntax: viewBox = "min-x min-y width height" Attribute Values: min-x: It is used to set the horizontal axis.
By using viewBox and a container element (of whatever size) I think you can achieve the effect you're looking for: http://jsfiddle.net/davegaeddert/WpeH4/
<div id="svg-container" style="width:100%;height:100%;"> <svg width='100%' height='100%' viewBox="0 0 100 100" preserveAspectRatio="none" style='background-color: whitesmoke'> <rect x='40%' y='40%' width='25%' height='25%' /> <polygon points="0,0 0,100 30,20 30,0" /> <polygon points="30,0 30,20 60,0 60,0" /> <polygon points="60,0 60,0 90,30 90,0" /> </svg> </div> If you give the viewBox a size of 0 0 100 100 then the points can be written like percentages and the shape will scale with the svg.
138
You can group the elements together with g and use a transform:
<svg width='90%' height='90%' style='background-color: whitesmoke'> <rect x='40%' y='40%' width='25%' height='25%' /> <g transform="scale(0.4 0.4)"> <polygon points="0,0 0,100 30,20 30,0"/> <polygon points="30,0 30,20 60,0 60,0"/> <polygon points="60,0 60,0 90,30 90,0"/> </g> </svg> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
