SVG公众号排版『点击放大显示和缩小隐藏图片』模板代码
模板效果
模板代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover" />
<title>公众号：懂点君 || 视频号：懂点君 || 微信号：dong_dian_jun</title>
<style type="text/css">*{margin:0;padding:0;}.rich_media_content{overflow:hidden;color:#333;font-size:17px;word-wrap:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;text-align:justify;position:relative;z-index:0;}.rich_media_content * {max-width:100%!important;box-sizing:border-box!important;-webkit-box-sizing:border-box!important;word-wrap:break-word!important;}</style>
</head>
<body>
<div class="rich_media_content" style="visibility: visible;" data-wechat="dong_dian_jun">
<section style="line-height: 0;font-size: 0px;-webkit-user-select: none;-webkit-tap-highlight-color: transparent;" data-wechat="dong_dian_jun" data-label="H5 & SVG定制咨询微信：dong_dian_jun">
<!-- 用户交互层 -->
<!-- 【需要修改】url图片路径 -->
<svg width="100%" viewBox="0 0 1080 1500" style="display: inline-block;weixin: dong_dian_jun;width: 100%;background: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQIKrACg3vibia5FDWibb3cBtTESymUAFxyxyo7Z6sIu6atVKSs42RAdcz5qCLBwrMenqJTooZaCSbeA/0?wx_fmt=png) no-repeat;background-size: 100%;pointer-events: none;-webkit-tap-highlight-color: transparent;user-select: none;vertical-align: top;weixin: dong_dian_jun;" data-wechat="dong_dian_jun" data-label="H5 & SVG定制咨询微信：dong_dian_jun">
<!-- 打开引导点击 -->
<!-- 【需要修改】cx和cy的圆心坐标点 -->
<g data-name="打开引导点击" data-wechat="dong_dian_jun">
<circle opacity="0.3" fill="#008C8C" cx="100" cy="100" r="40">
<animate attributeName="r" values="45;40;45" begin="0s" dur="0.5s" repeatCount="indefinite"></animate>
</circle>
<circle fill="#008C8C" cx="100" cy="100" r="30" data-wechat="dong_dian_jun">
<animate attributeName="opacity" values="1;0.5;1" begin="0s" dur="0.5s" repeatCount="indefinite"></animate>
</circle>
</g>
<g>
<!-- 放大的图片 -->
<!-- 【需要修改】url图片路径 -->
<foreignObject x="0" y="0" width="1080" height="1500" data-wechat="dong_dian_jun">
<svg width="200" height="1500" style="display: inline-block;weixin: dong_dian_jun;background-position: 0 0;weixin: dong_dian_jun;background-repeat: no-repeat;background-size: 100%;background-attachment: scroll;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQIKrACg3vibia5FDWibb3cBtT20VwJYGcEvU0MhbAibsFLJg9wSUpNc1NMhH778QSHakgGkMymW544Aw/0?wx_fmt=jpeg);vertical-align: top;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;pointer-events: none;" opacity="0">
<!-- 关闭引导点击 -->
<!-- 【需要修改】cx和cy的圆心坐标点 -->
<g data-name="关闭引导点击" data-wechat="dong_dian_jun">
<circle opacity="0.3" fill="#fe2c55" cx="540" cy="1300" r="40">
<animate attributeName="r" values="45;40;45" begin="0s" dur="0.5s" repeatCount="indefinite"></animate>
</circle>
<circle fill="#fe2c55" cx="540" cy="1300" r="30">
<animate attributeName="opacity" values="1;0.5;1" begin="0s" dur="0.5s" repeatCount="indefinite"></animate>
</circle>
</g>
<!-- 触发区域 -->
<g data-name="备注" data-wechat="dong_dian_jun">
<rect x="0" y="0" width="200" height="200" fill="yellow" opacity="0" style="weixin: dong_dian_jun;pointer-events:visible;">
<set attributeName="visibility" from="visible" dur="1s" to="hidden" fill="remove" begin="click"></set>
</rect>
<rect x="440" y="1200" width="200" height="200" fill="red" opacity="0" style="weixin: dong_dian_jun;pointer-events:visible;">
<animate attributeName="x" begin="touchstart+0.01s" dur="1s" values="10000"></animate>
<set attributeName="visibility" from="visible" dur="0.01s" to="hidden" fill="remove" begin="touchstart"></set>
</rect>
</g>
<!-- 放大动画 -->
<animate attributeName="width" begin="click" calcMode="spline" dur="6s" fill="freeze" values="200;1080;1080" keyTimes="0;0.02;1" keySplines="0.4 0 0.5 1.0;0.4 0 0.5 1.0" data-wechat="dong_dian_jun"></animate>
<!-- 缩小动画 -->
<animate attributeName="width" begin="touchstart+0.04s" calcMode="spline" dur="6s" fill="freeze" values="1080;200;200" keyTimes="0;0.02;1" keySplines="0.4 0 0.5 1.0;0.4 0 0.5 1.0" data-wechat="dong_dian_jun"></animate>
<!-- 显示动画 -->
<animate attributeName="opacity" begin="click" calcMode="spline" dur="10s" fill="freeze" values="0;1;1" keyTimes="0;0.02;1" keySplines="0.4 0 0.5 1.0;0.4 0 0.5 1.0" data-wechat="dong_dian_jun"></animate>
<!-- 隐藏动画 -->
<animate attributeName="opacity" begin="touchstart+0.04s" calcMode="spline" dur="10s" fill="freeze" values="1;0;0" keyTimes="0;0.02;1" keySplines="0.4 0 0.5 1.0;0.4 0 0.5 1.0" data-wechat="dong_dian_jun"></animate>
</svg>
</foreignObject>
</g>
</svg>
<!-- 事件抵消层 -->
<section style="display: block;weixin: dong_dian_jun;height: 0;pointer-events: none;transform: rotate(180deg);" data-wechat="dong_dian_jun">
<svg viewBox="0 0 1080 1500" style="display: block; transform: rotate(180deg);">
<!-- 消除touchstart事件 -->
<rect opacity="0" x="0" y="0" width="200" height="200" fill="blue" style="weixin: dong_dian_jun;pointer-events:visible;">
<animate attributeName="x" begin="touchstart" dur="0.4s" values="10000" data-wechat="dong_dian_jun"></animate>
</rect>
</svg>
</section>
</section>
</div>
</body>
</html>
强力驱动