javascript 字体系列转换器输出SVG线条动画

tyg4sfes 于 2024-01-05 发布在 Java

关注(0)|答案(1)|浏览(113)

我想实现这样的网页效果，就像文字输入后文字书写路径的动画效果一样。
像这样==> codepen

<svg ...>
  <path class="path" stroke="#000000" ... >
</svg>
svg {
  stroke-width:17;
  width:200px;
  height:100px;
  transition:transform .5s ease-out;
  path {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    stroke-width:5;
    animation:summerbird-s .75s linear forwards .5s;
  }
}

字符串
我了解到它是使用svg-path和stroke-dashoffset实现的。
Reference documentation1的
Reference documentation2的
这是我的代码，它不工作

<svg xmlns="http://www.w3.org/2000/svg">
  <style>
    .seriftext {
      font-family: 'Times New Roman', Times, serif;
      font-size: 48px;
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      animation: dash 5s linear forwards;
    }
    @keyframes dash {
      to {
        stroke-dashoffset: 0;
      }
    }
  </style>
  <text x="10" y="100" class="seriftext">
    Some text
  </text>
</svg>

型
但是我仍然需要将字体家族转换为svg路径，如果有更好的实现过程或者合适的js库来帮助我，那就太好了。
希望我能得到其他的想法和帮助。非常感谢。

JavaScript

来源：https://stackoverflow.com/questions/77750007/font-family-converter-output-svg-line-animation

1条答案

按热度按时间

t8e9dugd1#

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Some Text</title>
  <style>

    .seriftext {
      font-family: 'Times New Roman', Times, serif;
      font-size: 48px;
      fill: none;
      stroke: black;
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      animation: dash 5s linear forwards, fadeIn 1s ease-in-out 4s forwards;
    }

    @keyframes dash {
      to {
        stroke-dashoffset: 0;
      }
    }

    @keyframes fadeIn {
      to {
        fill: black;
      }
    }
  </style>
</head>
<body>

  <svg xmlns="http://www.w3.org/2000/svg" width="500" height="200">
    <text x="10" y="100" class="seriftext">
      Some text
    </text>
  </svg>
</body>
</html>

字符串

赞(0）回复(0）举报 2024-01-05

我来回答

javascript 字体系列转换器输出SVG线条动画

1条答案

相关问题

热门标签

最新问答