Resizing SVG rect elements inside G tag
You're missing the 'viewbox' attribute which you should set as:
<svg width='100' height='100' viewBox='0 0 100 100'>...</svg>
This way you can treat your SVG as an image, and resize it as such.
Without a viewbox, your SVG will not be scaled down when you alter the width and the height.
Here's a comparison of how a SVG with the viewbox and one without the viewbox behave: http://jsfiddle.net/k14qd88j/
![Faquir](https://i.stack.imgur.com/j59tW.png?s=256&g=1)
Faquir
Updated on June 28, 2022Comments
-
Faquir almost 2 years
I'm using a SVG in a website but I am having some trouble resizing it. It is displayed inside the website's header and, before I implemented the SVG (was using a normal image), I was resizing the image like this:
$("#block_175 img").height($("#header").height() / 2);
Now, since I am using the SVG, I tried several ways of resizing it but I can't seem to find how to do it. Here is how I built the SVG:
<div id='block_175' class=''> <svg width="100" height="100"> <g id="cross_svg"> <rect id="Rectangle-1" x="0" y="0" width="48" height="2" fill="transparent"></rect> <rect id="Rectangle-2" x="0" y="14" width="48" height="2" fill="transparent"></rect> <rect id="Rectangle-4" x="0" y="28" width="48" height="2" fill="transparent"></rect> </g> </svg>
CSS:
svg { width: 52px; height: 52px; z-index: 99999; transition: all .3s ease; cursor: pointer; } svg g { transition: all .3s ease; width: 100px; height: 100px; display: block; position: absolute; left: 50%; top: 50%; margin: auto; cursor: pointer; } svg rect { transition: all .3s ease; fill: #ffffff; } svg g { width: 100px; height: 100px; }
JS:
svg.on('click', function() { if (i) { setTimeout(function() { $(this).find("g").addClass('gotcha'); line_first.css( { 'transform':'rotate(45deg)', 'left':'50%', 'top':'50%', 'width':'200px', // This line BELONGS to @dervondenbergen :D // Enjoy your propriety my friend. 'transform-origin': 'left bottom' }) line_third.css( { 'transform':'rotate(-45deg) translate(-50%,-50%)', 'left':'50%', 'top':'50%' }) line_second.css('opacity','0') },005) } else { setTimeout(function() { line_first.attr('style', ''); line_third.attr('style', ''); line_second.css('opacity','1') },005) } i =! i; $("#mobile_menu").slideToggle(); });
So, resuming: I need the SVG to have half the height of #header but I can't find out how to resize the whole SVG.
Thanks.
EDIT 1: (thank you, Pavel Gatnar)
Changed the CSS to this
svg { width: 100%; height: 100%; z-index: 99999; transition: all .3s ease; cursor: pointer; } svg g { transition: all .3s ease; width: 100%; height: 100%; display: block; position: absolute; left: 50%; top: 50%; margin: auto; cursor: pointer; } svg rect { transition: all .3s ease; fill: #ffffff; }
and I'm now resizing the container div instead of the SVG itself, but it doesn't work either. The G element keeps overflowing out of the container div...
-
Faquir about 9 yearsEditted the first post based on your answer.
-
Faquir about 9 yearsI figgured it out... Editted the first post.
-
Faquir about 9 yearsOh, you're right! With this I am closer to what I want, thanks a lot!