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

Author Avatar
Rui 02月 16,2020
  • 在其它设备中阅读本文章

本文分为

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消失;若缺少底层图案,最终将会呈现一偏白色。只有中间层可以用于复制叠加。

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