看看这个漂酿不漂酿
<svg width="200" height="200"><defs>
<pattern id="sunflower" width="100%" height="100%" viewBox="0 0 300 300">
<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" />
</pattern>
</defs>
<circle cx="100" cy="100" r="100" fill="url(#sunflower)" />
</svg>
代码
<svg width="200" height="200">
<defs>
<pattern id="sunflower" width="100%" height="100%" viewBox="0 0 300 300">
<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" />
</pattern>
</defs>
<circle cx="100" cy="100" r="100" fill="url(#sunflower)" />
</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
好漂酿
{:4_190:} 红影 发表于 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系列讨论中还有个别 ...
有可能没注意到，所以看着很陌生{:4_173:} 马黑黑 发表于 2023-11-2 21:24
这是正确的解法
不过这个图案非常漂亮{:4_199:} 红影 发表于 2023-11-2 22:07
有可能没注意到，所以看着很陌生
fill-rule 其实也挺复杂的，大概是多重路径或图形有交叉重叠时的计算里、外的规则，共两个：
nonzero 即非零规则，按一定的算法去计算，0 为内，非 0 为外，内则填充，外则不填充（透明）；
evenodd 即奇偶规则，通过一系列计算，得到奇数的是内，偶数的是外，内填充，外透明。
至于怎么计算 0 和 非 0、奇数和偶数，这个可以不用管，不是我们要做的，我们要做的是是否使用填充规则、用哪一个填充规则。 红影 发表于 2023-11-2 22:08
不过这个图案非常漂亮
还不差 哇塞！厉害了！ 醉美水芙蓉 发表于 2023-11-3 07:14
这个做播放器肯定漂亮！接下来看看老师怎么使用？
还木有什么想法 真漂亮！赞一个！{:4_178:} @马黑黑 {:4_176:}，我用你的代码，做了个播放器路径。先尝个鲜！谢谢老师！