svg接力绘图演示
<div class="hEdiv" data-prev="1"><pre class="hEpre"><style>
#msvg {
display: block;
margin: auto;
path {
stroke-dasharray: var(--perimeter);
stroke-dashoffset: var(--perimeter);
fill: none;
stroke: green;
stroke-width: 2;
animation: draw 4s var(--delay) linear forwards;
}
circle {
stroke-dasharray: var(--perimeter);
stroke-dashoffset: var(--perimeter);
fill: none;
stroke: green;
stroke-width: 2;
animation: draw 4s var(--delay) linear forwards, fill 2s calc(var(--delay) + 4s) forwards;
}
}
.tMid { text-align: center; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fill { to { fill: lightgreen; } }
</style>
<svg id="msvg" width="400" height="400" viewBox="-200 -200 400 400" xmlns="http://www.w3.org/2000/svg">
<path d="M-180 0 L0 -180 L180 0 L0 180Z"></path>
<path d="M-88 -88 L88 -88 L88 88 L-88 88Z"></path>
<circle x="0" y="0" r="86"></circle>
</svg>
<p class="tMid"><button type="button" onclick="reStartAnimation()">再来一次</button></p>
<script>
const paths = document.querySelectorAll('#msvg path');
const circle = document.querySelector('#msvg circle');
[...paths, circle].forEach((elm, key) => {
elm.style.cssText += `
--perimeter: ${Math.ceil(elm.getTotalLength())};
--delay: ${key * 4}s;
`;
});
function reStartAnimation() {
[...paths, circle].forEach(elm => {
elm.style.animation = 'none';
setTimeout(() => {
elm.style.animation = 'draw 4s var(--delay) linear forwards';
if (elm.tagName === 'circle') {
elm.style.animation += ', fill 2s calc(var(--delay) + 4s) forwards';
}
});
});
}
</script>
</pre></div>
<script type="module">
import hl from 'https://638183.freep.cn/638183/web/js/hl.js';
const divs = document.querySelectorAll('.hEdiv');
const pres = document.querySelectorAll('.hEpre');
divs.forEach((div,idx) => hl.hl(div, pres));
</script> 本例通过对CSS动画的控制，依此绘制三个图形：两个矩形（path图形）、一个圆，圆还填充了颜色。
实现手段主要通过 CSS 完成，但为了避免手动计算图形路径长度，使用了JS做辅助获取相应的CSS变量值。 这接力画真好看{:4_187:} 马黑黑 发表于 2026-6-8 20:54
本例通过对CSS动画的控制，依此绘制三个图形：两个矩形（path图形）、一个圆，圆还填充了颜色。
实现手 ...
大开眼界，CSS动画让SVG图形的依此绘制过程可视化，谢谢马老师的绝妙演示{:4_190:} 杨帆 发表于 2026-6-8 21:54
大开眼界，CSS动画让SVG图形的依此绘制过程可视化，谢谢马老师的绝妙演示
这个可能还是有点抽象，我会发一文再讲讲 红影 发表于 2026-6-8 21:45
这接力画真好看
看着好玩吧{:4_170:} 马黑黑 发表于 2026-6-9 12:28
这个可能还是有点抽象，我会发一文再讲讲
化静为动，化繁为简，化隐为显，马老师您辛苦了{:4_180:} 杨帆 发表于 2026-6-9 16:38
化静为动，化繁为简，化隐为显，马老师您辛苦了
有空玩玩，谈不上辛苦
页:
[1]