请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
实现原理：① 使用 path 路径绘制一个 ^ 形状的图案，path图案的 d 属性通过动画标签 <animate></animate> 以 values 多值的形式动态设置路径图案动画，令 ^ 图案向上移动直至消失，同时同步运行另一个 animate 动画，令图像线条按粗细 0;4;4;4;0 进行循环变化。共创建六组这样的path动画，使用 <defs></def> 标签包裹起来留待后续引用。② 创建六组 <user/> 标签，每一组对标一个 ^ path图案，依次从 0~360 度均分旋转形成六边形的六个大角，构成最终效果。这里，defs 标签群负责描述路径动画，user 标签群负责呈现结果；如果使用XML来写svg代码，代码量会很大，因此使用JS来快捷生成svg代码，相对简洁。以下是具体代码和效果演示：
<svg id="hsvg" width="320" height="320" viewBox="0 0 320 320" fill="none" stroke="#008000" stroke-linecap="round"></svg>
<script>
drawHexagon = (total) => {
let pathstr = '\n\t<defs>', usestr = '\n';
Array(total).fill(0).forEach((id,idx) => {
id = idx + 1;
pathstr += `\n\t\t<path id="r${id}">\n\t\t\t<animate id="p${id}" attributeName="d" values="m160,160l0,0 0,0;m130,110l30,-17 30,17;m130,60l30,-17 30,17;m160,20l0,0 0,0" dur="6s" repeatCount="indefinite"/>\n\t\t\t<animate attributeName="stroke-width" values="0;4;4;4;0" dur="6s" repeatCount="indefinite" begin="0s"/>\n\t\t</path>`;
usestr += `\t<use xlink:href="#r${id}" transform="rotate(${360 / total * idx} 160 160)"/>\n`
});
pathstr += '\n\t</defs>\n';
return pathstr + usestr;
};
hsvg.innerHTML = drawHexagon(6);
</script>
| 
发表于 2024-9-11 19:39
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-9-11 20:00
