调整浏览器大小时，SVG 顶部有空白区域

Posted 2023-03-06

【中文标题】调整浏览器大小时，SVG 顶部有空白区域

【英文标题】：SVG has white space on top when resizing the browser

【发布时间】：2022-01-02 03:59:45

【问题描述】：

当我调整浏览器的大小时，SVG 顶部会出现一条细白线。如果我再次调整页面大小，它就会消失。在某些页面宽度下，它会重新出现和消失。当我自己打开 SVG 文件时，我看不到任何类似的工件。当我将 SVG 背景设置为像 background: red 这样疯狂的东西时，我可以看到白线在 SVG 内部，因为它变成了红色，而不是由相邻 div 创建的某种边框或伪影。关于为什么会这样的任何想法？到目前为止，我只能在 Chrome 和 Microsoft Edge 中重现它。在 FF 和 Safari 中看起来不错。

这是 SVG 所在的页面：https://striveworks.us/careers

这是一个例子：

【参考方案1】：

你的问题是这样的，如果你通过检查元素禁用背景，该行将消失，但底部将是错误的颜色。

svg.careers__AnimatedCurveSVG-sc-1587ytp-2 hwGnAC.hwGnAC 
    background: rgb(244, 242, 246);

【讨论】：

请注意，当我们缩放矢量图像时，SVG 的附加白线会消失。我建议将 .hwGnAC 元素的高度更改为 >= 9rem，因为较低的值不能解决所述问题。

感谢您查看此内容...您是说创建空白是因为原始 SVG 更大吗？试图弄清楚如何在 SVG 本身中解决这个问题

是的............