html – 使内联svg填满整个屏幕

html – 使内联svg填满整个屏幕,第1张

概述我已经购买了一个svg图形,我已经导出到.svg文件,因此它可以用于内联 HTML.我已将其插入< body>我的文档的标记,但现在我希望它填充屏幕的全宽和全高.我已经尝试设置< svg>的宽度和高度属性,位置:绝对和上,右,下,左:0,viewBox设置为“0 0 screen_width screen_height”,将.svg文件加载为图像并强制图像为满-window using posit 我已经购买了一个svg图形,我已经导出到.svg文件,因此它可以用于内联 HTML.我已将其插入< body>我的文档的标记,但现在我希望它填充屏幕的全宽和全高.我已经尝试设置< svg>的宽度和高度属性,位置:绝对和上,右,下,左:0,vIEwBox设置为“0 0 screen_wIDth screen_height”,将.svg文件加载为图像并强制图像为满-window using position:absolute nad top,right,bottom,left:0.
但是没有任何作用.

这是svg本身:http://pastebin.com/y8kqf1bD

我已经尝试了Full width and height SVG的所有选项,但它们也不起作用.

你知道我怎么能这样做?

非常感谢提前!

解决方法 < SVG>使用高度和宽度属性来调整元素的大小
<svg height="100%" wIDth="100%"></svg>

填满屏幕.

您还需要设置< HTML>和< body> Tags style =“wIDth:100%; height:100%”以确保它们覆盖屏幕.这是一个完整的全屏矩形:

<HTML ><body >  <svg height="100%" wIDth="100%">    <rect fill="lime" wIDth="100%" height="100%"/>  </svg></body></HTML>

如果需要,您也可以通过样式表执行此 *** 作.

HTML,body,svg {  wIDth: 100%;  height: 100%;  margin: 0;}
<HTML><body>  <svg>    <rect fill="lime" wIDth="100%" height="100%"/>  </svg></body></HTML>
总结

以上是内存溢出为你收集整理的html – 使内联svg填满整个屏幕全部内容,希望文章能够帮你解决html – 使内联svg填满整个屏幕所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1117738.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-29
下一篇 2022-05-29

发表评论

登录后才能评论

评论列表(0条)

保存