svgdrawer:defs和g应用举例

马黑黑

马黑黑

代码：

1. <p><svg id="msvg" width="400" height="400" viewBox="0 0 400 400"></svg></p>
   
2. 
   
3. <script>
   
4. 
   
5. var sc = document.createElement('script');
   
6. sc.src = 'https://638183.freep.cn/638183/web/js2024/svgdr_trial.js';
   
7. document.body.appendChild(sc);
   
8. 
   
9. sc.onload = () => {
   
10.         var dr = _dr(msvg);
    
11. 
    
12.         dr.defs('defs');
    
13.         dr.g('cross').addTo('defs');
    
14.         dr.line(10,200,390,200,'skyblue','12').set('stroke-lineCap','round').addTo('cross');
    
15.         dr.line(200,10,200,390,'skyblue','12').set('stroke-lineCap','round').addTo('cross');
    
16. 
    
17.         for(var i = 0, total = 3; i < total; i ++) {
    
18.                 dr.use('#cross').transform(`rotate(${180 / total * i} 200 200)`);
    
19.         }
    
20. };
    
21. </script>

复制代码

花飞飞

先画一条蓝色的加圆头的粗横线，再画一条同样规格的竖线。。。
都通过addTo加到g的分组('cross')，放入创建好的defs('defs');标签内

花飞飞

两组同时设计数量后，通过计算180除以数量得到旋转角度
这一步看着有点面熟。。
并设轩旋转点在200 200位置
如果改动旋转点，会有点意想不到的效果出现。。

花飞飞

红影

飞飞说得对，就是这样把g分组添加到defs，得到一个大十字。
然后旋转分组，就得到上面效果了。

红影

本来还在想旋转的是60度，怎么看着分隔是30度，就是因为是十字的缘故。
如果取消竖线，让total = 6;也能得到这个效果。

红影

g分组有个名称，然后对这个名称做旋转等设置，可以对分组里的所有都有效。

马黑黑

红影 发表于 2024-10-21 21:09
g分组有个名称，然后对这个名称做旋转等设置，可以对分组里的所有都有效。

是的。现在，实现CSS动画已经不是问题了

马黑黑

花飞飞 发表于 2024-10-21 20:54
先画一条蓝色的加圆头的粗横线，再画一条同样规格的竖线。。。
都通过addTo加到g的分组('cross')，放入 ...

理解正确

马黑黑

花飞飞 发表于 2024-10-21 20:55
两组同时设计数量后，通过计算180除以数量得到旋转角度
这一步看着有点面熟。。
并设轩旋转点在200 200位 ...

会移位。不过有时候移位也是一种效果

马黑黑

花飞飞 发表于 2024-10-21 20:59
本帖最后由 花飞飞 于 2024-10-21 21:03 编辑

效果也是杠杠的

马黑黑

红影 发表于 2024-10-21 21:05
本来还在想旋转的是60度，怎么看着分隔是30度，就是因为是十字的缘故。
如果取消竖线，让total = 6;也能得 ...

是的，多一倍就成

花飞飞

花飞飞

马黑黑 发表于 2024-10-21 21:53
会移位。不过有时候移位也是一种效果

代码很神奇，即使移位也有一种怪味美感

花飞飞

马黑黑 发表于 2024-10-21 21:54
效果也是杠杠的

像不像个鸟巢

马黑黑

花飞飞 发表于 2024-10-21 21:58
代码很神奇，即使移位也有一种怪味美感

对。你那个作品有意识流的味道，或者是抽象派的画作

马黑黑

花飞飞 发表于 2024-10-21 21:59
像不像个鸟巢

是有点

花飞飞

马黑黑 发表于 2024-10-21 21:59
对。你那个作品有意识流的味道，或者是抽象派的画作

这可不是我的作品，你的作品抽象后的样子

花飞飞

马黑黑 发表于 2024-10-21 21:59
是有点

交给画面它可以有无限可能，就这一串代码可以出好多效果