公众号自定义样式，令人惊叹的文章编辑器，SVG篇
约 2 分钟阅读
微信公众号
样式
这个系列居然还有第二期，我是没有想到的，虽然我的公众号已经放弃维护了，现在在搞我的博客。
起因
事情的起因是因为我无意之中看到了人家微信公众号的文章中有这样的效果：
一个公众号中的文章，居然还能够实现这种效果，太不可思议了，于是马上开始研究起来。
研究
使用Chrome浏览器打开这篇文章的链接，然后通过开发者工具进行检查，发现了下面的代码：
<section style="height: 0px; box-sizing: border-box;"> <svg opacity="1" style=" box-sizing: border-box; transform: rotateZ(0deg); background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; background-color: rgb(254, 254, 254); background-image: url('https://mmbiz.qpic.cn/sz_mmbiz_jpg/9NT6Pkus6TMhBVMGv3j06B9VLRMjicpOibfjdbNsRjcXH13pkfZNStyX67yH3QcgppNiaPOQYrMvGGfnP7sVmcaqw/640?wx_fmt=jpeg'); width: 100%; " viewBox="0 0 100 120.2" width="1" xmlns="http://www.w3.org/2000/svg" > <animate attributeName="width" style="box-sizing: border-box;" fill="freeze" to="0" from="1" duration="0.01" begin="click + 0.5s" ></animate> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="box-sizing: border-box;" > <svg width="100%" height="100%" style="box-sizing: border-box;"> <rect width="100%" height="100%" style="box-sizing: border-box; opacity: 1; fill: transparent;" x="0%" ></rect> </svg > <svg style="width: 100%; height: 100%; box-sizing: border-box;" version="1.1" xmlns="http://www.w3.org/2000/svg" > </svg> </svg> <animate style="box-sizing: border-box;" fill="freeze" dur="0.5" attributeName="opacity" begin="click" from="1" to="0" ></animate> </svg></section>是的，在微信提供的编辑器中还可以使用svg标签，果然不是一个普通的文字编辑器啊！
将上面的那段代码新建一个html文件。
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body><section style="height: 0px; box-sizing: border-box;"> <svg opacity="1" style=" box-sizing: border-box; transform: rotateZ(0deg); background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; background-color: rgb(254, 254, 254); background-image: url('https://mmbiz.qpic.cn/sz_mmbiz_jpg/9NT6Pkus6TMhBVMGv3j06B9VLRMjicpOibfjdbNsRjcXH13pkfZNStyX67yH3QcgppNiaPOQYrMvGGfnP7sVmcaqw/640?wx_fmt=jpeg'); width: 100%; " viewBox="0 0 100 120.2" width="1" xmlns="http://www.w3.org/2000/svg" > <animate attributeName="width" style="box-sizing: border-box;" fill="freeze" to="0" from="1" duration="0.01" begin="click + 0.5s" ></animate> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="box-sizing: border-box;" > <svg width="100%" height="100%" style="box-sizing: border-box;"> <rect width="100%" height="100%" style="box-sizing: border-box; opacity: 1; fill: transparent;" x="0%" ></rect> </svg > <svg style="width: 100%; height: 100%; box-sizing: border-box;" version="1.1" xmlns="http://www.w3.org/2000/svg" > </svg> </svg> <animate style="box-sizing: border-box;" fill="freeze" dur="0.5" attributeName="opacity" begin="click" from="1" to="0" ></animate> </svg></section> </body></html>会出现下面的效果：
可以看到，点击浮现的效果即是使用了一个SVG遮住了下面的图片。
SVG
如果想要学习SVG，可以看这篇文章SVG 图像入门教程 因为这种前端知识，不是本篇的重点，那么接下来我们看一下公众号的编辑器可以实现哪些酷炫的效果吧。
文章链接
亲测如果使用Chrome打开链接是无法触发SVG的点击事件，只有通过微信浏览器打开才能触发点击事件，不知道是不是我的问题。