看看这个漂酿不漂酿

马黑黑

马黑黑

代码

1. <svg width="200" height="200">
   
2.         <defs>
   
3.                 <pattern id="sunflower" width="100%" height="100%" viewBox="0 0 300 300">
   
4.                         <polygon fill="red" stroke="green" fill-rule="evenodd" points="300.00,150.00 2.28,123.95 290.95,201.30 20.10,75.00 264.91,246.42 53.58,35.09 225.00,279.90 98.70,9.05 176.05,297.72 150.00,0.00 123.95,297.72 201.30,9.05 75.00,279.90 246.42,35.09 35.09,246.42 279.90,75.00 9.05,201.30 297.72,123.95 0.00,150.00 297.72,176.05 9.05,98.70 279.90,225.00 35.09,53.58 246.42,264.91 75.00,20.10 201.30,290.95 123.95,2.28 150.00,300.00 176.05,2.28 98.70,290.95 225.00,20.10 53.58,264.91 264.91,53.58 20.10,225.00 290.95,98.70 2.28,176.05" />
   
5.                 </pattern>
   
6.         </defs>
   
7. 
   
8.         <circle cx="100" cy="100" r="100" fill="url(#sunflower)" />
   
9. </svg>

复制代码

马黑黑

我们可以通过软件制作或从网上找到一些好看的 svg 图案，这些图案，不论是用 path 制作的，还是svg其他图形元素弄成的，或是单个的，或是组合的，拿到后，我们用pattern把它封装起来。pattern的viewBox的宽高设置要等于这些图案的宽高边界尺寸。

然后，假设我们希望图形单独且能完整呈现，pattern的宽高设为 100%，再通过呈现图案的目标图形（比如本例的circle）来设定图案的最终呈现的尺寸。

红影

去看了一下，这个polygon路径本来就是这个形状，只是大小是300*300的。
现在用pattern和viewBox把它放入200*200的svg里了。

红影

fill-rule="evenodd" 看着不熟。

小文

好漂酿

马黑黑

红影 发表于 2023-11-2 21:05
fill-rule="evenodd" 看着不熟。

fill-rule 是一个表现属性，它定义了用来确定一个多边形内部区域的算法，在css-doodle系列讨论中还有个别其他的场合提到过

马黑黑

小文 发表于 2023-11-2 21:18
好漂酿

马黑黑

红影 发表于 2023-11-2 21:01
去看了一下，这个polygon路径本来就是这个形状，只是大小是300*300的。
现在用pattern和viewBox把它放入20 ...

这是正确的解法

梦油

这个图案的制作一定很复杂吧，不过，它倒是很漂亮。

马黑黑

梦油 发表于 2023-11-2 21:26
这个图案的制作一定很复杂吧，不过，它倒是很漂亮。

不算复杂吧，就是绕来绕去绕绕成的

红影

马黑黑 发表于 2023-11-2 21:24
fill-rule 是一个表现属性，它定义了用来确定一个多边形内部区域的算法，在css-doodle系列讨论中还有个别 ...

有可能没注意到，所以看着很陌生

红影

马黑黑 发表于 2023-11-2 21:24
这是正确的解法

不过这个图案非常漂亮

马黑黑

红影 发表于 2023-11-2 22:07
有可能没注意到，所以看着很陌生

fill-rule 其实也挺复杂的，大概是多重路径或图形有交叉重叠时的计算里、外的规则，共两个：

nonzero 即非零规则，按一定的算法去计算，0 为内，非 0 为外，内则填充，外则不填充（透明）；

evenodd 即奇偶规则，通过一系列计算，得到奇数的是内，偶数的是外，内填充，外透明。

至于怎么计算 0 和 非 0、奇数和偶数，这个可以不用管，不是我们要做的，我们要做的是是否使用填充规则、用哪一个填充规则。

马黑黑

红影 发表于 2023-11-2 22:08
不过这个图案非常漂亮

还不差

亚伦影音工作室

哇塞！厉害了！

马黑黑

醉美水芙蓉 发表于 2023-11-3 07:14
这个做播放器肯定漂亮！接下来看看老师怎么使用？

还木有什么想法

焱鑫磊

真漂亮！赞一个！

亦是金

@马黑黑 ，我用你的代码，做了个播放器路径。先尝个鲜！谢谢老师！