SVG Logo动画
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了SVG Logo动画相关的知识，希望对你有一定的参考价值。
所以我有一个客户端徽标，我想在滚动动画。假设徽标是DANIEL。当用户向下滚动页面时，我希望字母之间的间距扩大，因此它最终会成为D A N I E L.我已经看到如何使用常规文本执行此操作，但这将是我所说的SVG徽标。我一直在寻找购买没找到任何东西。还需要适合移动设备。有什么提示吗？
答案
这其实很简单。您只需要观察滚动事件，然后根据您滚动页面的距离更新<text>元素。
我使用letter-spacing表示属性实现了字母间距。
window.addEventListener("scroll", function() {
document.getElementById("mytext").setAttribute("letter-spacing", (window.scrollY / window.outerHeight) + "em");
});body {
height: 2000px;
}
svg {
position: fixed;
}<svg viewBox="0 0 600 100">
<text id="mytext" x="300" y="70" font-size="50" text-anchor="middle">DANIEL</text>
</svg>以上是关于SVG Logo动画的主要内容，如果未能解决你的问题，请参考以下文章