我可以使用JavaScript SVG库将SVG图像显示为div背景吗？

Question

在HTML页面中,我想使用SVG图像作为div元素中的背景,其中一个pre元素的文本位于其顶部(背景).背景图像应与包含一起缩放div,同时保持纵横比.

我可以使用其中一个SVG JavaScript库完成此任务,例如jQuery SVG/Raphaël/svgweb吗？

我想要添加背景图像的结构类型:

<div>
  <pre>Some text...</pre>
</div>

Answer 1

您可以将SVG图像用作CSS背景,只需要支持最近的浏览器,用于background-size缩放图像和保持纵横比.这里的图像直接应用于pre,只是为了演示:

pre {
    outline: 2px dashed black;
    padding: 1em;
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/8/84/Konqi_svg.svg);
    background-repeat: no-repeat;
    background-size: cover;
}

如果你想支持IE8和FF3.6那么你将不得不诉诸于安德鲁姆建议的绝对定位元素.