嗨，换行文本动画 svg 文件答案

【问题标题】：Hi, line break text animation svg file嗨，换行文本动画 svg 文件
【发布时间】：2021-08-23 23:01:15
【问题描述】：

我正在制作一个 SVG 动画横幅，在横幅中我有一个打字文本动画，一切顺利，但我有一个特定的横幅宽度，所以我需要在第二行和第三行保持打字效果。如何在第二行和第三行获得换行符保持打字效果？不使用 JAVASCRIPT 和 CSS

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="600" 
height="700" 
version="1.1" 
viewBox="0 0 600 700" 
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
 <path id="path">
        <animate attributeName="d" from="m0,110 h0" to="m0,110 h1100" dur="2.8s" begin="0s" repeatCount="indefinite"/>
    </path> 
 <text 
 id="texto" 
 transform="scale(.71121 1.406)" 
 x="48.809311" 
 y="216.08093" 
 fill="#000000" 
 font-family="sans-serif" 
 font-size="17.42px" 
 image-rendering="auto" 
 stroke-width="2.4355" 
 style="line-height:1.25" 
 xml:space="preserve"
 >
 <textPath xlink:href="#path">
 <tspan x="48.809311" 
 y="216.08093" 
 stroke-width="2.4355">Este es el texto que estamos probando</tspan>
</textPath>
 </text>
</svg>

【问题讨论】：

标签： html xml svg

【解决方案1】：

我不确定我是否正确，但您似乎需要为每一行使用 path 和 textPath。希望更精通 SVG 的人可以提出改进的方法。

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="600" height="700" version="1.1" viewBox="0 0 600 700" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <path id="path">
  <animate attributeName="d" begin="0s" from="m0,110 h0" to="m0,110 h1100" dur="2.8s"fill="freeze" repeatCount="0"/>
  </path>
  <path id="path2">
  <animate attributeName="d" begin="3s" from="m0,130 h0" to="m0,130 h1100" dur="2.8s" fill="freeze" repeatCount="0"/>
    </path> 
 <text 
 id="texto" 
 transform="scale(.71121 1.406)" 
 x="48.809311" 
 y="216.08093" 
 fill="#000000" 
 font-family="sans-serif" 
 font-size="17.42px" 
 image-rendering="auto" 
 stroke-width="2.4355" 
 style="line-height:1.25" 
 xml:space="preserve"
 >
 <textPath xlink:href="#path">
 <tspan stroke-width="2.4355">Este es el texto que estamos probando</tspan>
  
</textPath>
 <textPath xlink:href="#path2">
 <tspan stroke-width="2.4355">probando estamos que texto el es Este</tspan>
  
</textPath>
 </text>
</svg>

【讨论】：

【解决方案2】：

这是一种可能性：

您可以使用多个values 来代替动画的两个值（from 和to），并且可以通过将移动到命令M 添加到路径来添加换行符。在下一个示例中，我在路径中添加了一个笔触，以便您可以看到它（有助于调试）。可以删除stroke属性。

我还删除了文本和 tspan 的 x 和 y 属性，以便文本位于路径上方。如果需要，您可以将它们添加回来。

<svg width="600" height="700" version="1.1" viewBox="0 0 600 700" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <path id="path" stroke="black">
    <animate attributeName="d" values="M0,110 h0;                           
                         M0,110 H230; 
                         M0,110 H230 M0,150 h0;
                         M0,110 H230 M0,150H230" dur="2.8s" begin="0s" repeatCount="indefinite" />
  </path>
  <text id="texto" fill="#000000" font-family="sans-serif" font-size="17.42px" image-rendering="auto" stroke-width="2.4355" style="line-height:1.25">
    <textPath xlink:href="#path"><!--
      --><tspan stroke-width="2.4355">Este es el texto que estamos probando, y este otro también</tspan>
    </textPath>
  </text>
</svg>

【讨论】：