I'm struggling to resize an SVG in my website. It is located within the header of the site, and previously I was resizing a regular image like this:
$("#block_175 img").height($("#header").height() / 2);
Now that I switched to using an SVG, I have been experimenting with different methods to resize it without success. Here is how the SVG is structured:
<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>
To attempt to style the SVG, here is the CSS code:
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;
}
The JavaScript involved for interaction with the SVG:
svg.on('click', function()
{
// Code for SVG interaction goes here
});
In summary, I am trying to resize the entire SVG to half the height of #header, but I have not found a solution yet.
Thank you.
EDIT 1: (thank you, Pavel Gatnar)
Updated CSS:
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;
}
I have also attempted to resize the container div instead of the SVG itself, but the G element continues to overflow from the container div...