svg锯片

马黑黑

马黑黑

一楼源码

1. <svg version="1.1" width="160" height="160" viewBox="-80 -80 160 160" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
   
2. <p><br><br><input id="mkcode" type="button" value="显示svg代码" onclick="txtbox.style.display='inline-block';" /></p>
   
3. <p><br><br><textarea id="txtbox" style="min-width: 600px; min-height: 300px; display: none;"></textarea></p>
   
4. 
   
5. <script>
   
6. var svg = document.querySelector('svg');
   
7. 
   
8. mkTriangle = (num=6) => {
   
9.         var triStr = '';
   
10.         Array(num).fill(0).forEach((a,b) => {
    
11.                 var angle = 360 / num * b, bg = `#${Math.random().toString(16).substring(2,8)}90`;
    
12.                 triStr += `<polygon points="-25 5,25 -25, 0 50" fill="${bg}" transform="rotate(${angle}) translate(0,-50)"/>`;
    
13.         });
    
14.         return triStr;
    
15. };
    
16. 
    
17. svg.innerHTML = mkTriangle(15);
    
18. txtbox.value = svg.outerHTML;
    
19. </script>

复制代码

红影

是三角形不散开来，就能形成锯片吧。
等源码

梦江南

这锯片做播放器也很漂亮的。

马黑黑

梦江南 发表于 2024-9-17 15:59
这锯片做播放器也很漂亮的。

还可以的

马黑黑

红影 发表于 2024-9-17 11:57
是三角形不散开来，就能形成锯片吧。
等源码

源码不在二楼吗

梦江南

[i=s] 本帖最后由 马黑黑 于 2024-9-17 16:13 编辑 [/i]

马黑黑

梦江南 发表于 2024-9-17 16:07
var svg = document.querySelector('svg');

mkTriangle = (num=6) => {

这是查看锯片的代码。

svg代码是JS生成的。你可以拷贝所查看到的代码为己用，比如存在自己的电脑里，文件名为 xxx.svg，例如 锯片.svg，然后拖到浏览器界面中来你就能看到效果。你也可以将文件上传到你的空间，然后向使用图片一样使用它。

梦江南

黑黑老师，怎么不显示呢？

梦江南

马黑黑 发表于 2024-9-17 16:10
这是查看锯片的代码。

svg代码是JS生成的。你可以拷贝所查看到的代码为己用，比如存在自己的电脑里， ...

谢谢老师讲解指导！

花飞飞

这锯片的色彩好漂亮的。都有90的透明度吧，跟玉片片一样好看。。

花飞飞

花飞飞

仿了一个，怎么有点削头切脚的样纸。。

花飞飞

花飞飞

好玩又好用

马黑黑

花飞飞 发表于 2024-9-17 17:34
好玩又好用

红影

马黑黑 发表于 2024-9-17 16:00
源码不在二楼吗

哈，回帖的时候的时间差，那时还没看到

马黑黑

红影 发表于 2024-9-17 22:49
哈，回帖的时候的时间差，那时还没看到

酱紫

红影

马黑黑 发表于 2024-9-17 23:01
酱紫

光顾着去看点开的那些了

马黑黑

红影 发表于 2024-9-17 23:18
光顾着去看点开的那些了