测试 pattern 指令

马黑黑

马黑黑

一楼代码：

1. <svg id="msvg" width="400" height="400" viewBox="-100 -100 200 200"></svg>
   
2. 
   
3. <script>
   
4. var sc = document.createElement('script');
   
5. sc.src = 'https://638183.freep.cn/638183/web/js2024/svgdr_trial.js';
   
6. document.body.appendChild(sc);
   
7. 
   
8. sc.onload = () => {
   
9.         var dr = _dr(msvg);
   
10.         dr.defs('defs');
    
11.         dr.pattern('pat', 10, 10, .1, .1).addTo('defs');
    
12.         dr.circle(10,10,8,'steelblue').addTo('pat');
    
13.         dr.circle(0,0,100,'url(#pat)');
    
14. };
    
15. </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.

如果在本地测试，代码会更简洁，我将放在下一层楼

马黑黑

本地测试代码：

1. <svg id="msvg" width="400" height="400" viewBox="-100 -100 200 200"></svg>
   
2. 
   
3. <script src="https://638183.freep.cn/638183/web/js2024/svgdr_trial.js"></script>
   
4. 
   
5. <script>
   
6. var dr = _dr(msvg);
   
7. dr.defs('defs');
   
8. dr.pattern('pat', 10, 10, .1, .1).addTo('defs');
   
9. dr.circle(10,10,8,'steelblue').addTo('pat');
   
10. dr.circle(0,0,100,'url(#pat)');
    
11. </script>

复制代码

马黑黑

一楼JS所生成的XML代码：

<svg id="msvg" width="400" height="400" viewBox="-100 -100 200 200">
<defs id="defs">
<pattern id="pat" x="10" y="10" width="0.1" height="0.1">
<circle cx="10" cy="10" r="8" fill="steelblue"></circle>
</pattern>
</defs>
<circle cx="0" cy="0" r="100" fill="url(#pat)"></circle>
</svg>

花飞飞

这个是引用插件绘制图案指令使用实例。
二楼是论坛模式。四楼地板是本地模式，相对论坛模式更简洁
当时看目录时还在想，这个怎么用到贴子里，插件如何使用，这就有应用实例了。。

这个实例的两种方法都去掉了sc.charset = 'utf-8';这一句。。什么时候才用它呢。

梦江南

看老师的代码慢慢去理解。老师辛苦了！

梦江南

晚上好！

马黑黑

花飞飞 发表于 2024-10-20 18:48
这个是引用插件绘制图案指令使用实例。
二楼是论坛模式。四楼地板是本地模式，相对论坛模式更简洁
当时看 ...

如果输出汉字、emoji图标不出乱码，就不必用它

马黑黑

梦江南 发表于 2024-10-20 18:55
看老师的代码慢慢去理解。老师辛苦了！

花飞飞

马黑黑 发表于 2024-10-20 18:02
JS 代码解释：

4-6行：加载 svgdrawer 插件；

这个说明超级详细，逐字逐句进行解释。
刚试了一下，
其实11行的.1，.1是每个圆所占的位置，行列各10等分。
第12行可设置每个圆的大小，如果把半径8设小一些，圆变小，圆之间的空隙比较大。
第13行的外圆半径设小一些，显示的圆就比较小。。

花飞飞

昨天的画布更改在这里还是起了好大作用。只把9-13行放SVG DRAWER工具里，中心点又回到了左上角。

花飞飞

小工具里点右边的SVG代码——生成元素代码，也可以生成5楼XML代码，
这里很简洁，没有JS了，
结构更清晰，每个参数还有CX.CY.R之类的提示，很明显可以看出一个圆在图案之内。。。大圆在外。。

两种都好。。

花飞飞

马黑黑 发表于 2024-10-20 18:57
如果输出汉字、emoji图标不出乱码，就不必用它

好哒，我记得跟编码有关。多数做的贴子里都会出现它，现在想来预防乱码的吧。
老师辛苦啦，上茶哈。。

红影

在封装好的js情况下，去理解pattern 标签还是有点难度的。说穿了，就是“用来平铺装饰其他svg实体图案”，只要记得平铺两字就可以了吧

红影

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了

红影

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代码：&lt;svg id="msvg" width="400" height="400" viewBox="-100 -100 200 200"&gt;        &lt;d ...

这个更容易看出pattern 标签的作用

红影

学习了，感谢黑黑的耐心讲解

马黑黑

花飞飞 发表于 2024-10-20 19:13
这个说明超级详细，逐字逐句进行解释。
刚试了一下，
其实11行的.1，.1是每个圆所占的位置，行列各10等 ...

多多尝试会有很多体会