为什么SVG对象总是在以后绘制？

Question

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

<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弹出，导致可耻的口吃负荷。

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

Answer 1

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

CSS背景技术

SVG将在CSS中引用。因为CSS已加载到 head 部分，所以它将绘制出现在HTML代码中的SVG。

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

More details on how to use this technique

使用 foreignObject 技术

的内联SVG

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

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

More details on how to use this technique

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