测试 pattern 指令
<svg id="msvg" width="400" height="400" viewBox="-100 -100 200 200"></svg><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.pattern('pat', 10, 10, .1, .1).addTo('defs');
dr.circle(10,10,8,'steelblue').addTo('pat');
dr.circle(0,0,100,'url(#pat)');
};
</script>
一楼代码：
<svg id="msvg" width="400" height="400" viewBox="-100 -100 200 200"></svg>
<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.pattern('pat', 10, 10, .1, .1).addTo('defs');
dr.circle(10,10,8,'steelblue').addTo('pat');
dr.circle(0,0,100,'url(#pat)');
};
</script>
JS 代码解释：
4-6行：加载 svgdrawer 插件；
9行：声明画笔，变量 dr 就是在svg画布上绘图的指令宿主；
10行：创建 defs 标签，id="defs"，此标签的作用是将不需要直接曝露在svg画布上的元素收拢起来；
11行：创建 pattern 标签，id="pat"，此标签的用途是用来装载一个或多个图案，这些图案将成为一个整体用来平铺装饰其他svg实体图案，例中，pattern 宽高设为 0.1*0.1 的尺寸，表示将以百分之十的大小呈现在被平铺的对象上。该标签要加入到 defs 标签中；
12行：画一个小圆，并加入到 pattern 标签中，作为装饰其他图案的图案；
13行：画一个大圆，这个大圆的 fill 属性值为 'url(#pat)'，指向 pattern 图案id.
如果在本地测试，代码会更简洁，我将放在下一层楼
本地测试代码：
<svg id="msvg" width="400" height="400" viewBox="-100 -100 200 200"></svg>
<script src="https://638183.freep.cn/638183/web/js2024/svgdr_trial.js"></script>
<script>
var dr = _dr(msvg);
dr.defs('defs');
dr.pattern('pat', 10, 10, .1, .1).addTo('defs');
dr.circle(10,10,8,'steelblue').addTo('pat');
dr.circle(0,0,100,'url(#pat)');
</script>
一楼JS所生成的XML代码：<div><div class="blockcode"><blockquote><svg id="msvg" width="400" height="400" viewBox="-100 -100 200 200"><br> <defs id="defs"><br> <pattern id="pat" x="10" y="10" width="0.1" height="0.1"><br> <circle cx="10" cy="10" r="8" fill="steelblue"></circle><br> </pattern><br> </defs><br> <circle cx="0" cy="0" r="100" fill="url(#pat)"></circle><br></svg></blockquote></div><br></div> 这个是引用插件绘制图案指令使用实例。
二楼是论坛模式。四楼地板是本地模式，相对论坛模式更简洁
当时看目录时还在想，这个怎么用到贴子里，插件如何使用，这就有应用实例了。。{:4_199:}
这个实例的两种方法都去掉了sc.charset = 'utf-8';这一句。。什么时候才用它呢。 看老师的代码慢慢去理解。老师辛苦了！ 晚上好！{:4_187:} 花飞飞 发表于 2024-10-20 18:48
这个是引用插件绘制图案指令使用实例。
二楼是论坛模式。四楼地板是本地模式，相对论坛模式更简洁
当时看 ...
如果输出汉字、emoji图标不出乱码，就不必用它 梦江南 发表于 2024-10-20 18:55
看老师的代码慢慢去理解。老师辛苦了！
{:4_190:} 马黑黑 发表于 2024-10-20 18:02
JS 代码解释：
4-6行：加载 svgdrawer 插件；
这个说明超级详细，逐字逐句进行解释。
刚试了一下，
其实11行的.1，.1是每个圆所占的位置，行列各10等分。
第12行可设置每个圆的大小，如果把半径8设小一些，圆变小，圆之间的空隙比较大。
第13行的外圆半径设小一些，显示的圆就比较小。。
{:4_170:}
昨天的画布更改在这里还是起了好大作用。只把9-13行放SVG DRAWER工具里，中心点又回到了左上角。
小工具里点右边的SVG代码——生成元素代码，也可以生成5楼XML代码，
这里很简洁，没有JS了，
结构更清晰，每个参数还有CX.CY.R之类的提示，很明显可以看出一个圆在图案之内。。。大圆在外。。
两种都好。。{:4_173:}{:4_189:} 马黑黑 发表于 2024-10-20 18:57
如果输出汉字、emoji图标不出乱码，就不必用它
好哒，我记得跟编码有关。多数做的贴子里都会出现它，现在想来预防乱码的吧。
老师辛苦啦，上茶哈。。{:4_190:} 在封装好的js情况下，去理解pattern 标签还是有点难度的。说穿了，就是“用来平铺装饰其他svg实体图案”，只要记得平铺两字就可以了吧{:4_204:} dr.pattern('pat', 10, 10, .1, .1).addTo('defs');
dr.circle(10,10,8,'steelblue').addTo('pat');
这两个数字必须对应么？也就是pattern设置了从哪以10%的方式平铺（横向纵向各10个），后面的图形也要对应它，平铺起来才好看呗？为什么是10？感觉10%分完后，20才是中心。去试了20，结果只现实1/4了{:5_102:} dr.circle(0,0,100,'url(#pat)');也很奇怪，400的里面做圆半径不应该是200么
看起来这些都是有关联的。试了viewBox="0 0 400 400"和dr.circle(200,200,200,。。。效果完全不同。 马黑黑 发表于 2024-10-20 18:20
一楼JS所生成的XML代码：<svg id="msvg" width="400" height="400" viewBox="-100 -100 200 200"> <d ...
这个更容易看出pattern 标签的作用{:4_204:} 学习了，感谢黑黑的耐心讲解{:4_199:} 花飞飞 发表于 2024-10-20 19:13
这个说明超级详细，逐字逐句进行解释。
刚试了一下，
其实11行的.1，.1是每个圆所占的位置，行列各10等 ...
多多尝试会有很多体会