原标题：SVG排版公众号文章『点击同时显示图片与音乐播放』模板代码
<section style=”overflow: hidden;width: 100%;height: 100%;visibility: visible;” data-share=”公众号：懂点君”>
<!– 第二张图片 –>
<svg width=”100%” height=”100%” style=”visibility: visible;background: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqSiak2l2UzsVHxhomBS2bjpEPTxOt0xNE1dSzhJOrqnpI7WziaxSSxAKHiccAY7GHGIkSAYad1xlaibdw/0?wx_fmt=gif;)
no-repeat top center;background-size: 100%;background-position: 0 0;” viewBox=”0 0 1024 2225″>
<g data-share=”公众号：懂点君”>
<!– 第一张图片 –>
<foreignObject width=”100%” height=”100%” x=”0″ y=”0″>
<svg style=”visibility: visible;background: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqSiak2l2UzsVHxhomBS2bjpEgkFeFiajNpSaqyAJd2gaUD6ibCgtPjv2TAfcyeibNR5VzibbyCDdhiagjnw/0?wx_fmt=jpeg)
no-repeat top center;background-size: 100%;pointer-events: none;” viewBox=”0 0 1024 2225″ xmlns=”http://www.w3.org/2000/svg”>
</svg>
</foreignObject>
<!– 音乐区域 –>
<foreignObject width=”100%” height=”100%” x=”0″ y=”0″>
<section style=”overflow: hidden;pointer-events: painted;opacity: 0;transform: scale(90) translate(-462px, 19px);”>
<!– 需要替换如下音乐代码（具体步骤请看视频教程） –>
<section><qqmusic class=”js_editor_qqmusic js_uneditable” musicid=”213874992″ mid=”001Mi6C00aNunH” albumurl=”https://y.gtimg.cn/music/photo_new/T002R68x68M000003x0x0W02puoP.jpg” audiourl=”http://isure6.stream.qqmusic.qq.com/C200004VUx6R2b7AMH.m4a?guid=2000001731&vkey=F5565B900A3BC11A2DE3C4CF1499B08A96E19BA02F27BDA9B18FAA349BE61146EB2B66D5545097C71376BE16E58F8721D427D1351DD9CFBA&uin=&fromtag=50″ music_name=”奔跑” singer=”羽泉 - 嗨，唱起来 第2期” play_length=”164″ src=”/mp/readtemplate?t=app_editor/music&singer=%E7%BE%BD%E6%B3%89%20-%20%E5%97%A8%EF%BC%8C%E5%94%B1%E8%B5%B7%E6%9D%A5%20%E7%AC%AC2%E6%9C%9F&music_name=%E5%A5%94%E8%B7%91&albumurl=https%3A%2F%2Fy.gtimg.cn%2Fmusic%2Fphoto_new%2FT002R68x68M000003x0x0W02puoP.jpg&musictype=1″ musictype=”1″ otherid=”001Mi6C00aNunH” albumid=”003x0x0W02puoP” jumpurlkey=”” data-pluginname=”insertaudio”></qqmusic><span id=”qqmusic_main_213874992_2″ class=”js_wap_qqmusic db pages_reset music_area “> <span class=”tc tips_global unsupport_tips” style=”display:none;”> 当前浏览器不支持播放音乐或语音，请在微信或其他浏览器中播放 </span> <span class=”db music_card appmsg_card_context appmsg_card_active”> <a id=”qqmusic_home_213874992_2″ class=”music_card_bd”> <span class=”music_card_title”>奔跑</span> <span class=”music_card_desc”>羽泉 - 嗨，唱起来 第2期</span> <span class=”music_card_source “> <img src=”https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/images/icon/appmsg/qqmusic/icon_qqmusic_source531a3f.svg” alt=””></span> </a> <span id=”qqmusic_play_213874992_2″ class=”music_card_ft”> <i class=”weui-play-btn”></i> <!– <img src=”//res.wx.qq.com/mmbizwap/zh_CN/htmledition/images/icon/appmsg/qqmusic/icon_qqmusic_default.2x531a3f.png” alt=”” class=”pic_qqmusic_default”> –> <img src=”https://y.gtimg.cn/music/photo_new/T002R90x90M000003x0x0W02puoP.jpg” data-autourl=”http://isure6.stream.qqmusic.qq.com/C200004VUx6R2b7AMH.m4a?guid=2000001731&vkey=F5565B900A3BC11A2DE3C4CF1499B08A96E19BA02F27BDA9B18FAA349BE61146EB2B66D5545097C71376BE16E58F8721D427D1351DD9CFBA&uin=&fromtag=50″ data-musicid=”213874992″ class=”music_card_thumb” alt=””> </span> </span> </span></section>
</section>
</foreignObject>
<!– 隐藏第一张图片的动画 –>
<animate attributeName=”opacity” begin=”touchstart+0.3s” dur=”380s” keyTimes=”0;0.0009;1″ values=”1;0;0″ fill=”freeze” restart=”never”></animate>
</g>
</svg>
</section>
<!– 控制点击区域大小 –>
<section style=”height: 0px;margin-top: -2px;line-height: 0;font-size:0;pointer-events: none;transform: rotate(180deg);” data-share=”公众号：懂点君”>
<svg style=”transform: rotate(180deg);” viewBox=”85 0 830 1905″ xmlns=”http://www.w3.org/2000/svg”>
<path fill=”#000″ opacity=”0″ style=”pointer-events: visible;” d=”M-0,0v1890h1100V0.5H-0.5z M600,1600H374v-409h252V1591z”></path>
</svg>
责任编辑：