花飞飞 发表于 2024-10-21 22:06
交给画面它可以有无限可能，就这一串代码可以出好多效果
改点数字啥的就成
花飞飞 发表于 2024-10-21 22:05
这可不是我的作品，你的作品抽象后的样子
俺是很实在的，写不出抽象的东东
马黑黑 发表于 2024-10-21 21:52
是的。现在，实现CSS动画已经不是问题了
这个例子好，容易看得懂{:4_204:}
马黑黑 发表于 2024-10-21 21:54
是的，多一倍就成
这个弄2个杆，就是想说明分组的吧。
红影 发表于 2024-10-21 23:19
这个弄2个杆，就是想说明分组的吧。
分组g可以引用、复用，分组如果不放在defs里，它自己是呈现的。这里的演示是为了说明g可以包含多个元素。
红影 发表于 2024-10-21 23:17
这个例子好，容易看得懂
{:4_190:}
跟着老师学代码。谢谢辛苦。{:4_190:}
马黑黑 发表于 2024-10-21 23:09
改点数字啥的就成
所以对小白太友好了，这么简单 的改改就有意想不到的效果
本帖最后由 花飞飞 于 2024-10-24 18:35 编辑 <br /><br />马黑黑 发表于 2024-10-21 23:10
俺是很实在的，写不出抽象的东东
{:4_173:}实在的能是永恒的
<p><svg id="msvg" width="400" height="400" viewBox="0 0 400 400"></svg></p>
<script>
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js2024/svgdr_trial.js';
document.body.appendChild(sc);
sc.onload = () => {
var dr = _dr(msvg);
dr.defs('defs');
dr.g('cross').addTo('defs');
dr.line(10,200,390,200,'skyblue','1').set('stroke-lineCap','round').addTo('cross');
dr.line(200,10,200,390,'skyblue','1').set('stroke-lineCap','round').addTo('cross');
for(var i = 0, total = 20; i < total; i ++) {
dr.use('#cross').transform(`rotate(${180 / total * i} 200 100)`);
}
};
</script>
梦江南 发表于 2024-10-22 09:06
跟着老师学代码。谢谢辛苦。
{:4_191:}
花飞飞 发表于 2024-10-22 09:31
所以对小白太友好了，这么简单 的改改就有意想不到的效果
{:4_172:}
花飞飞 发表于 2024-10-22 09:32
实在的能是永恒的
那可不一定
马黑黑 发表于 2024-10-22 12:04
笑得乐不可支。。辛苦一天看到这么欢乐的样子也是开心{:4_173:}
马黑黑 发表于 2024-10-22 12:05
那可不一定
反正不实在的不是永恒的{:4_173:}
马黑黑 发表于 2024-10-22 07:10
分组g可以引用、复用，分组如果不放在defs里，它自己是呈现的。这里的演示是为了说明g可以包含多个元素。
嗯，g可以包含多个元素，还能放在defs里使用。
马黑黑 发表于 2024-10-22 07:11
这个也带js，要是弄个html的更容易懂{:4_173:}
红影 发表于 2024-10-22 21:14
这个也带js，要是弄个html的更容易懂
{:4_181:}
花飞飞 发表于 2024-10-22 18:54
反正不实在的不是永恒的
是啥都行
花飞飞 发表于 2024-10-22 18:53
笑得乐不可支。。辛苦一天看到这么欢乐的样子也是开心
开心是好事
马黑黑 发表于 2024-10-22 21:19
{:4_187:}