关山（tzMaker中级教程二配套帖）
<style>@import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
.pa {
--offsetX: 81px;
--bg: url('https://638183.freep.cn/638183/t24/6/gruj.jpg') no-repeat center/cover;
}
.gRot { animation: rotate 8s linear infinite var(--state); }
#msvg { position: absolute; bottom: 20px; }
</style>
<div class="pa">
<svg id="msvg" width="150" height="150" xmlns="http://www.w3.org/2000/svg" viewBox="-100 -100 200 200">
<g stroke="lightyellow" stroke-width="10">
<ellipse id="track" cx="0" cy="0" rx="95" ry="85" fill="none" />
<ellipse id="prog" cx="0" cy="0" rx="95" ry="85" fill="none" stroke="darkorange" />
</g>
</svg>
</div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js?v0';
const tz = TZ.TZ('pa');
tz.add('audio', '', '', {
src: 'https://music.163.com/song/media/outer/url?id=1964981429'
});
tz.add('video', '', 'pd-vid', {
src: 'https://img.tukuppt.com/video_show/7165162/00/20/20/5f20f36d9ecbc.mp4',
style: 'opacity: 0.3;'
});
tz.svgsonsRot(4, 'msvg', 'path', {
d: 'M0 0 C-100 100,100 100,0 0',
fill: 'gold'
}).playmp3();
tz.svgprog('msvg', 'track', 'prog');
</script> 帖子代码
<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
.pa {
--offsetX: 81px;
--bg: url('https://638183.freep.cn/638183/t24/6/gruj.jpg') no-repeat center/cover;
}
.gRot { animation: rotate 8s linear infinite var(--state); }
#msvg { position: absolute; bottom: 20px; }
</style>
<div class="pa">
<svg id="msvg" width="150" height="150" xmlns="http://www.w3.org/2000/svg" viewBox="-100 -100 200 200">
<g stroke="lightyellow" stroke-width="10">
<ellipse id="track" cx="0" cy="0" rx="95" ry="85" fill="none" />
<ellipse id="prog" cx="0" cy="0" rx="95" ry="85" fill="none" stroke="darkorange" />
</g>
</svg>
</div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js?v0';
const tz = TZ.TZ('pa');
tz.add('audio', '', '', {
src: 'https://music.163.com/song/media/outer/url?id=1964981429'
});
tz.add('video', '', 'pd-vid', {
src: 'https://img.tukuppt.com/video_show/7165162/00/20/20/5f20f36d9ecbc.mp4',
style: 'opacity: 0.3;'
});
tz.svgsonsRot(4, 'msvg', 'path', {
d: 'M0 0 C-100 100,100 100,0 0',
fill: 'gold'
}).playmp3();
tz.svgprog('msvg', 'track', 'prog');
</script>如果需要全屏按钮，在JS代码中加入： tz.fs().style('top: 20px; right: 20px; color: yellow');
帖子的SVG以显性方式直接放在帖子容器代码内，并安排了进度条所用到的两个圆环，然后在JS中使用指令 tz.svgprog() 将它们设置为进度条；
小播使用指令 svgsonsRot() 做成，该指令会生成 num 个在 svg 里的 tag，并依次旋转 tag，令它们构成复合图案。代码在 34 ~ 37 行。指令生成的SVG代码将插入到 class="gRot" 的 <g> 分组标签里，该标签如果手工书写，应写在进度条 g 标签的前面（模块自动写在前面）。 一体化生成了小播和进度条，tzMaker还真是想要什么就提取什么就好了，真方便{:4_199:} 讲解完直接给范例，这样特别便于理解，真好{:4_199:} 指令 tz.svgprog() 可以用于以前的制帖模式了呀，谢谢马老师经典示范{:4_180:} 红影 发表于 2025-11-9 20:51
一体化生成了小播和进度条，tzMaker还真是想要什么就提取什么就好了，真方便
这个svg图形的制作，没有 svgdr 的专业和全面，聊胜于无吧 红影 发表于 2025-11-9 20:52
讲解完直接给范例，这样特别便于理解，真好
感谢支持 杨帆 发表于 2025-11-9 21:19
指令 tz.svgprog() 可以用于以前的制帖模式了呀，谢谢马老师经典示范
{:4_190:} 马黑黑 发表于 2025-11-9 22:23
这个svg图形的制作，没有 svgdr 的专业和全面，聊胜于无吧
很好啊，比如我这样的，能学会现在的就很好了，太全面的肯定更难啊{:4_173:} 马黑黑 发表于 2025-11-9 22:24
感谢支持
应该谢谢黑黑才是{:4_187:} 红影 发表于 2025-11-9 22:56
应该谢谢黑黑才是
谢错了 红影 发表于 2025-11-9 22:55
很好啊，比如我这样的，能学会现在的就很好了，太全面的肯定更难啊
svgdr 基本是紧紧贴近SVG标签语法，这个tzMaker是一HTML为主打对象，指令里与SVG相关的就随意一点好了 内行看门道，外行看热闹了。黑黑老师辛苦了！ 梦江南 发表于 2025-11-10 19:23
内行看门道，外行看热闹了。黑黑老师辛苦了！
看看热闹就能看出门道 马黑黑 发表于 2025-11-10 19:34
看看热闹就能看出门道
可是看着数字这么多，有点头晕啊。 梦江南 发表于 2025-11-10 19:37
可是看着数字这么多，有点头晕啊。
是吗？想象一下这些数字都代表钱钱{:4_170:} 漂亮效果，学生已交作业，请老师指正{:4_190:} 马黑黑 发表于 2025-11-9 22:57
谢错了
怎么会错，就是应该谢你呢{:4_187:} 马黑黑 发表于 2025-11-9 22:59
svgdr 基本是紧紧贴近SVG标签语法，这个tzMaker是一HTML为主打对象，指令里与SVG相关的就随意一点好了
嗯嗯，侧重点不同{:4_204:}
页:
[1]
2