摘要:完美总结中嵌入图片的种方式在解决这个问题的过程中,顺便查了下,发现除了这个是最容易想到的因为图片也是图片嘛。不过和标签一样,无法显示内嵌的使用标签标签是新增的一个专门显示图片的标签。
最近用到了个SVG图片,里面还是带
最初的图片是这样写的:
p.s. 先拿百度的图片来凑个数
显示效果应该是:
但是通过后却显示成了:
只显示了图片左上角那部分有木有!这张图片是按2倍图做的,应该要缩小一半,虽然给的元素加了宽高,但是却没能把svg内容给缩放!
怎办?又找了半天解决方案,发现这种情况应该设置svg图片的viewBox -- 在元素上增加viewBox="0 0 660 342"即可解决这个问题:
viewBox属性允许指定一个给定的一组图形伸展以适应特定的容器元素。
-- viewBox - MDN
完美!
总结HTML中嵌入SVG图片的N种方式在解决这个问题的过程中,顺便查了下,发现除了
这个是最容易想到的 -- 因为svg图片也是图片嘛。
需要注意的是,svg里面带的
注意使用viewBox,标签的兼容性也很不错的,是个不错的选择。
4. 使用object标签与类似,也要注意配置viewBox.
5. 使用div的背景图片svg图片是可以作为背景图片的。不过和标签一样,无法显示SVG内嵌的
标签是HTML5新增的一个专门显示图片的标签。
注意设置标签的属性srcset而非src. 此外必需要添加一个标签,不过可以在标签中指定另外一张图片,以便在浏览器无法显示指定的图片的时候显示标签中的图片。
和一样,无法显示SVG内嵌的
效果展示:https://clarencep.github.io/f...
源代码:https://github.com/clarencep/...
首发地址:https://www.clarencep.com/201...,转载请注明出处
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/51189.html
摘要:可伸缩的矢量图形是对画该图形时的一些路径,做出精准的,必要的与分辨率无关的一种描述。 SVG可伸缩的矢量图形SVG是对画该图形时的一些路径,做出精准的,必要的与分辨率无关的一种描述。即对矢量图的描述在此安利一个svg绘图的网址,可以直接手动绘图,然后生成相关的svg描述,即可实现图片 属于所见所得的方式 有两种方式在Adobe系列软件中Illustrator可以直接生成svg的相关代码...
摘要:元素元素归属于容器和结构元素,在文档内允许嵌套使用独立的片段。如果包含葡萄的组被移动到文档的末尾,它将出现在西瓜的前面。例如,将葡萄的茎的路径移动到组的末尾将导致茎在顶部。 作者:DDU(沪江前端开发工程师)本文是原文翻译,转载请注明作者及出处。 简介 Scalable Vector Graphics (SVG)是在XML中描述二维图形的语言。这些图形由路径,图片和(或)文本组成,并能...
摘要:元素元素归属于容器和结构元素,在文档内允许嵌套使用独立的片段。如果包含葡萄的组被移动到文档的末尾,它将出现在西瓜的前面。例如,将葡萄的茎的路径移动到组的末尾将导致茎在顶部。 作者:DDU(沪江前端开发工程师)本文是原文翻译,转载请注明作者及出处。 简介 Scalable Vector Graphics (SVG)是在XML中描述二维图形的语言。这些图形由路径,图片和(或)文本组成,并能...
阅读 1135·2021-11-11 16:54
阅读 835·2021-10-19 11:44
阅读 1304·2021-09-22 15:18
阅读 2396·2019-08-29 16:26
阅读 2914·2019-08-29 13:57
阅读 3065·2019-08-26 13:32
阅读 1055·2019-08-26 11:58
阅读 2294·2019-08-26 10:37