![](https://api.nnnnzs.cn/V2/track/clock.svg) # 原理 1. 预先定一个svg,当做模板,设置可替换插槽 2. 服务端读取svg文件，当做字符串 3. 获取当前时间，转换成时钟的初始角度，以及终止角度，根据时分秒针不同，动画的持续时间也不同 # 模板核心代码 ```html ``` 其中 hourHandPlace hourHandTransFrom hourHandTransTo 是字符串模板，分别表示时钟时针的tansform变换初始角度、动画初始值，动画的结束值通过服务端模板替换后，转换为 ```html ``` 分钟和秒钟同理 ## 服务端核心代码 ```javascript let svg = readFileSync(resolve('public', 'clock.svg'), 'utf-8'); const now = new Date(); //当前时间 const min = now.getMinutes(); //分钟 const sec = now.getSeconds(); //秒 const hour = (now.getHours() % 12) + min / 60; //转换成可以在时钟上显示的时间 const hourAngle = hour * 30; //每30°表示一个小时 const minAngle = min * 6; //每6°表示一分钟 const secAngle = sec * 6; //每6°表示一秒 const setTransform = (str, angle) => { const attr = `transform="rotate(${angle},50,50)"`; svg = svg.replace(str, attr); }; [ ['hourHandPlace', hourAngle], ['minHandPlace', minAngle], ['secHandPlace', secAngle], ].forEach((ele) => { setTransform(ele[0], ele[1]); }); [ ['hourHandTrans', hourAngle], ['minHandTrans', minAngle], ['secHandTrans', secAngle], ].forEach((ele: [string, number]) => { const from = ele[1] + ' 50 50'; const to = ele[1] + 360 + ' 50 50'; const fromKey = ele[0] + 'From'; const toKey = ele[0] + 'To'; svg = svg.replace(fromKey, from); svg = svg.replace(toKey, to); }); return svg; ``` # 完整代码 ## 模板代码 ```html ``` ## 服务端代码 ```javascript export class ClockController { @Get('clock.svg') @Header('Content-Type', 'image/svg+xml') svgClock() { //获取表示时钟和分针的svg元素 let svg = readFileSync(resolve('public', 'clock.svg'), 'utf-8'); const now = new Date(); //当前时间 const min = now.getMinutes(); //分钟 const sec = now.getSeconds(); //秒 const hour = (now.getHours() % 12) + min / 60; //转换成可以在时钟上显示的时间 const hourAngle = hour * 30; //每30°表示一个小时 const minAngle = min * 6; //每6°表示一分钟 const secAngle = sec * 6; //每6°表示一秒 const setTransform = (str, angle) => { const attr = `transform="rotate(${angle},50,50)"`; svg = svg.replace(str, attr); }; [ ['hourHandPlace', hourAngle], ['minHandPlace', minAngle], ['secHandPlace', secAngle], ].forEach((ele) => { setTransform(ele[0], ele[1]); }); [ ['hourHandTrans', hourAngle], ['minHandTrans', minAngle], ['secHandTrans', secAngle], ].forEach((ele: [string, number]) => { const from = ele[1] + ' 50 50'; const to = ele[1] + 360 + ' 50 50'; const fromKey = ele[0] + 'From'; const toKey = ele[0] + 'To'; svg = svg.replace(fromKey, from); svg = svg.replace(toKey, to); }); return svg; } } ``` # 注意事项 1. 作为接口，返回的contentType需要设置成image/svg+xml 2. [某些网站](https://github.com/NNNNzs/)会将外链的svg缓存下来，这个时候服务端的代码就失效了，时钟的开始时间即是添加缓存的时间

svg

使用svg画一个可以动的时钟