如何制作拉伸而不是平铺的 SVG 背景?

编程入门行业动态更新时间:2024-10-26 14:29:04

本文介绍了如何制作拉伸而不是平铺的 SVG 背景?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

我有一个想要使用的 SVG 背景，但我不知道如何让它在整个页面上延伸，更不用说作为背景了.有人可以帮忙吗?

I have a SVG background I want to use, and I can't figure out how to make it stretch over the whole page, let alone be a background. Could someone help?

(W3Schools 页面，无论是 SVG 还是背景，都没有给我任何信息).

(The W3Schools pages, on both SVG nor on backgrounds, gave me nothing).

推荐答案

我想您是在问是否可以使 SVG 像 PNG 那样扭曲和拉伸.不幸的是，这并非不可能，除非您的 SVG 代码本身就是这样设置的(例如，如果您的 SVG 是由 illustrator 生成的，他们根本不会这样做).

I think you are asking if you can make the SVG to distort and stretch like a PNG would do. This is unfortunately not impossible unless your SVG codes themselves are set up that way (say if your SVG are generated by illustrator, they simply won't do it).

目前唯一的方法是手动编码 SVG.例如，您可以告诉 SVG 将左上角连接到右下角，而不是绘制具有设定角度的对角线.如果您有 SVG，我也许可以告诉您如何手动编码.(如果你的 SVG 像 Phrogz 的老虎一样复杂，那很可能是不可能的......)

The only way to do it at the moment is to hand code the SVG. For example, instead of drawing a diagonal line with a set angle you can tell the SVG to connect top left corner to bottom right corner. If you have the SVG, I might be able to tell you how to hand code it. (If your SVG is complicated like Phrogz's tiger, it likely won't be possible...)

同样对于大多数现代浏览器，您只需将 preserveAspectRatio="none" 属性添加到 svg 标签即可.如果你有 .svg 文件，你需要用 sublime text 打开文件并将代码添加到 svg 标签(类似于 <svg version="1.1"...(数百代码行)，你将使它<svg version="1.1"preserveAspectRatio="none"...(数百行代码跟随).

Also for most modern browsers, you can simply add preserveAspectRatio="none" attribute to the svg tag. If you have .svg files, you need to open the file with sublime text and add the code to the svg tag (something like <svg version="1.1"...(hundreds of lines of codes followed) and you will make it <svg version="1.1" preserveAspectRatio="none"...(hundreds of lines of codes followed).