我可以使用JavaScript SVG库将SVG图像显示为div背景吗？ [英] Can I display an SVG image as a div background with a JavaScript SVG library?

问题描述

在HTML页面中，我想在 div 元素中使用SVG图像作为背景，其中 pre 元素上面有文本（背景）。背景图像应该与包含 div 一起缩放，同时保持宽高比。

In an HTML page, I want to use an SVG image as a background in a div element, with a pre element with text on top of of it (the background). The background image should scale with the containing div, while maintaining aspect ratio.

我可以用一个完成此任务SVG JavaScript库，例如 jQuery SVG / Raphaël / svgweb ？

Can I accomplish this task with one of the SVG JavaScript libraries, such as jQuery SVG / Raphaël / svgweb?

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

The kind of structure I'd like to add a background image to:

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

推荐答案

您可以将SVG图像用作CSS背景，如果您只想支持最近的浏览器，请使用 background-size 缩放图像并保持纵横比。这里的图像直接应用于 pre ，只是为了演示：

You can use an SVG image as a CSS background, providing you only want to support recent browsers, use background-size to scale the image and maintain the aspect ratio. Here the image is applied directly to the pre, just to 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那么你必须正如安德鲁姆建议的那样采用绝对定位的元素。

If you want to support IE8 and FF3.6 then you'll have to resort to absolutely positioned elements as andrewmu suggests.

这篇关于我可以使用JavaScript SVG库将SVG图像显示为div背景吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！