Menu
I have an svg <rect> that is in a <g> (group) and I would like to scale it and then translate it by a percentage of the viewport. Most everything in svg allows the specification of units through a ridiculous number of options; e.g. px, em, %, ex, pt, pc, ... However it seems that the number specified in the translation is only pixels.
Thing is that if I have to go back and recalculate the pixel values for the translation, then my svg becomes resolution dependent. Then me, you and everyone would get sucked into a paradox. You can see why I'm a little concerned.
<svg>
<g transform="scale(1, 1) translate(0, 0)">
<rect x="45%" y="25%" height="50%" width="10%"/>
</g>
</svg>
http://jsbin.com/ubeqot/1/edit
855
Stick the <g> element in an inner <svg> element and add x and y attributes with percentage values to the inner <svg> element to translate it. If you want the scale to apply first you would put the <svg> element inside the <g> instead.
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.
Stick the <g> element in an inner <svg> element and add x and y attributes with percentage values to the inner <svg> element to translate it.
<svg> <svg x="10%" y="20%"> <g transform="scale(1, 1)"> <rect x="45%" y="25%" height="50%" width="10%"/> </g> </svg> </svg> If you want the scale to apply first you would put the <svg> element inside the <g> instead.
132
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
