渐进式 SVG 交互创意（位图动画）代码模板与使用

本文分为

1、完整代码
2、代码解读
3、模板使用三部分

完整代码

<section style="display: block;height: 0 !important;">
	<svg enable-background="new 0 0 ** **" viewBox="0 0 ** **" x="0px" y="0px"style="background-image:url( 此处放入图片链接 );background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;background-attachment: scroll;-webkit-tap-highlight-color: transparent;" space="preserve" version="1.1" xlink="http://www.w3.org/1999/xlink" xml="" xmlns="http://www.w3.org/2000/svg" >
	</svg>
</section>

<section style="display: block;height: 0 !important;">
	<svg enable-background="new 0 0 ** **" viewBox="0 0 ** **" x="0px" y="0px"style="background-image:url( 此处放入图片链接 );background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;background-attachment: scroll;-webkit-tap-highlight-color: transparent;" space="preserve" version="1.1" xlink="http://www.w3.org/1999/xlink" xml="" xmlns="http://www.w3.org/2000/svg" >
		<animate attributeName="opacity" data-txscript="ch" begin="click" dur="0.5s" values="1;0" fill="freeze"></animate>
		<set attributeName="visibility" data-txscript="ch" from="visible" to="hidden" begin="click+0.5s"></set>
	</svg>
</section>

<section style="display: block;">
	<svg enable-background="new 0 0 ** **" viewBox="0 0 ** **" x="0px" y="0px"style="background-image:url( 此处放入图片链接 );background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;background-attachment: scroll;-webkit-tap-highlight-color: transparent;" space="preserve" version="1.1" xlink="http://www.w3.org/1999/xlink" xml="" xmlns="http://www.w3.org/2000/svg" >
		<animate attributeName="opacity" data-txscript="ch" begin="click" dur="0.5s" values="1;0" fill="freeze"></animate>
		<set attributeName="visibility" data-txscript="ch" from="visible" to="hidden" begin="click+0.5s"></set>
	</svg>
</section>

代码解读

本模板代码分为三段
1、底层图案
2、中层图案（可直接复制粘贴代码叠加）
3、顶层图案

底层图案

根据渲染原理底层图案应放在代码开头
与其他层代码相比，少了交互动画

<section style="display: block;height: 0 !important;">
	<svg enable-background="new 0 0 ** **" viewBox="0 0 ** **" x="0px" y="0px"style="background-image:url( 此处放入图片链接 );background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;background-attachment: scroll;-webkit-tap-highlight-color: transparent;" space="preserve" version="1.1" xlink="http://www.w3.org/1999/xlink" xml="" xmlns="http://www.w3.org/2000/svg" >
	</svg>
</section>

中层图案

中层图案可直接通过复制叠加交互图层数量

<section style="display: block;height: 0 !important;">
	<svg enable-background="new 0 0 ** **" viewBox="0 0 ** **" x="0px" y="0px"style="background-image:url( 此处放入图片链接 );background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;background-attachment: scroll;-webkit-tap-highlight-color: transparent;" space="preserve" version="1.1" xlink="http://www.w3.org/1999/xlink" xml="" xmlns="http://www.w3.org/2000/svg" >
		<animate attributeName="opacity" data-txscript="ch" begin="click" dur="0.5s" values="1;0" fill="freeze"></animate>
		<set attributeName="visibility" data-txscript="ch" from="visible" to="hidden" begin="click+0.5s"></set>
	</svg>
</section>

顶层图案

与中层图案相比，少了height=0，用于撑开整个画面。只需要且只能有一层。

<section style="display: block;">
	<svg enable-background="new 0 0 ** **" viewBox="0 0 ** **" x="0px" y="0px"style="background-image:url( 此处放入图片链接 );background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;background-attachment: scroll;-webkit-tap-highlight-color: transparent;" space="preserve" version="1.1" xlink="http://www.w3.org/1999/xlink" xml="" xmlns="http://www.w3.org/2000/svg" >
		<animate attributeName="opacity" data-txscript="ch" begin="click" dur="0.5s" values="1;0" fill="freeze"></animate>
		<set attributeName="visibility" data-txscript="ch" from="visible" to="hidden" begin="click+0.5s"></set>
	</svg>
</section>

代码使用

在位图叠加之前，首先需确认图片大小是否一致，确认好后将模板处定义画面大小的部分修改好。若未进行此步操作，将可能导致图片被切割或大面积留白。

enable-background="new 0 0 ** **" viewBox="0 0 ** **"

其次将图片上传至后台，导出链接后置入链接处即可

style="background-image:url( 此处放入图片链接 );

代码片段在此供大家方便参考

<svg enable-background="new 0 0 ** **" viewBox="0 0 ** **" x="0px" y="0px"style="background-image:url( 此处放入图片链接 );background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;background-attachment: scroll;-webkit-tap-highlight-color: transparent;" space="preserve" version="1.1" xlink="http://www.w3.org/1999/xlink" xml="" xmlns="http://www.w3.org/2000/svg" >

注：务必留意图片置入的先后顺序。若缺少顶层图案，整个画面将会因高度为0消失；若缺少底层图案，最终将会呈现一偏白色。只有中间层可以用于复制叠加。

若存在问题，请及时留言反馈。