svgdr : css和js指令
<p style="text-align:center;"><svg id="mysvg" width="600" height="400"></svg>
</p>
<script>
//加载svgdr插件
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js2024/svgdr_trial.js?v=0.6';
document.body.appendChild(sc);
sc.onload = () => {
var dr = _dr('mysvg'); //画笔
//声明svg内部CSS变量
var css_str = `
.cc { fill: violet; stroke: darkred; stroke-width: 6; transition: .75s; }
.cc:hover { r: 60; }
`;
dr.css(css_str); //svg内部 style : 圆的样式与hover交互
//绘制10个圆 : set指令指明 class 属性
for (let i = 0, tt = 8; i < tt; i ++) {
let cx = i * 60 + 60;
dr.circle(cx, 300, 20, 'pink').set('class', 'cc');
}
dr.rect(60,60,180,80,0,0,'cadetblue').id('R1'); //画矩形
//svg内部js : 点击矩形变色
dr.js(`
R1.onclick = () => {
var color = '#' + Math.random().toString(16).substring(2,8);
R1.setAttribute('fill', color);
}
`);
};
</script>
本帖最后由 马黑黑 于 2024-10-26 13:09 编辑
一楼，分别使用 css() 指令和 js(jscode) 实现对圆形、矩形图案的交互功能（单击矩形变色，指针移到圆变大）。代码：
<svg id="mysvg" width="600" height="400"></svg>
<script>
//加载svgdr插件
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js2024/svgdr_trial.js?v=0.6';
document.body.appendChild(sc);
sc.onload = () => {
var dr = _dr('mysvg'); //画笔
//声明svg内部CSS变量
var css_str = `
.cc { fill: violet; stroke: darkred; stroke-width: 6; transition: .75s; }
.cc:hover { r: 60; }
`;
dr.css(css_str); //svg内部 style : 圆的样式与hover交互
//绘制10个圆 : set指令指明 class 属性
for (let i = 0, tt = 8; i < tt; i ++) {
let cx = i * 60 + 60;
dr.circle(cx, 300, 20, 'pink').set('class', 'cc');
}
dr.rect(60,60,180,80,0,0,'cadetblue').id('R1'); //画矩形
//svg内部js : 点击矩形变色
dr.js(`
R1.onclick = () => {
var color = '#' + Math.random().toString(16).substring(2,8);
R1.setAttribute('fill', color);
}
`);
};
</script>
css() 和 js() 指令均建立 svg 内部相关标签，即 style 和 script 标签，它们作用于SVG自身。js指令建议建议写在最后面。
两个指令的具体内容都只需要纯CSS或JS代码，不必加上 style 和 script 标签，具体参阅二楼代码的写法。 又是一个新的封装，可以接受svg内部CSS变量和js指令。这个真方便{:4_187:} 黑黑老师太厉害了，对代码随意玩就玩出新花样。{:4_190:} 红影 发表于 2024-10-26 13:18
又是一个新的封装，可以接受svg内部CSS变量和js指令。这个真方便
CSS早做好的，没说而已 梦江南 发表于 2024-10-26 15:00
黑黑老师太厉害了，对代码随意玩就玩出新花样。
{:4_190:} 这个互动动态的比较好玩。。
画8个圆跟今天《月背》里绘9个椭圆的手法是一样的吧。。。
看了JS文件名，月背更新版本一些。。 马黑黑 发表于 2024-10-26 15:50
CSS早做好的，没说而已
又加了js的才封装的吧，更完美了{:4_187:} JS里的代码好壮观啊，这么多行密密麻麻一点都不能出错，我们看着简洁，其实背后完成了大量工作。。。{:4_173:} 花飞飞 发表于 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
黑黑老师太厉害了，对代码随意玩就玩出新花样。
{:4_190:} 黑黑的新产品{:4_199:} 小辣椒 发表于 2024-10-26 20:42
黑黑的新产品
不新了，都已经不穿开裆裤了 马黑黑 发表于 2024-10-26 20:39
也没多少，目前就400行左右的代码，你看人家的插件十几万行代码是小菜一碟
比如PS里的滤镜插件或者磨皮？我看到的就是安装就成。。代码估讲海量 马黑黑 发表于 2024-10-26 20:40
引用的版本号是假的，都是同一个插件
原来这样，？号后面是啥都差不多呀。。这个插件挺神的。。。{:4_170:} 花飞飞 发表于 2024-10-26 20:49
比如PS里的滤镜插件或者磨皮？我看到的就是安装就成。。代码估讲海量
插件的代码量也会很大，不过没有源程序大。好比一个人，如果一个人是ps，那么，插件可能只是一只手套的大小。 马黑黑 发表于 2024-10-26 20:44
不新了，都已经不穿开裆裤了
{:4_203:}