SVG互动排版公众号图文『路径动画与描边动画』模板代码
模板效果
模板代码
<section style="overflow: hidden;line-height: 0;" data-author="公众号：懂点君">
<!-- 内容区域 -->
<section style="height: 0;" data-author="公众号：懂点君">
<svg viewBox="0 0 1000 4300" style="display: block;width: 100%;background: #fff url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqRph4APkfFswMI0G9ibxF0r4sf6aWkiaUOBPz715ZUZShET7wjMMciahpoXZIyfOlxsE6Tyn99JKA2Mw/0?wx_fmt=png) center center no-repeat;background-size: 100% 100%;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;">
<!-- 从(574.8, 755)坐标开始画起；3815.56为路径总长；-->
<g transform="translate(574.8 755)" stroke-dasharray="3815.56,3815.56" stroke-dashoffset="3815.56" data-author="公众号：懂点君">
<!-- 实现绘制路径动画的效果 -->
<animate attributeType="CSS" attributeName="stroke-dashoffset" begin="click+0.5s" from="3815.56" to="0" dur="20s" fill="freeze"></animate>
<g data-author="公众号：懂点君">
<!-- path从原点(0, 0)开始，方便操作 -->
<path fill="none" stroke="#fff" stroke-width="6" stroke-miterlimit="10" d="M0,0C-1-15.62,14.89-26.34,28.67-33.76,81.65-62.26,134-93,179-132.91s82.57-89.92,99.93-147.51c9.95-33,12.35-71.2-6.75-99.94-15.9-23.94-46.12-37.5-74.58-33.49-16.3,2.3-31.38,9.76-45.85,17.6q-25.38,13.74-49.62,29.49c-2,1.32-4.34,2.71-6.71,2.23s-4-2.71-5.62-4.53c-6.89-7.65-17.8-9.95-28-11.57a600.5,600.5,0,0,0-71.06-7c-6.07-.24-12.33-.36-18,1.85-6.34,2.47-11.24,7.59-15.68,12.75C-57.65-356-70-336.4-76.11-314.68s-5.63,45.76,4.19,66.08C-67-238.48-60-229.57-54.06-220c7.12,11.32,12.81,23.53,20.29,34.62,21.18,31.43,54.94,51.66,87.6,70.88C44.72-99.7,27.27-92.6,11-86.43L-39.28-67.38c-16.41,6.22-33.57,13-44.79,26.46C-101.67-19.76-99.49,11-96.36,38.35c3.59,31.39,12.27,63.84,7.58,95.09-.57,3.76-1.65,7.74-4.58,10.18-2.56,2.13-6.25,2.81-8.32,5.42s-1.85,6.41-1.61,9.79a157.07,157.07,0,0,1-16.92,82.37c-3.34,6.54-7.15,12.9-9.39,19.9-6.72,21.06,1.88,43.78,11.86,63.5A426.17,426.17,0,0,0-23,448.36C7.11,475.5,2.86,520.41-1,560.78s-12.1,80.87-7.38,121.15c6.27,53.41,35.06,101.89,70.27,142.54s77,74.94,115.66,112.36c35.29,34.21,69.22,73.53,79.28,121.64,14.23,68.07-29.6,143.33-95.82,164.54-27.78,8.89-57.63,9.07-85.86,16.41-46.75,12.16-90.31,49.53-94.53,97.65-5.24,59.74,48.08,107.34,99.35,138.46,24.9,15.12,51,29.31,70.79,50.72s32.3,52.16,23.72,80c-7.3,23.7-28.12,40.69-49.68,53a252.42,252.42,0,0,1-90.74,30.62c-28.59,3.85-57.69,2.77-86.24,6.92s-57.7,14.48-76.43,36.42-23.32,57.57-4.25,79.23" data-author="公众号：懂点君"></path>
<g data-author="公众号：懂点君">
<!-- 点击区域 -->
<rect x="-194.8" y="-235" width="482" height="456" fill="#000" opacity="0" style="pointer-events: visible;" data-author="公众号：懂点君">
<set attributeName="visibility" from="visible" to="hidden" dur="0.2s" begin="click" fill="freeze" restart="never"></set>
</rect>
<!-- 爱心图标 -->
<g transform="translate(-200 -228)" data-author="公众号：懂点君">
<foreignObject x="0" y="0" width="482" height="456" data-author="公众号：懂点君">
<svg style="display: block;background: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqRph4APkfFswMI0G9ibxF0r4uFhqvky0QQNQmy62zJdcmmGRG8uHGwLDJoS2g2Iybj1ecpr8JUHabQ/0?wx_fmt=png) 0 0 no-repeat;background-size: 100% 100%;vertical-align: top;" viewBox="0 0 482 456" data-author="公众号：懂点君"></svg>
</foreignObject>
</g>
<!-- 实现路径动画的效果；path从原点(0, 0)开始，方便操作 -->
<animateMotion path="M0,0C-1-15.62,14.89-26.34,28.67-33.76,81.65-62.26,134-93,179-132.91s82.57-89.92,99.93-147.51c9.95-33,12.35-71.2-6.75-99.94-15.9-23.94-46.12-37.5-74.58-33.49-16.3,2.3-31.38,9.76-45.85,17.6q-25.38,13.74-49.62,29.49c-2,1.32-4.34,2.71-6.71,2.23s-4-2.71-5.62-4.53c-6.89-7.65-17.8-9.95-28-11.57a600.5,600.5,0,0,0-71.06-7c-6.07-.24-12.33-.36-18,1.85-6.34,2.47-11.24,7.59-15.68,12.75C-57.65-356-70-336.4-76.11-314.68s-5.63,45.76,4.19,66.08C-67-238.48-60-229.57-54.06-220c7.12,11.32,12.81,23.53,20.29,34.62,21.18,31.43,54.94,51.66,87.6,70.88C44.72-99.7,27.27-92.6,11-86.43L-39.28-67.38c-16.41,6.22-33.57,13-44.79,26.46C-101.67-19.76-99.49,11-96.36,38.35c3.59,31.39,12.27,63.84,7.58,95.09-.57,3.76-1.65,7.74-4.58,10.18-2.56,2.13-6.25,2.81-8.32,5.42s-1.85,6.41-1.61,9.79a157.07,157.07,0,0,1-16.92,82.37c-3.34,6.54-7.15,12.9-9.39,19.9-6.72,21.06,1.88,43.78,11.86,63.5A426.17,426.17,0,0,0-23,448.36C7.11,475.5,2.86,520.41-1,560.78s-12.1,80.87-7.38,121.15c6.27,53.41,35.06,101.89,70.27,142.54s77,74.94,115.66,112.36c35.29,34.21,69.22,73.53,79.28,121.64,14.23,68.07-29.6,143.33-95.82,164.54-27.78,8.89-57.63,9.07-85.86,16.41-46.75,12.16-90.31,49.53-94.53,97.65-5.24,59.74,48.08,107.34,99.35,138.46,24.9,15.12,51,29.31,70.79,50.72s32.3,52.16,23.72,80c-7.3,23.7-28.12,40.69-49.68,53a252.42,252.42,0,0,1-90.74,30.62c-28.59,3.85-57.69,2.77-86.24,6.92s-57.7,14.48-76.43,36.42-23.32,57.57-4.25,79.23" begin="click+0.5s" dur="20s" restart="whenNotActive" fill="freeze" data-author="公众号：懂点君"></animateMotion>
</g>
</g>
</g>
</svg>
</section>
<!-- 高度控制区域 -->
<section style="line-height: 0;isolation: isolate;transform: scale(1);pointer-events: none;">
<svg viewBox="0 0 1000 1030" style="display: block;max-width: none !important;width: 100%;vertical-align: top;pointer-events: none;">
<animate attributeName="width" fill="freeze" restart="never" keyTimes="0;0.001;1" values="100%;417%;417%" dur="20000s" begin="touchstart+7s"></animate>
<g>
<foreignObject x="0" y="0" width="1000" height="1030">
<svg style="display: block;background: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqRph4APkfFswMI0G9ibxF0r4uJwhVIanNf4sczsjC3UehOxIUSeKYOcvnP0U4fBwQL4ly2E4E2YNfA/0?wx_fmt=png) 0 0 no-repeat;background-size: 100% 100%;vertical-align: top;" viewBox="0 0 1000 1030"></svg>
</foreignObject>
<animate attributeName="opacity" values="1;0;0" keyTimes="0;.0001;1" dur="400s" begin="touchstart" fill="freeze" restart="never"></animate>
<set attributeName="visibility" from="visible" to="hidden" begin="touchstart" fill="freeze" restart="never"></set>
<!-- 长图触发区域 -->
<rect x="380" y="520" width="482" height="456" fill="red" style="pointer-events: visible;" opacity="0"></rect>
</g>
</svg>
</section>
</section>
强力驱动