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

Question

在 HTML 页面中，我想在 div 元素中使用 SVG 图像作为背景，并在其顶部添加带有文本的 pre 元素(背景)。背景图片应随包含的 div 缩放，同时保持宽高比。

我能否使用 SVG JavaScript 库之一完成此任务，例如 jQuery SVG/Raphaël/svgweb ？

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

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

Answer 1

您可以使用 SVG 图像作为 CSS 背景，前提是您只想支持最近的浏览器，use background-size缩放图像并保持纵横比。这里图像直接应用于 pre，只是应用于 demonstrate :

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，那么您将不得不像 andrewmu 所建议的那样求助于绝对定位的元素。