我有一个SVG背景图想要使用,但是我无法弄清如何将其拉伸到整个页面并作为背景。有人能帮忙吗?
(W3Schools的SVG和背景页面都没有给我任何帮助)。
<object data="background.svg" type="image/svg+xml" width="100%" height="100%">
并不能完全解决问题。
我认为你想知道是否可以使SVG像PNG一样扭曲和拉伸。不幸的是,除非您的SVG代码本身就是这样设置的(例如,如果您的SVG是由Illustrator生成的),否则这是不可能的。
目前唯一的方法是手动编写SVG代码。例如,您可以告诉SVG将左上角连接到右下角,而不是以固定角度绘制对角线。如果您有SVG文件,我可能能够告诉您如何手动编写代码。(如果您的SVG像Phrogz的老虎那样复杂,可能不可能做到...)
此外,对于大多数现代浏览器,您只需向svg
标记添加preserveAspectRatio="none"
属性即可。如果您有.svg
文件,您需要使用Sublime Text打开文件,并将代码添加到svg标记中(类似于<svg version="1.1"...(跟随数百行代码)
,然后将其更改为<svg version="1.1" preserveAspectRatio="none"...(跟随数百行代码)
)。
我刚刚弄清楚了。在你的 <svg>
标签上,你需要:
width
和 height
属性,例如:width="375" height="137"
preserveAspectRatio="none"
viewBox="0 0 375 137"
在你的 CSS 文件中,对包含 SVG 背景的元素:
background-size: 100% 100%;
对我来说关键问题是我的 SVG 文件没有包含视口属性。
preserveAspectRatio="none"
并删除宽度和高度。 - herrfischer您想使用CSS3 background-size
属性:
div {
height:200px;
background:url(my.svg);
background-size: 100% auto; /* Fill width, retain proportions */
}
如果您希望背景图案在填充容器时不按比例缩放(即拉伸和压缩),则可以使用background-size: 100% 100%
。
<svg>
标签上应用preserveAspectRatio="none"
,将其设置为背景图像,并将背景大小设置为100%
,它会被拉伸。这不就像PNG图片一样被拉伸了吗? - David Rhoderickxml:space="preserve"
,这阻止了背景图片拉伸以适应空间。我看到这已经被弃用了;然而,Illustrator仍然会添加它。一旦我将该属性更改为xml:space="preserve"
并添加preserveAspectRatio="none"
,图像就会按预期缩放。