SVG排版教程 | image元素与img元素有什么区别?
发布于 2 年前 作者 guiying99 4464 次浏览 来自 分享

在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="懂点君">
        <image x="0" y="0" width="800" height="800" href="https://mmbiz.qpic.cn/mmbiz_jpg/URGhbghw5oWULXbic8KGU3fbiaBmBsiaNMswF1hwLlD6pfWbMIcZk8WRnicFVXMrfImUCE1GCu8bLDEA9j6bP5ibzQw/0?wx_fmt=jpeg"></image>
    </svg>
</section>  

显示效果

浅色模式下显示的效果:两个元素引入的图片都正常显示;

深色模式下显示的效果:image元素引入的图片显示正常,能够适配深色模式;img元素引入的图片变暗,不能适配深色模式(第一张图片);

点击交互

在手机上打开演示案例,分别去点击两张图片,查看哪张图片会有交互效果。

点击img元素引入的图片会弹出图片,点击image元素引入的图片没有任何反应。

分析总结

推荐阅读

1.【SVG案例库】SVG公众号排版交互图文案例汇总

2. image元素如何正确引入图片?

3.【展开系列】SVG排版公众号交互图文案例库  

回到顶部