为什么我的SVG在页面加载时会跳动？

Question

左列的svg在页面加载时会"跳动"。当你第一次打开URL时，它会变得非常大，然后由于某种奇怪的原因缩小到正确的大小。我该如何解决这个问题？

我已经尝试了从百分比高度到vh的所有方法。我需要调整视口吗？谢谢您的帮助。

- user1426442

Answer 1

这是因为您没有为任何元素指定宽度，而是让浏览器在各种对象加载时调整和重新排列元素。您的SVG已经内嵌在HTML中，并且在页面加载时已经存在。但是，您的style.css和bootstrap.css文件直到稍后才会被加载，因此在此之前，SVG将占用整个页面。

SVG似乎不具有响应性。它总是以662像素的宽度结束。所以只需给它这个宽度即可。

<svg width="662px" ...

- Paul LeBeau

---

谢谢您的回复。我想就是那样的问题。这真的很烦人！哈哈 - user1426442

如果您从图像标签中调用SVG，有没有任何方法可以阻止这种情况发生。我尝试添加宽度和高度属性以及使用样式宽度和高度，但都没有影响它。 - Griffin Garman

Answer 2

@Paul LeBeau在他的评估和解决方案中是正确的。但是，如果您还想在页面加载时使用像素值（以避免大量的SVG），然后在页面加载后使用百分比值，您可以使用JavaScript和jQuery执行以下操作

为页面加载添加具体值：

<svg style="width:100px;height:100px;" class="svgClass"></svg>

允许CSS在之后生效：

jQuery(document).ready(function($) {
    //SVGs are huge upon first loading when using percents. So, set initial values to px and then remove
    $("svgClass").removeAttr("style");
});

我假设您需要的类类似于以下内容：

svgClass{
    width:25%;
    height:25%;
}

- Chris Sprague