Question

左栏中的svg＆＃34;跳跃＆＃34;在页面加载。当你第一次去URL时，它会扩大巨大，然后由于一些奇怪的原因缩小到正确的大小。我该如何解决这个问题？

我已尝试从百分比高度到vh的所有内容。我需要弄乱视图吗？谢谢你的帮助。

Answer 1

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

SVG似乎没有响应。它总是似乎最终宽度为662px。所以只要给它宽度。

<svg width="662px" ...

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%;
}

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

2 个答案: