svgdr教程·画折线

马黑黑

花飞飞 发表于 2024-11-5 19:34
嗯哪，只能说如果不给线型的话，这几个点就是界碑，圈地儿用的

大概酱紫

花飞飞

马黑黑 发表于 2024-11-5 19:29
俺这个 svgdr 本身就是独一无二的，没人这么弄

纯手工定制，能跟着学的人都是幸福的。。
都习惯你的全网独一份了

花飞飞

马黑黑 发表于 2024-11-5 19:32
只要不禁止fill，折线也是自动封闭的

这跟路径有点像。。。记得在画路径的时候，虽然是沿边走，但也可看得到填充部分

花飞飞

马黑黑 发表于 2024-11-5 19:35
大概酱紫

默认黑色儿，是不是插件里规定好的。。。也可以默认别的颜色吧

马黑黑

花飞飞 发表于 2024-11-5 19:36
这跟路径有点像。。。记得在画路径的时候，虽然是沿边走，但也可看得到填充部分

它们的原理其实一样。多边形、折线，总体看，一个是“成品”，一个是“半成品”，都是靠点坐标组合而成；而 path 路径，是SVG中最厉害的角色，所有基础画图方法都可以用 path 标签完成，基础图像指令完不成的path可以完成；path 先移动画笔到某处（M指令），然后使用各种其他指令完成剩余绘制工作，例如， H、V、L、C、Q、A、Z、S、T 等来完成整个路径的绘制，这些指令大写、小写意义不同——大写表示绝对定位（基于svg坐标系），小写表示相对定位（在SVG坐标系基础上采用相对距离，例如，l 100, 60 表示画一条直线，该直线在刚才的点的基础上，{x,y} 各加 100px、60px)。

马黑黑

花飞飞 发表于 2024-11-5 19:41
默认黑色儿，是不是插件里规定好的。。。也可以默认别的颜色吧

SVG规定好的

花飞飞

马黑黑 发表于 2024-11-5 19:47
它们的原理其实一样。多边形、折线，总体看，一个是“成品”，一个是“半成品”，都是靠点坐标组合而成； ...

前面只是模糊觉得跟路径相似，现在看了之后更清楚些了。。
这里你提到的“基础图像指令完不成的”，应该是指一些更复杂的，比如我说的三角形要更圆角之类的。。
这些其实path 路径却是可以完成的。。

花飞飞

马黑黑 发表于 2024-11-5 19:47
它们的原理其实一样。多边形、折线，总体看，一个是“成品”，一个是“半成品”，都是靠点坐标组合而成； ...

path路径中指令的大小写意义不同，这点有印象。。。
这么细致的区分，也是为了更好的完成要绘制的图案吧。。
l 100, 60这是小写的L，所以表示相对定位。要XY加上相应的数据。
明白了，这方面的知识还是很多的。。
博大精深。。。

花飞飞

马黑黑 发表于 2024-11-5 19:49
SVG规定好的

永远时尚的黑色儿。这就是优势

马黑黑

花飞飞 发表于 2024-11-5 20:38
path路径中指令的大小写意义不同，这点有印象。。。
这么细致的区分，也是为了更好的完成要绘制的图案吧 ...

path用到这些指令

红影

马黑黑 发表于 2024-11-5 19:22
猪比特之箭

被射中就同化成猪了

红影

马黑黑 发表于 2024-11-5 19:24
这里面有着复杂的内区域和外区域分界，fill-rule的取值效果在更复杂交叉的图案中能够体现出来

这个内区域和外区域的判断有些复杂呢。

红影

马黑黑 发表于 2024-11-5 19:25
参考资料：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/fill-rule

去看了，更奇妙的是，即使相同图形，画的顺序不同的时候，内外区域竟会不同呢

红影

马黑黑 发表于 2024-11-5 19:26
都可以直接写，不过一般的建议是，当值较长，声明一个变量会更好：逻辑上更清晰，修改更容易。

嗯嗯，记下了，当值比较多的时候，声明个变量会更清晰些。

红影

马黑黑 发表于 2024-11-5 19:28
不过请留意，如果折线能够包围区域，默认可以 fill，这意味着它也具备自封闭能力

嗯，上面的黑三角就是如此。也就是画个折线，即使没回到起点，那个区域也是内区域。
这个教程里的填充和不填充，差异十分大，这个和之前的教程最明显的不同之处。

红影

马黑黑 发表于 2024-11-5 19:25 参考资料：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/fill-rule

从那里搬个例子来。第一个用的fill-rule="evenodd"，第二个用的fill-rule="nonzero"（缺省）

红影

fill-rule 属性为如何确定一个形状的内部（即可以被填充的区域）提供了两个可选值：

nonzero（缺省）
从该点向任意方向的无限远处绘制射线，然后检测形状与射线相交的位置。从 0 开始统计，路径上每一条从左到右（顺时针）跨过射线的线段都会让结果加 1，每条从右向左（逆时针）跨过射线的线段都会让结果减 1。当统计结束后，如果结果为 0，则点在外部；如果结果不为 0，则点在内部。

evenodd
从该点向任意方向无限远处绘制射线，并统计这个形状所有的路径段中，与射线相交的路径段的数量。如果有奇数个路径段与射线相交，则点在内部；如果有偶数个，则点在外部。

看着两个五角星，对着这两段话，想了又想，还是成功地把自己绕迷糊了

马黑黑

红影 发表于 2024-11-5 23:29
fill-rule 属性为如何确定一个形状的内部（即可以被填充的区域）提供了两个可选值：

nonzero（缺省）

射线就相当于几何学中的人工辅助线

花飞飞

马黑黑 发表于 2024-11-5 21:36
path用到这些指令

这个又是个很大块的课程了。。。两三课完不了

红影

马黑黑 发表于 2024-11-6 07:36
射线就相当于几何学中的人工辅助线

也就是做判断的参照线呗。