Question

我在我的网站中使用SVG图像徽标。当网站加载时，图像会颠簸。它看起来更小，然后增长到实际尺寸。它发生得非常快。每当我刷新页面或转到新页面时，都会发生这种情况。

<h1>
    <a class="logo" href="/" title="Startpage"><img class="svg" src="/resources/layout/logo.svg" alt="logo" /></a>
</h1>

标签具有固定的高度和宽度，内部的svg也具有在css中设置的相同高度和宽度。我正在使用js代码片段来使svg工作：

$('.svg').each(function(){
        var $img        = $(this);
        var imgID       = $img.attr('id');
        var imgClass    = $img.attr('class');
        var imgURL      = $img.attr('src');

        $.get(imgURL, function(data) {
            // Get the SVG tag, ignore the rest
            var $svg = $(data).find('svg');

            // Add replaced image's ID to the new SVG
            if(typeof imgID !== 'undefined') {
                $svg = $svg.attr('id', imgID);
            }
            // Add replaced image's classes to the new SVG
            if(typeof imgClass !== 'undefined') {
                $svg = $svg.attr('class', imgClass+' replaced-svg');
            }

            // Remove any invalid XML tags as per http://validator.w3.org
            $svg = $svg.removeAttr('xmlns:a');

            // Replace image with new SVG
            $img.replaceWith($svg);

        }, 'xml');
    });

出于某种原因，我无法将链接发布到我的网站。有人可以帮忙吗？

SVG徽标看起来更小，然后像凸起一样增长

0 个答案: