svgdr : css和js指令

马黑黑

马黑黑

一楼，分别使用 css() 指令和 js(jscode) 实现对圆形、矩形图案的交互功能（单击矩形变色，指针移到圆变大）。代码：

1. <svg id="mysvg" width="600" height="400"></svg>
   
2. 
   
3. <script>
   
4. //加载svgdr插件
   
5. var sc = document.createElement('script');
   
6. sc.src = 'https://638183.freep.cn/638183/web/js2024/svgdr_trial.js?v=0.6';
   
7. document.body.appendChild(sc);
   
8. 
   
9. sc.onload = () => {
   
10.         var dr = _dr('mysvg'); //画笔
    
11. 
    
12.         //声明svg内部CSS变量
    
13.         var css_str = `
    
14.                 .cc { fill: violet; stroke: darkred; stroke-width: 6; transition: .75s; }
    
15.                 .cc:hover { r: 60; }
    
16.         `;
    
17. 
    
18.         dr.css(css_str); //svg内部 style : 圆的样式与hover交互
    
19. 
    
20.         //绘制10个圆 : set指令指明 class 属性
    
21.         for (let i = 0, tt = 8; i < tt; i ++) {
    
22.                 let cx = i * 60 + 60;
    
23.                 dr.circle(cx, 300, 20, 'pink').set('class', 'cc');
    
24.         }
    
25. 
    
26.         dr.rect(60,60,180,80,0,0,'cadetblue').id('R1'); //画矩形
    
27. 
    
28.         //svg内部js : 点击矩形变色
    
29.         dr.js(`
    
30.                 R1.onclick = () => {
    
31.                         var color = '#' + Math.random().toString(16).substring(2,8);
    
32.                         R1.setAttribute('fill', color);
    
33.                 }
    
34.         `);
    
35. };
    
36. </script>

复制代码

马黑黑

css() 和 js() 指令均建立 svg 内部相关标签，即 style 和 script 标签，它们作用于SVG自身。js指令建议建议写在最后面。

两个指令的具体内容都只需要纯CSS或JS代码，不必加上 style 和 script 标签，具体参阅二楼代码的写法。

红影

又是一个新的封装，可以接受svg内部CSS变量和js指令。这个真方便

梦江南

黑黑老师太厉害了，对代码随意玩就玩出新花样。

马黑黑

红影 发表于 2024-10-26 13:18
又是一个新的封装，可以接受svg内部CSS变量和js指令。这个真方便

CSS早做好的，没说而已

马黑黑

梦江南 发表于 2024-10-26 15:00
黑黑老师太厉害了，对代码随意玩就玩出新花样。

花飞飞

这个互动动态的比较好玩。。
画8个圆跟今天《月背》里绘9个椭圆的手法是一样的吧。。。
看了JS文件名，月背更新版本一些。。

红影

马黑黑 发表于 2024-10-26 15:50
CSS早做好的，没说而已

又加了js的才封装的吧，更完美了

花飞飞

JS里的代码好壮观啊，这么多行密密麻麻一点都不能出错，我们看着简洁，其实背后完成了大量工作。。。

马黑黑

花飞飞 发表于 2024-10-26 19:36
JS里的代码好壮观啊，这么多行密密麻麻一点都不能出错，我们看着简洁，其实背后完成了大量工作。。。{:4_17 ...

也没多少，目前就400行左右的代码，你看人家的插件十几万行代码是小菜一碟

马黑黑

红影 发表于 2024-10-26 19:34
又加了js的才封装的吧，更完美了

svg内部JS用途其实不大，不过也挺好

马黑黑

花飞飞 发表于 2024-10-26 19:32
这个互动动态的比较好玩。。
画8个圆跟今天《月背》里绘9个椭圆的手法是一样的吧。。。
看了JS文件名，月 ...

引用的版本号是假的，都是同一个插件

马黑黑

梦江南 发表于 2024-10-26 15:00
黑黑老师太厉害了，对代码随意玩就玩出新花样。

小辣椒

黑黑的新产品

马黑黑

小辣椒 发表于 2024-10-26 20:42
黑黑的新产品

不新了，都已经不穿开裆裤了

花飞飞

马黑黑 发表于 2024-10-26 20:39
也没多少，目前就400行左右的代码，你看人家的插件十几万行代码是小菜一碟

比如PS里的滤镜插件或者磨皮？我看到的就是安装就成。。代码估讲海量

花飞飞

马黑黑 发表于 2024-10-26 20:40
引用的版本号是假的，都是同一个插件

原来这样，？号后面是啥都差不多呀。。这个插件挺神的。。。

马黑黑

花飞飞 发表于 2024-10-26 20:49
比如PS里的滤镜插件或者磨皮？我看到的就是安装就成。。代码估讲海量

插件的代码量也会很大，不过没有源程序大。好比一个人，如果一个人是ps，那么，插件可能只是一只手套的大小。

小辣椒

马黑黑 发表于 2024-10-26 20:44
不新了，都已经不穿开裆裤了