SVG排版教程 | image元素如何正确引入图片？

最新推荐文章于 2023-11-24 15:06:34 发布

懂点君

最新推荐文章于 2023-11-24 15:06:34 发布

阅读量330

点赞数

分类专栏：原创教程 | SVG公众号互动排版文章标签：前端 svg 公众号 svg排版新媒体运营

转载请联系微信号：dong_dian_jun

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

版权

老铁留言：SVG公众号排版遇到image元素通过xlink:href属性引入图片，在公众号图文里无法正常显示，这是为什么？懂点君写个案例给大家看看。

代码案例

案例中分别通过xlink:href属性和href属性引入图片，然后在本地上和公众号上查看显示效果。


<svg viewBox="0 0 1200 1200" style="display: block;width: 100%;author: dong_dian_jun;pointer-events: none;-webkit-user-select: none;user-select: none;-webkit-tap-highlight-color: transparent;" powered-by="懂点君">
    <!-- href属性引入 -->
    <image x="0" y="0" width="600" height="600" href="https://mmbiz.qpic.cn/mmbiz_png/URGhbghw5oVWvMbXBTwu0SE0XpQkgAuVtpDf5RuD6O4hzibxI186E3r9viboicZDaRYSLvj6vHicxSq4vkiaMYB8gTA/0?wx_fmt=png"></image>
    <!-- xlink:href属性引入 -->
    <image x="600" y="600" width="600" height="600" xlink:href="https://mmbiz.qpic.cn/mmbiz_png/URGhbg