固定SVG高度和可变（100%）宽度

Question

固定SVG高度和可变（100%）宽度

htmlcsssvg

11

我想在我的HTML页面上放置一个SVG对象，希望它的宽度为100%，高度是固定的。

在我的fiddle示例中，您可以看到深灰色对象的高度会根据窗口比例而改变。（这不是我想要的）

http://jsfiddle.net/Lq207ery/6/

HTML

<body>
<!-- HEADER -->
<header>
    <div class="logo"></div>
    <div class="triangle">
        <svg data-type="vertical_parallax" data-speed="2" x="0px" y="0px" width="410" height="410" viewBox="0 0 310 310" style="-webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px);">
            <g>
                <!--<polyline stroke="#222" fill="none" stroke-width="1" points="0,210 0,210 310,0 "></polyline>-->
                <polyline fill="#CC0000" points="0,0 0,200 300,0    "></polyline>
            </g>
        </svg>
    </div>
    <div class="nav">
        <svg width="100%" viewBox="0 0 10 10" preserveAspectRatio="xMinYmin">
            <polygon fill="#222" stroke-width="0" points="0,1.5 0,0 10,0 15,0 " />
        </svg>
    </div>
</header>
<!-- CONTENT -->

CSS（层叠样式表）

body {
margin: 0;
}
header svg {
    display: block;
    margin: 0;
}
header .triangle {
    z-index: 200;
}
header .logo {
    margin-top: -90px;
}
header .nav {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    z-index:-1;
}

- user3703764

3个回答

1

你的解释有点简短，但是你可以这样做： HTML 代码：

<header>
    <div class="triangle">
        <svg x="0px" y="0px" width="410" height="410" viewBox="0 0 310 310">
            <g>
                <polyline fill="#CC0000" points="0,0 0,200 300,0"/>
            </g>
        </svg>
    </div>
    <div class="nav"></div>
</header>

CSS 代码：

html, body {
    margin: 0;
}
header {
    position: relative;
}
header .triangle {
    position: relative;
    z-index: 2;        
}
header .nav {
    position: absolute;
    top:0;
    left:0;
    width: 2000px; // big screens
    height: 100px;
    background-image:url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%22150px%22%20height%3D%2215px%22%20viewBox%3D%220%200%20150%2015%22%3E%3Cg%3E%3Cpolygon%20fill%3D%22%23222%22%20points%3D%220%2C15%200%2C0%20100%2C0%20150%2C0%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    background-size: cover;
    background-position: bottom left;
    z-index: 1;
}

SVG在URL编码之前：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150px" height="15px" viewBox="0 0 150 15">
    <g>
        <polygon fill="#222" points="0,15 0,0 100,0 150,0"/>
    </g>
</svg>

演示: http://jsfiddle.net/sparkup/21uaffpy/

或者可能是这行: http://jsfiddle.net/sparkup/21uaffpy/18/

- Sparkup

谢谢Sparkup，我可能会在另一个项目中使用这个技巧。你是如何获取background-image:url(....)的？ - user3703764

你只需要在<svg>...</svg>前添加data:image/svg+xml;utf8,进行urlencode。 - Sparkup

0

此外，我想补充一点，如果 SVG 元素设置了 viewBox 和 preserveAspectRatio 属性，另一个可能的方法是使用一个容器 div 并设置 font-size，例如：

        <div style="height: 50px; width: 50px; fontSize: 50px">
           <svg>...</svg>
        </div>

- jmunsch

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Phrogz · Accepted Answer

给你的SVG元素一个固定的高度。如果不这样做，该元素的高度将与其宽度成比例改变。
调整你的viewBox以裁剪到你内容的高度。
修正你的preserveAspectRatio值并使用正确的大小写敏感的值，例如xMinYMin（而不是xMinYmin）。

演示：http://jsfiddle.net/Lq207ery/8/

如果您希望您的深灰色三角形拉伸（而不是保留其纵横比），请改用preserveAspectRatio="none"。

固定SVG高度和可变（100%）宽度

演示：http://jsfiddle.net/Lq207ery/8/

演示：http://jsfiddle.net/Lq207ery/9/