html - 如何制作可拉伸(stretch)而不是平铺的 SVG 背景?

标签 html css svg

我有一个我想使用的 SVG 背景,但我不知道如何让它覆盖整个页面,更不用说作为背景了。有人可以帮忙吗?

(W3Schools 页面,无论是在 SVG 上还是在背景上,都没有给我任何信息)。

<object data="background.svg" type="image/svg+xml" width="100%" height="100%">不完全有效。

最佳答案

我想您是在问是否可以使 SVG 像 PNG 那样扭曲和拉伸(stretch)。不幸的是,这并非不可能,除非您的 SVG 代码本身就是这样设置的(比如说,如果您的 SVG 是由插画师生成的,他们根本不会这样做)。

目前唯一的方法是手动编写 SVG 代码。例如,您可以告诉 SVG 将左上角连接到右下角,而不是绘制具有设定 Angular 对 Angular 线。如果您有 SVG,我也许可以告诉您如何手动编码。 (如果您的 SVG 像 Phrogz 的老虎一样复杂,则可能无法实现...)

同样对于大多数现代浏览器,您可以简单地添加 preserveAspectRatio="none"属性为 svg标签。如果你有 .svg文件,您需要使用 sublime 文本打开文件并将代码添加到 svg 标签(类似于 <svg version="1.1"...(hundreds of lines of codes followed),您将使其成为 <svg version="1.1" preserveAspectRatio="none"...(hundreds of lines of codes followed)

关于html - 如何制作可拉伸(stretch)而不是平铺的 SVG 背景?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11658173/

相关文章:

python - 使用 Python 编写的谷歌图像抓取器与网络浏览器之间的不同 html 代码结果(UI)

javascript - 使用 D3 更新 SVG 元素 Z 索引

html - Gmail 在不应该的时候将电子邮件签名居中

javascript - Pie chart.js - 显示所有 3 个分段边框

html - CSS 表格布局的单元格之间有很大的空间

html - 顶部对齐两个具有不同字体大小的跨度

html - 如何使用 css/html 隐藏带 src 的图像,如 *-1.jpg 或 *-1.gif?

javascript - 为文本提供背景颜色以匹配每行文本的宽度

jquery - SVG 工具提示隐藏/显示

text - 带有弯曲文本路径的 SVG 文本对齐问题