马黑黑 发表于 2024-10-21 20:15

svgdrawer:defs和g应用举例

<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','12').set('stroke-lineCap','round').addTo('cross');
        dr.line(200,10,200,390,'skyblue','12').set('stroke-lineCap','round').addTo('cross');

        for(var i = 0, total = 3; i < total; i ++) {
                dr.use('#cross').transform(`rotate(${180 / total * i} 200 200)`);
        }
};
</script>

马黑黑 发表于 2024-10-21 20:15

代码：

<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','12').set('stroke-lineCap','round').addTo('cross');
        dr.line(200,10,200,390,'skyblue','12').set('stroke-lineCap','round').addTo('cross');

        for(var i = 0, total = 3; i < total; i ++) {
                dr.use('#cross').transform(`rotate(${180 / total * i} 200 200)`);
        }
};
</script>

花飞飞 发表于 2024-10-21 20:54


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

花飞飞 发表于 2024-10-21 20:55

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

花飞飞 发表于 2024-10-21 20:59

本帖最后由 花飞飞 于 2024-10-21 21:03 编辑 <br /><br />

红影 发表于 2024-10-21 21:01

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

红影 发表于 2024-10-21 21:05

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

红影 发表于 2024-10-21 21:09

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

马黑黑 发表于 2024-10-21 21:52

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

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

马黑黑 发表于 2024-10-21 21:53

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

理解正确

马黑黑 发表于 2024-10-21 21:53

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

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

马黑黑 发表于 2024-10-21 21:54

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

效果也是杠杠的

马黑黑 发表于 2024-10-21 21:54

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

是的，多一倍就成

花飞飞 发表于 2024-10-21 21:58

本帖最后由 花飞飞 于 2024-10-24 18:35 编辑 <br /><br />
<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-21 21:58

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

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

花飞飞 发表于 2024-10-21 21:59

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

像不像个鸟巢{:4_173:}

马黑黑 发表于 2024-10-21 21:59

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

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

马黑黑 发表于 2024-10-21 21:59

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

是有点

花飞飞 发表于 2024-10-21 22:05

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

这可不是我的作品，你的作品抽象后的样子{:4_170:}

花飞飞 发表于 2024-10-21 22:06

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

交给画面它可以有无限可能，就这一串代码可以出好多效果
页: [1] 2 3
查看完整版本: svgdrawer:defs和g应用举例