Question

我在网页上有一个简单的SVG，我希望SVG只对宽度做出响应。问题是，当屏幕高度小于SVG高度时，它也会缩小。

HTML：

<div class="container">
    <svg version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin">
        <circle stroke="#000" stroke-width="10" fill="transparent" cx="250" cy="250" r="200"/>
    </svg>
</div>

CSS：

svg {
    max-height: 100%;
}

.container {
    width:50%;
    border: 1px solid black;
}

这是jsfiddle，您可以看到当窗口高度减小时圆半径减小。如何避免这种情况？

谢谢！

Answer 1

这是我想要实现的目标，对不起，如果我的问题不够明确：

SVG的宽度仅取决于容器可用的宽度，
（宽度/高度）始终保留的SVG比率，
容器的高度仅取决于SVG的宽度及其（宽度/高度）比率。

我这样做了：

HTML＆amp; SVG：

<div class="container">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 500 400" preserveAspectRatio="xMinYMin">
        <circle fill="#F7941E" stroke="#231F20" stroke-width="10" cx="250" cy="200" r="150"/>
    </svg>
</div>
<hr>

CSS：

.container {
    position: relative;
    width:50%;
    padding-bottom: 40%;
    border: 1px solid black;
}

svg {
    position: absolute;
    top: 0;
    left: 0;
    max-height: 100%;
}

Fiddle here

我看到的唯一缺点是需要定义容器的填充底部，以及与SVG的w / h比相匹配的值，这是多余的。

Answer 2

如果你想要的是圆圈保持相同的大小，即使窗口大小改变，那么只需摆脱viewBox。尝试从开头的svg标签中删除：viewBox =“0 0 500 500”preserveAspectRatio =“xMinYMin”。

Answer 3

height的默认值（如width）为100％。这意味着100％的容器高度。

一种解决方案是给容器一个非常大的高度。

.container {
    width:50%;
    height: 9999px;
    border: 1px solid black;
}

Fiddle here

当高度放大时，你并没有真正说出你想要发生在圆圈下部的事情。如果你希望它隐藏在div容器的底部，那么你可以这样做：

svg {
    height: 9999px;
}
.container {
    width:50%;
    height: 300px;
    overflow: hidden;
    border: 1px solid black;
}

Fiddle here

SVG缩小以适应小屏幕高度，为什么？

3 个答案: