[SVG] 关于运营偶尔要我给他们的公众号加些代码特效这件事
前言
他们想整个点击后文章高度自增的动画
开始操作
因为上次做过,这次自然就知道是SVG了,首先找到原代码的SVG高度自增的代码
<svg width="100.00%" xmlns="http://www.w3.org/2000/svg" style="box-sizing:border-box;transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-o-transform: rotateZ(0deg);width: 100%;" opacity="1" height="98" data-height="98"> <animate style="box-sizing: border-box;" fill="freeze" attributename="height" begin="0s" dur="0.01" from="98" to="98"></animate> <animate style="box-sizing: border-box;" fill="freeze" attributename="height" begin="click" dur="15" restart="never" from="98" to="7452"></animate> </svg>
因为他的内容是富文本,所以他直接用SVG撑开了内容,达到高度增加的效果
但是我的图片,所以图片的高度是一定的,所以设置宽度100%,让高度自适应的话,最后撑开的高度就无法预测了。所以必须写死宽高。经过经验总结,微信的文章宽度设置为375就好了,如果图片是750的,自行除以2。
然后因为我们是图片,所以直接在SVG标签里面用图片标签<image>就好了,高度就是展示完全的正常高,让svg自己撑开就好了
<svg width="375" xmlns="http://www.w3.org/2000/svg" style="box-sizing:border-box;transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-o-transform: rotateZ(0deg);width: 375px;margin: auto;display: block;" opacity="1" height="562" data-height="562"> <animate style="box-sizing: border-box;" fill="freeze" attributename="height" begin="0s" dur="0.01" from="562" to="562"></animate> <animate style="box-sizing: border-box;" fill="freeze" attributename="height" begin="click" dur="15" restart="never" from="562" to="2714"></animate> <image xlink:href="https://mmbiz.qpic.cn/mmbiz_jpg/iaMpo6zxibPwtsqHFRghcDO09q1AZic2ajZUwyicJjo9Xr8Cag6UsP3xNEq4mk0QnW5OAQY6YpjzgBmicnEMduOOClg/0?wx_fmt=jpeg" style="width: 375px;height: 2714px;display: block;font-size: 0;margin: auto;" /> </svg>
本来美滋滋发给运营粘贴了,结果发现微信展示不出来,百度后知道了原因
微信废弃了<image>标签的 xlink:href ,直接用 href 就行了,最后
<svg width="375" xmlns="http://www.w3.org/2000/svg" style="box-sizing:border-box;transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-o-transform: rotateZ(0deg);width: 375px;margin: auto;display: block;" opacity="1" height="562" data-height="562"> <animate style="box-sizing: border-box;" fill="freeze" attributename="height" begin="0s" dur="0.01" from="562" to="562"></animate> <animate style="box-sizing: border-box;" fill="freeze" attributename="height" begin="click" dur="15" restart="never" from="562" to="2714"></animate> <image href="https://mmbiz.qpic.cn/mmbiz_jpg/iaMpo6zxibPwtsqHFRghcDO09q1AZic2ajZUwyicJjo9Xr8Cag6UsP3xNEq4mk0QnW5OAQY6YpjzgBmicnEMduOOClg/0?wx_fmt=jpeg" style="width: 375px;height: 2714px;display: block;font-size: 0;margin: auto;" /> </svg>
前端远比想象中的还要复杂,需要学习的还有很多,脚踏实地记录好遇到的麻烦与经验,三省吾身,才能慢慢积累经验。