[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>