微信公众号里面为什么保存后svg标签下text里面的文字会被自动移除，并被添加到了文本下的另一个<span leaf>标签里面？

如，我的代码是:

<section>
<svg width="500" height="150" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black" />
  <path d="M50,80 Q150,10 250,80 T450,80" fill="none" stroke="none" id="textPath" />
  <g font-family="Arial, sans-serif" font-size="48" fill="red">
    <text>
      <textPath href="#textPath" startOffset="10%">
        变色字体测试
        <animate attributeName="fill" values="red;yellow;green;blue;purple;red" 
                 dur="5s" repeatCount="indefinite" />
      </textPath>
    </text>
  </g>
</svg>
</section>

点击保存后却变成

<section>
  <svg width="500" height="150" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="100%" fill="black"></rect>
    <path d="M50,80 Q150,10 250,80 T450,80" fill="none" stroke="none"></path>
    <g font-family="Arial, sans-serif" font-size="48" fill="red">
      <text>
        <textPath href="#textPath" startOffset="10%"></textPath>
      </text>
    </g>
  </svg>
  <span leaf="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;变色字体测试 &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</span>
  <animate attributename="fill" values="red;yellow;green;blue;purple;red" dur="5s" repeatcount="indefinite"></animate>
</section>

这导致我的样式完全没有办法显示，也完全没有办法进行功能的拓展