为什么SVG对象总是在以后绘制？ [英] Why are SVG objects always drawn later?

问题描述

在我的HTML5页面中，我通过以下方式将SVG与回退结合在一起。背后是背景：

In my HTML5 page, I'm incorporating SVG with fallback the following way. Behind is a background :

<object type="image/svg+xml" data="simpleParallelogram.svg" width="284" height="460">
    <img src="simpleParallelogram_fallback.jpg" width="284" height="460">
</object>   

<img src="background.jpg">

无论我把SVG对象放在哪里（这是一个非常简单的平行四边形），我总是遇到显示延迟。绘制背景，然后SVG弹出，导致可耻的口吃负荷。

No matter where I put the SVG object in the page (which is a very simple parallelogram), I always experience a delay in its displaying. The background is drawn, then the SVG pops up, resulting in a disgraceful stuttering load.

任何想法为什么以及如何阻止它？

Any ideas why and how I can prevent it?

推荐答案

SVG对象并不总是在以后绘制。这取决于它们嵌入HTML页面的方式。如果你想要一个SVG的即时绘图和没有javascript的后备，你必须使用：

SVG object are not always drawn later. It depends on the way they are embbed in the HTML page. If you want an instant drawing of the SVG and a fallback without javascript, you have to use either :

SVG将在CSS中引用。因为CSS已加载到 head 部分，所以它将在HTML代码中显示SVG。

The SVG will be referenced in the CSS. Because CSS is loaded in the head section, it will draw the SVG as it appears in the HTML code.

.my-element {
    background-image: url(fallback.png);
    background-image: 
    linear-gradient(transparent, transparent),
    url(image.svg);
}

有关如何使用此技术的更多详细信息

因为它是内联的，所以SVG将按照HTML代码中的显示进行绘制。

Because it's inline, the SVG will be drawn as it appears in the HTML code.

<svg>
    <switch>
        <g>
           /* Here the SVG code */
        </g>
        <foreignObject>
            /* Here the image fallback */
        </foreignObject>
    </switch>
</svg>

关于如何使用这种技术的更多细节

所有其他SVG包含技术，将导致延迟显示SVG。

All the others SVG inclusion techniques, will result in a delay in the displaying of the SVG.

这篇关于为什么SVG对象总是在以后绘制？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！