SVG排版教程 | image元素与img元素有什么区别？

最新推荐文章于 2024-07-17 19:21:45 发布

懂点君

最新推荐文章于 2024-07-17 19:21:45 发布

阅读量292

点赞数

分类专栏：原创教程 | SVG公众号互动排版文章标签： svg 微信公众平台 svg排版公众号排版黑科技排版

转载请联系微信号：dong_dian_jun

本文链接：https://blog.csdn.net/h5course/article/details/130029877

版权

在SVG黑科技排版中，image元素和img元素都是用来显示图片，表面上来看他们好像没有什么区别，那到底是不是这样呢？懂点君来给大家演示一下。

演示案例

SVG排版演示案例中，分别使用image元素和img元素引入同一张图片，然后在手机上查看显示效果。


<section data-name="最外层的容器" style="overflow: hidden;font-size: 0;line-height: 0;author: dong_dian_jun;user-select: none;-webkit-user-select: none;-webkit-tap-highlight-color: transparent;" powered-by="懂点君">
    <!-- 使用img元素引入图片 -->
    <img src="https://mmbiz.qpic.cn/mmbiz_jpg/URGhbghw5oWULXbic8KGU3fbiaBmBsiaNMswF1hwLlD6pfWbMIcZk8WRnicFVXMrfImUCE1GCu8bLDEA9j6bP5ibzQw/0?wx_fmt=jpeg" alt="" /> 
    <!-- 使用image元素引入图片 -->
    <svg viewBox="0 0 800 800" style="display: block;width: 100%;author: dong_dian_jun;-webkit-user-select: none;user-select: none;-webkit-tap-highlight-color: transparent;" powered-by="懂点君">
        <