资讯专栏INFORMATION COLUMN

HTML中嵌入SVG图片的N种方式

NickZhou / 919人阅读

摘要:完美总结中嵌入图片的种方式在解决这个问题的过程中,顺便查了下,发现除了这个是最容易想到的因为图片也是图片嘛。不过和标签一样,无法显示内嵌的使用标签标签是新增的一个专门显示图片的标签。

最近用到了个SVG图片,里面还是带标签的,想要把它嵌入到HTML中还是有些工作要做的。

经历

最初的图片是这样写的:





    

    

    这是百度
    ?

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内嵌的.

6. 使用picture标签


    
    

标签是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

相关文章

  • H5 分层屏幕适配

    摘要:单屏适配有或,多屏常见是依宽。整层适配为确保各层元素同步缩放,不走样,每层的适配区应当等于设计稿大小。直接的实现就是构造和适配区一样尺寸的容器,整层适配。值为时对应适配。这下妈妈再也不用担心我还原问题屏幕适配问题了。 转载请注明出处:http://hai.li/2018/03/14/h5-screen-adaptation.html 设计大大,这次真的是 按设计稿来 了,因为现在,任何...

    Arno 评论0 收藏0
  • SVG可伸缩矢量图形

    摘要:可伸缩的矢量图形是对画该图形时的一些路径,做出精准的,必要的与分辨率无关的一种描述。 SVG可伸缩的矢量图形SVG是对画该图形时的一些路径,做出精准的,必要的与分辨率无关的一种描述。即对矢量图的描述在此安利一个svg绘图的网址,可以直接手动绘图,然后生成相关的svg描述,即可实现图片 属于所见所得的方式 有两种方式在Adobe系列软件中Illustrator可以直接生成svg的相关代码...

    孙淑建 评论0 收藏0
  • 翻译 | 编写SVG口袋指南(上)

    摘要:元素元素归属于容器和结构元素,在文档内允许嵌套使用独立的片段。如果包含葡萄的组被移动到文档的末尾,它将出现在西瓜的前面。例如,将葡萄的茎的路径移动到组的末尾将导致茎在顶部。 作者:DDU(沪江前端开发工程师)本文是原文翻译,转载请注明作者及出处。 简介 Scalable Vector Graphics (SVG)是在XML中描述二维图形的语言。这些图形由路径,图片和(或)文本组成,并能...

    Brenner 评论0 收藏0
  • 翻译 | 编写SVG口袋指南(上)

    摘要:元素元素归属于容器和结构元素,在文档内允许嵌套使用独立的片段。如果包含葡萄的组被移动到文档的末尾,它将出现在西瓜的前面。例如,将葡萄的茎的路径移动到组的末尾将导致茎在顶部。 作者:DDU(沪江前端开发工程师)本文是原文翻译,转载请注明作者及出处。 简介 Scalable Vector Graphics (SVG)是在XML中描述二维图形的语言。这些图形由路径,图片和(或)文本组成,并能...

    linkFly 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<