调整 G 标签内的 SVG 矩形元素大小

Question

我正在网站中使用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...

- Faquir

Answer 1

您缺少应设置为以下内容的 “viewbox” 属性：

 <svg width='100' height='100' viewBox='0 0 100 100'>...</svg>

这样，您可以将SVG视为图像，并按照相应比例进行调整。

如果没有viewbox，当您更改宽度和高度时，您的SVG将不会缩小。

以下是一个带有viewbox和一个没有viewbox的SVG的比较示例：http://jsfiddle.net/k14qd88j/

- Dan

---

哦，你说得对！有了这个，我离我想要的更近了，非常感谢！ - Faquir

Answer 2

你需要调整容器 div 的大小，同时让 SVG 具有 100% 的高度和宽度。

- Pavel Gatnar

---

根据您的答案编辑了第一篇帖子。 - Faquir

我想通了...编辑了第一篇帖子。 - Faquir