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

在一个HTML页面中，我想在一个div元素中使用一个SVG图像作为背景，使用pre元素，并在其上面有文本（背景）。背景图像应与包含div的比例缩放，同时保持宽高比。可以使用JavaScript SVG库将SVG图像显示为div背景吗？

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

的一种结构，我想背景图片添加到：

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

来源

2011-09-05 aknuds1

你需要支持哪些浏览器，大多数只增加了在过去12个月左右使用SVG作为背景图片的支持。 – robertc

@robertc目前我专注于IE9，当前的Chrome和当前的Firefox。我一直无法使IE9和Chrome无法将SVG作为背景图像显示出来:(尽管使用.png替换.svg并且它可以工作。 – aknuds1

您的问题听起来像是您想要使用JavaScript生成SVG，然后使用它作为背景，是这样，还是你只想引用现有的SVG文件作为独立文件托管并将其用作背景？ – Phrogz

您可以使用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建议以绝对定位的元素。

来源

2011-09-05 14:30:40 robertc

明天我会试试这个。 – aknuds1

我发现现在SVG对我来说不适用于'background-image'的原因是Visual Studio开发服务器为MIME类型为'application/octet-stream'的SVG提供服务。另一方面，如果我指向维基媒体上的Konqi SVG，SVG会在浏览器中呈现:(这是一个已知问题吗？任何想法如何强制正确提供SVGs？ – aknuds1

@ aknuds1什么版本的Visual Studio/.Net/IIS？2010/4/7.5在web.config中添加['mimeMap']（http://blogs.iis.net/bills/archive/2008/03/25/how-to-add-mime-types -with-iis7-web-config.aspx）在2008/3.5/6中，你需要在IIS管理中的HTTP Headers下进行配置 – robertc

~~SVG图像是他们不能一个div背景DOM的一部分，而不是他们的元素，就像一个div 。~~

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

~~为了获得缩放比例，你应该使用一些数学来保持宽高比，应该很容易，这个字的比例是涉及的。这将是如何做到这一点的线索。~~

编辑

它看起来像我错了 http://www.broken-links.com/2010/06/08/using-svg-in-background-image/它可以是一个背景。

来源

2011-09-05 13:38:50 austinbv

你能否概述你的建议解决方案你可以使用包含的div来制作SVG缩放吗？ – aknuds1

我补充道，你如何实现它可以改变你实际上正在尝试完成的内容 – austinbv

你是否推荐一个特定的库？ – aknuds1

你总是可以作弊并使用position: absolute将两个div放在同一个地方。

来源

2011-09-05 14:23:36 andrewmu

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

回答

相关问题