Question

我一直在尝试制作一个通过：before添加的矩形，因此svg代码位于svg文件中，并通过样式进行调用。

before容器的高度正确，但是svg的高度要大于父容器的高度。调整视图框的高度确实可以更改它，但是它没有响应。

有人建议添加svg：not（root）。那根本没有帮助。

<svg class="svg-responsive" viewBox="0 0 100 100" 
xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="none" 
style="position: absolute;">
    <style>
    rect.shape{
        fill: transparent;
        stroke: rgba(255,255,255,0.3);
        stroke-width: 0.25;
    }
    svg:not (:root ) {
        width:100%;
        height: auto;
    }
</style>
<rect class="shape" width="100%" height="100%"></rect>

我希望能够对高度不同的多个不同列表使用相同的svg，并希望避免为每个列表创建不同的列表。

Answer 1

您的容器是position: relative吗？绝对定位的元素相对于最近的相对父元素定位自己。

如果这不起作用，请发布更多代码。

如果您只是想在列表上划一下，您可能会考虑使用CSS的border属性，因为它更容易处理。

如何使SVG成为响应高度？

1 个答案: