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...
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/
您必须调整容器div的大小,而svg的高度和宽度为100%。
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.