SVG宽度未填写页面比例-Java 学习之路

我遇到了全宽度SVG（页面宽度）的问题 . 缩放我的窗口时，它会创建一个间隙，当进一步缩放时，SVG会再次填满整个宽度 . 屏幕是浏览器窗口左端的图像 .

Left end of the browser window

SVG：

<svg class="line line-top" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1280 50">
    <polygon points="0 0 1280 0 1280 0 0 50"/>
</svg>

您可以在此_2446356中看到它 - 尝试更改视图框高度，问题差距开始变小 .

有任何想法吗？

2 回答

你需要让svg明确填写页面，即

body {
    background:red;
    margin:0;
    width: 100%;
    height: 100%;
}
html {
    width: 100%;
    height: 100%;
}

<svg fill="black" viewBox="0 0 1280 50" preserveAspectRatio="xMidYMin" width="100%" height="100%">
    <polygon points="0 0 1280 0 1280 0 0 50"/>
</svg>

回复于 2024-05-05T08:56:08+08:00

0
这个bug没有修复或找不到，但我创建了一个简单的CSS解决方案，将它拉到浏览器外面，溢出它 . 我知道这不是解决方案，但至少客户端没有注意到:)

就像是：
```
svg{
   fill: currentcolor;
   left: -7px;
   position: absolute;
   width: 103%;
}

.container{
   overflow:hidden;
}
```
回复于 2024-05-05T08:56:08+08:00

SVG宽度未填写页面比例

2 回答

相关问题