svg锯片

马黑黑 发表于 2024-9-17 11:54

马黑黑 发表于 2024-9-17 11:55

一楼源码
<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>
<p><br><br><input id="mkcode" type="button" value="显示svg代码" onclick="txtbox.style.display='inline-block';" /></p>
<p><br><br><textarea id="txtbox" style="min-width: 600px; min-height: 300px; display: none;"></textarea></p>

<script>
var svg = document.querySelector('svg');

mkTriangle = (num=6) => {
var triStr = '';
Array(num).fill(0).forEach((a,b) => {
var angle = 360 / num * b, bg = `#${Math.random().toString(16).substring(2,8)}90`;
triStr += `<polygon points="-25 5,25 -25, 0 50" fill="${bg}" transform="rotate(${angle}) translate(0,-50)"/>`;
});
return triStr;
};

svg.innerHTML = mkTriangle(15);
txtbox.value = svg.outerHTML;
</script>

红影发表于 2024-9-17 11:57

是三角形不散开来，就能形成锯片吧。
等源码{:4_204:}

梦江南 发表于 2024-9-17 15:59

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

马黑黑 发表于 2024-9-17 16:00

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

还可以的

马黑黑 发表于 2024-9-17 16:00

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

源码不在二楼吗

梦江南 发表于 2024-9-17 16:07

本帖最后由马黑黑于 2024-9-17 16:13 编辑 <br /><br /><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">
<polygon points="-25 5,25 -25, 0 50" fill="#98ebee90" transform="rotate(0) translate(0,-50)"></polygon>

<polygon points="-25 5,25 -25, 0 50" fill="#cd3a6e90" transform="rotate(24) translate(0,-50)"></polygon>

<polygon points="-25 5,25 -25, 0 50" fill="#f2972d90" transform="rotate(48) translate(0,-50)"></polygon>

<polygon points="-25 5,25 -25, 0 50" fill="#ceda4990" transform="rotate(72) translate(0,-50)"></polygon>

<polygon points="-25 5,25 -25, 0 50" fill="#85eb0f90" transform="rotate(96) translate(0,-50)"></polygon>

<polygon points="-25 5,25 -25, 0 50" fill="#7f816890" transform="rotate(120) translate(0,-50)"></polygon>

<polygon points="-25 5,25 -25, 0 50" fill="#393dc590" transform="rotate(144) translate(0,-50)"></polygon>

<polygon points="-25 5,25 -25, 0 50" fill="#c2768d90" transform="rotate(168) translate(0,-50)"></polygon>

<polygon points="-25 5,25 -25, 0 50" fill="#e1403e90" transform="rotate(192) translate(0,-50)"></polygon>

<polygon points="-25 5,25 -25, 0 50" fill="#1360ca90" transform="rotate(216) translate(0,-50)"></polygon>

<polygon points="-25 5,25 -25, 0 50" fill="#18b06790" transform="rotate(240) translate(0,-50)"></polygon>

<polygon points="-25 5,25 -25, 0 50" fill="#104b3090" transform="rotate(264) translate(0,-50)"></polygon>

<polygon points="-25 5,25 -25, 0 50" fill="#cf01a190" transform="rotate(288) translate(0,-50)"></polygon>

<polygon points="-25 5,25 -25, 0 50" fill="#23732b90" transform="rotate(312) translate(0,-50)"></polygon>

<polygon points="-25 5,25 -25, 0 50" fill="#55586f90" transform="rotate(336) translate(0,-50)"></polygon>
</svg>

马黑黑 发表于 2024-9-17 16:10

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

mkTriangle = (num=6) => {

这是查看锯片的代码。

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

梦江南 发表于 2024-9-17 16:11

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

梦江南 发表于 2024-9-17 16:19

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

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

谢谢老师讲解指导！

花飞飞 发表于 2024-9-17 17:22

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

花飞飞 发表于 2024-9-17 17:22

花飞飞 发表于 2024-9-17 17:24

仿了一个，怎么有点削头切脚的样纸。。{:4_170:}

花飞飞 发表于 2024-9-17 17:33

花飞飞 发表于 2024-9-17 17:34

好玩又好用{:4_173:}

马黑黑 发表于 2024-9-17 22:08

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

{:4_190:}

红影发表于 2024-9-17 22:49

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

哈，回帖的时候的时间差，那时还没看到{:4_173:}

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

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

酱紫

红影发表于 2024-9-17 23:18

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

光顾着去看点开的那些了{:4_173:}

马黑黑 发表于 2024-9-18 17:43

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

{:4_203:}

页: [1] 2

花潮论坛's Archiver

svg锯片