Why is my SVG jumping on page load?

Admin 1
Viewed 3448

The svg in the left column "jumps" on page load. When you first go to the URL, it enlarges HUGE then scales down to the correct size for some strange reason. How can I fix this?

I've tried everything from percentage height to vh. Do I need to mess with the viewbox? Thank you for your help.

responsive-design svg
2 Answers

@Paul LeBeau is correct in his evaluation and solution. But, if you also want to use pixel values when the page loads (to avoid the massive svg) and then use percentage values after the page loads, you can do the following with javascript and jQuery

Add concrete values for when the page loads:

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

Allow the css to kick in after:

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");
});

I'm assuming something like the following is your desired class:

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