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

在HTML页面中，我想在

div

元素中使用SVG图像作为背景，并在

pre

元素上添加文本（背景）。背景图像应与包含的

div

缩放，同时保持纵横比

我可以用一个SVG JavaScript库来完成这个任务吗，比如/

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

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

一些文字。。。

SVG图像是DOM的一部分，它们不能是div背景，而是与div一样的元素

您可以将SVG图像放置在透明div后面，以获得背景的错觉。这只需要将SVG和内容放置在适当的位置

要获得缩放，你应该使用一些数学来保持纵横比，这应该很容易，因为涉及到单词比率。这将是如何做到这一点的线索

编辑

看来我错了

---

它可以是一个背景。

你可以一直作弊，使用

位置：绝对

将两个

div

放在同一个位置。

你可以使用SVG图像作为CSS背景，只要你只想支持最新的浏览器，就可以缩放图像并保持纵横比。在这里，图像直接应用于

pre

，仅用于：

---

如果你想支持IE8和FF3.6，那么你必须像andrewmu建议的那样使用绝对定位的元素。

你能概述一下你建议的解决方案吗？你能用包含的div来缩放SVG吗？我添加了这个。您实现它的方式可能会与您实际想要实现的有所不同。您推荐一个特定的库吗？我喜欢raphael，但它确实取决于您需要什么。我想我需要一些建议，说明如何将SVG和透明的

div

元素放在彼此之上，在包含

div

的浏览器中。您需要支持哪些浏览器，在过去12个月左右的时间里，大多数浏览器只增加了对使用SVG作为背景图像的支持。@robertc目前我主要关注IE9、当前的Chrome和当前的Firefox。我还不能让IE9和Chrome都显示SVG作为背景图像，不过：（将.svg替换为.png，它就可以工作了。您的问题让人觉得您想使用JavaScript生成svg，然后将其用作背景。是这样，还是您只想引用作为独立文件托管的现有svg文件并将其用作背景？@Phrogz我想加载现有svg图像。我现在发现n SVG不适用于我，因为

背景图像

是Visual Studio开发服务器为SVG提供MIME类型为“application/octet stream”的服务。另一方面，如果我指向wikimedia上的Konqi SVG，SVG将在浏览器中呈现：（这是一个已知的问题吗？知道如何强制正确服务SVG吗？@aknuds1 Visual Studio/.Net/IIS的哪个版本？在2010/4/7.5中添加一个。在2008/3.5/6中，您需要在IIS管理中的HTTP头下配置它。我使用的是Visual Studio 2010 Ultimate/.Net 4.0。我在这个开发盒上没有使用IIS。VS dev服务器支持mimeMap吗是否设置或类似？@aknuds1我不确定，我只在IIS中使用过它，请尝试一下。仔细查看后，似乎标准VS dev服务器（Cassini）不支持此类配置。但是，替换版本支持。我将尝试一下，谢谢！

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;
}