教程|问题汇总（一）

今天综合解答一下近期的问题

前  言

今天汇总一下老铁们这几天学习教程以及套用模板过程中遇到的各种问题，赶紧拿出小本本来划重点：

❶ 从 AI 导入到 135 之后内容丢失；

❷ 套用模板时出现大面积空白/图像残缺；

❸ 从 135 复制到公众号后台时内容丢失；

❹ 小编你单身吗？

代 码 转 图 像 失 败

小编！我都按照你第一篇教程中说的做了，为什么还 TMD 出不来图像？

这大概是这几天收到的最多的问题了，很多童鞋反映在 AI→svg→微信图文 这一步就放弃了。大多数情况是：按照教程中说的更改了标签的闭合方式，但复制到 135 HTML 编辑器后依然一片空白。小编在这里向各位致歉，这个 bug 纯属小编考虑不周全，没有想到 AI 版本不同，导出代码的形式也会不同。高版本的 AI 除了闭合方式 135 不能识别，还存在将属性代码合并的问题。

高版本的 AI 在导出为 SVG 格式时，会将<path>标签中的属性值合并为 class="st0"，然后将这些属性值以 st0{……} 的形式，存放于<style>标签中（图中用红框标识的部分）。而这种书写方式是微信图文不能识别的。以下图为例，我们只需要找到st0{fill:"#727171"}和 class="st0"，然后用 fill="#727171" 替换掉 class="st0"。st1、st2……也按同样的方式替换，最后删掉<style>标签中的内容就可以.如下图 ▼

图像残缺/大面积空白

小编！我在套模板时，图像怎么TMD被遮住了!哪里冒出来这么多空白？！

套模板时，有时会在<svg>图像的上方和下方出现大面积空白，有时也会出现部分图像被遮住的情况。这种 BUG 起初也是让小编十分头疼的，曾尝试过用<section>标签上下平移等多种方法,但会出现苹果安卓效果不同的问题。经过小编的多次尝试后，发现解决问题的最好方法就是调整<svg>的 height 值。

svg 相当于一个画布，其长宽由<svg>标签中的 height 属性和 width 属性决定。如果<svg>图像上下留白太多，只需要将 height 属性后面的数值调低。如果<svg>图像没有显示完整，只需要将 height 属性后面的数值调高。在进行数值调节时，可以先大幅度改变数值，然后采用二分法的思想不断调整至最佳状态。 ▼

这个 BUG 在 svg 画布较长时经常出现，建议大家码起来。

复 制 时 内 容 丢 失

小编！我从 135 复制到公众号后台的时候，内容都 TMD 不见了！

这种情况是因为模板中设置了居中格式，而 svg 图像的居中是通过裹在带有居中属性的<p>标签中实现的。在 135 中，如果<svg>标签（图中用红框标识的部分）被裹在<p>标签（图中用黄色强调的部分）或者<section>标签中，在复制或刷新时，svg 代码会直接抹去。如下图 ▼

只需要删掉<svg>标签两端的<p>标签，就可以解决上述问题。

小 编 是 单 身 吗 ？