我在网站中使用 SVG,但在调整它的大小时遇到了一些问题。它显示在网站的标题内,在我实现 SVG(使用普通图像)之前,我正在调整图像的大小,如下所示:
$("#block_175 img").height($("#header").height() / 2);
现在,因为我使用的是 SVG,所以我尝试了几种调整它大小的方法,但我似乎找不到如何操作的方法。这是我构建 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();
});
因此,继续:我需要 SVG 的高度为 #header 的一半,但我找不到如何调整整个 SVG 的大小。
谢谢。
编辑 1:(谢谢您,Pavel Gatnar)
将 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;
}
我现在正在调整容器 div 的大小而不是 SVG 本身,但它也不起作用。 G元素不断溢出容器div...
最佳答案
您缺少应设置为的 'viewbox' 属性:
<svg width='100' height='100' viewBox='0 0 100 100'>...</svg>
这样您就可以将 SVG 视为图像,并按图像调整其大小。
如果没有 View 框,当您更改宽度和高度时,您的 SVG 不会按比例缩小。
下面是带有 View 框和不带 View 框的 SVG 行为的比较:http://jsfiddle.net/k14qd88j/
关于javascript - 调整 G 标签内的 SVG 矩形元素的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30212467/