在SVG黑科技排版中，image元素和img元素都是用來(lái)顯示圖片，表面上來(lái)看他們好像沒(méi)有什么區(qū)別，那到底是不是這樣呢？懂點(diǎn)君來(lái)給大家演示一下。

演示案例

SVG排版演示案例中，分別使用image元素和img元素引入同一張圖片，然后在手機(jī)上查看顯示效果。

顯示效果
淺色模式下顯示的效果：兩個(gè)元素引入的圖片都正常顯示；

深色模式下顯示的效果：image元素引入的圖片顯示正常，能夠適配深色模式；img元素引入的圖片變暗，不能適配深色模式（第一張圖片）；

點(diǎn)擊交互
在手機(jī)上打開(kāi)演示案例，分別去點(diǎn)擊兩張圖片，查看哪張圖片會(huì)有交互效果。

點(diǎn)擊img元素引入的圖片會(huì)彈出圖片，點(diǎn)擊image元素引入的圖片沒(méi)有任何反應(yīng)。

分析總結(jié)