SVG 文本动画字体样式

Question

我想做一个看起来像谷歌搜索框的动画

我有一个文本路径，其中单词以“粗体”字体显示。

我想让单词动画化，使第一个字母出现“常规”，然后是第一个和第二个，然后是第一个第二个和第三个等等。

这可能与 svg 动画有关吗？

 <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="path1">
    <animate attributeName="d" from="m100,50 h0" to="m100,50 h1100" dur="5s" begin="0s" repeatCount="indefinite" />
  </path>

// this text "types"

  <text font-size="90" font-family="Montserrat" fill='black'>
    <textPath xlink:href="#path1">Google is</textPath>
  </text>

// I want this text to animate the "font-style"

  <text font-size="90" font-family="Montserrat" fill='black' x="100" y="200">
    Google is gold
    <animate attributeType="CSS" ....  />
  </text>

Answer 1

您需要将字母放在 textPath 中的单独标签中，以便您可以使用动画单独定位它们。

我刚刚完成了第一个字母，但如果您愿意，可以将其扩展到所有字母。

 <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="path1">
    <animate attributeName="d" from="m100,50 h0" to="m100,50 h1100" dur="5s" begin="0s" repeatCount="indefinite" />
  </path>

// this text "types"

  <text font-size="90" font-family="Montserrat" fill='black'>
    <textPath xlink:href="#path1">Google is</textPath>
  </text>

// I want this text to animate the "font-style"

  <text font-size="90" font-family="Montserrat" fill='black' x="100" y="200">
    <tspan>G<animate attributeType="CSS" attributeName="font-weight" from="700" to="100" dur="1s" begin="0s" repeatCount="indefinite"/></tspan>oogle is gold
    
  </text>