渲染效果主要看你在 url.query 传过来的 svg 模板
做这个主要是因为前几天也在 V2EX 看到一个 计数器，我在下面评论 说可以 一步到胃 直接把渲染模板传过来
我看没什么响应，就自己去实现了，起初是想做一个全局替换的，后来仔细研究了一些 svg 效果，全局替换效果辣鸡
于是想到了 vue 的 ssr 渲染函数，把你的渲染模板通过 url.query 传递到后端
我还没测过实际 http path 最大长度是多少，但是 我在 Edge@95 发长度 8000 的 url 请求没问
当然 模板 越小越好，可以提前 html minimize
数据存储是 cloudflare workers kv, 在 workers 里可以很便捷地使用，基本是 workers 的配套了
有什么错误或者需要改进的地方，请各位大佬 指正，谢谢。
https://github.com/lisonge/visit-counter.git
附上 展示的 svg 模板，可再次刷新此界面查看效果，也可以刷到 99 看看 99 到 100 动画效果
<svg
xmlns="http://www.w3.org/2000/svg"
:width="13 * (count + 1 + '').length + 5"
height="16"
>
<g>
<text
v-for="n in (count + '').length"
:key="n"
style="font-size: 13px"
:x="
(n - 1) * 13 +
((count + '').length < (count + 1 + '').length ? 13 : 0) +
5
"
y="13"
>
{{ (count + "")[n - 1] }}
<animate
attributeName="y"
from="13"
to="-4"
:begin="((count + '').length - n) * 300 + 400 + 'ms'"
dur="700ms"
fill="freeze"
v-if="(count + '')[n - 1] != (count + 1 + '')[n - 1]"
/>
</text>
<text
v-for="n in (count + 1 + '').length"
:key="n"
style="font-size: 13px"
:x="(n - 1) * 13 + 5"
y="30"
>
{{ (count + 1 + "")[n - 1] }}
<animate
attributeName="y"
from="30"
to="13"
:begin="((count + '').length - n) * 300 + 500 + 'ms'"
dur="700ms"
fill="freeze"
v-if="(count + '')[n - 1] != (count + 1 + '')[n - 1]"
/>
</text>
</g>
</svg>原创文章，作者：mantou，如若转载，请注明出处：https://v2ez.com/235.html
