带有tspan标签的SVG输入动画效果

Question

我有一个svg，要在其上执行动画打字效果，就像this codepen example一样。 这是该代码笔的原始代码：

<svg width="100%" height="100%" viewBox="30 -50 600 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <path id="path" d="m 0 110 h 342.868">
        <animate attributeName="d" from="m0,110 h0" to="m0,110 h1100" dur="6.8s" begin="0s" repeatCount="indefinite"></animate>
    </path>
    <text font-size="26" font-family="Montserrat" fill="hsla(36, 95%, 85%, 1)">
        <textPath xlink:href="#path">I'm An Animated Typing Example &amp;&amp; I'm All SVG.
    </textPath>
    </text>
</svg>

如您所见，codepen使用path通过textpath tag为文本设置动画。

但是我有一个svg，其中文本不包含在文本路径中，而是包含在tspan中，我想在该文本上实现相同的效果。

这是我的SVG代码：

   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="303.29140625" height="139.28875199999993" viewBox="0 0 303.29 139.29" xml:space="preserve">
         <desc>Created with Fabric.js 2.4.3</desc>

         <defs></defs>
         <g transform="matrix(1.55 0 0 1.53 151.65 69.64)" style=""  >

            <text xml:space="preserve" font-family="Times" font-size="24" font-style="normal" font-weight="bold" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1; white-space: pre;" >
               <tspan  xlink:href="#path" x="-97.34" y="-23.92" style="fill: rgb(25,115,217); white-space: pre; ">I am an Animated</tspan>
               <tspan x="-97.34" y="7.54" style="fill: rgb(25,115,217); white-space: pre; ">And I'm all SVG</tspan>
            </text>
         </g>
   </svg>

请问我如何使用纯纯SVG工具的tspan来执行这种打字动画效果？