红影 发表于 2022-9-10 23:49
虽然画得不好看，大小取的和原来一样，但试验里看不到了。
要取代原来的line，且给 polygon 一个相同的id，JS就可以驱动它
红影 发表于 2022-9-10 23:48
哦，直接用线条命令也可以的啊。
是的，用别的也行。svg有一个 marker 指令，可以通过路径画出图案，然后附加到线条、多边形中，典型的用途用于线条，可以放在线段的头尾，或放在折线的端点
马黑黑 发表于 2022-9-11 07:30
你这是用多边形绘制法，画出的当是一个整体，可以直接驱动。
可是，我在本地测试看不到它。
马黑黑 发表于 2022-9-11 07:31
要取代原来的line，且给 polygon 一个相同的id，JS就可以驱动它
原来的ID我留着了的。
马黑黑 发表于 2022-9-11 07:33
是的，用别的也行。svg有一个 marker 指令，可以通过路径画出图案，然后附加到线条、多边形中，典型的用 ...
还能这样玩，有意思{:4_173:}
红影 发表于 2022-9-11 10:11
原来的ID我留着了的。
line 要删除掉，不能有两个相同的id
红影 发表于 2022-9-11 10:12
还能这样玩，有意思
但是相对复杂
红影 发表于 2022-9-11 10:11
可是，我在本地测试看不到它。
我把你的 polygon 放入我的帖子，替代 line，可行：<style>
#papa { margin: auto; width: 1024px; height: 640px; background: #444 url('https://638183.freep.cn/638183/Pic/2022/time.jpg') no-repeat center/cover; display: grid; place-items: center; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#mplayer { position: absolute; }
#tmsg { font: normal 1em sans-serif; fill: #ccc; }
#lrc { position: absolute; top: 10px; left: 10px; font: bold 2em sans-serif; letter-spacing: 3px; animation: mov 20s linear infinite alternate; }
@keyframes mov { to { left: 614px; } }
</style>
<div id="papa">
<svg id="mplayer" viewBox="0 0 100 100" width="100" height="100">
<circle id="track" cx="50" cy="50" r="45" fill="none" stroke="snow" stroke-width="6" style="cursor: pointer" />
<circle cx="50" cy="50" r="4" fill="red" />
<path id="curPath" d="M 10 60 Q 50 0 90 60" fill="none" stroke="none"/>
<path id="durPath" d="M 0 38 Q 50 100 100 38" fill="none" stroke="none"/>
<g id="tmsg">
<text x="52%" y="0"><textPath id="curMsg" xlink:href="#curPath" text-anchor="middle" dominant-baseline="text-after-edge">00:00</textPath></text>
<text x="60%" y="0"><textPath id="durMsg" xlink:href="#durPath" text-anchor="middle" dominant-baseline="text-before-edge">00:00</textPath></text>
</g>
<!--<line x1="50" y1="50" x2="50" y2="10" stroke="red" stroke-width="1" />-->
<polygon id="hand" points="50,50 50,18 47,18 50,10 54,18 51,18 51,50" fill="red" />
<circle id="btnplay" cx="50" cy="50" r="35" fill="transparent" style="cursor: pointer" />
</svg>
<svg id="lrc" width="400" height="60">
<text id="lrctxt" x="50%" y="30" fill="none" stroke="snow" text-anchor="middle" dominant-baseline="middle">纯音乐 - 时间</text>
</svg>
</div>
<script>
let cc = { x: 1*track.getAttribute('cx'), y: 1*track.getAttribute('cy'), };
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1920607219.mp3';
aud.autoplay = true;
aud.loop = true;
aud.addEventListener('timeupdate', () => {
let progress = aud.currentTime * 360 / aud.duration;
hand.setAttribute('transform', 'rotate(' + progress +', 50, 50)');
curMsg.textContent = toMin(aud.currentTime);
durMsg.textContent = toMin(aud.duration);
});
track.onclick = (e) => {
let angle = Math.atan2(e.offsetY - cc.y, e.offsetX - cc.x) * 180 / Math.PI;
angle+= (e.offsetX < cc.x && e.offsetY < cc.y) ? 450 : 90;
aud.currentTime = aud.duration * angle / 360;
}
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
let toMin = (val)=> {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60), sec = parseFloat(val % 60);
if(min < 10) min = '0' + min;
if(sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
</script>
马黑黑 发表于 2022-9-11 10:13
line 要删除掉，不能有两个相同的id
那个已经改掉了啊，不存在line了，现在那句是这样
<id="hand" polygon points="50,50 50,18 47,18 50,10 54,18 51,18 51,50" fill="red"/>
我只是不知道id="hand"应该放到哪，看到你都是放到circle或者line后面的。也不知道是不是要加上path的字样。
马黑黑 发表于 2022-9-11 10:13
但是相对复杂
还是弄点简单的吧，复杂的感觉上就学不会{:4_173:}
红影 发表于 2022-9-11 10:43
还是弄点简单的吧，复杂的感觉上就学不会
svg 天生就是复杂的
红影 发表于 2022-9-11 10:43
那个已经改掉了啊，不存在line了，现在那句是这样
polygon已经画出指针了，就不用 path 了。你用 polygon 画的指针我替换到我的帖子，没问题，代码放在本帖里。
马黑黑 发表于 2022-9-11 11:25
polygon已经画出指针了，就不用 path 了。你用 polygon 画的指针我替换到我的帖子，没问题，代码放在本帖 ...
哦，原来id=要放在polygon points当中，去试了一下，可以了。看到位置也变了，之前是隐藏在后面了吧。
马黑黑 发表于 2022-9-11 11:24
svg 天生就是复杂的
目前介绍的这些还好啊{:4_173:}
红影 发表于 2022-9-11 21:15
目前介绍的这些还好啊
也不简单了，很多人会看的一头雾水
红影 发表于 2022-9-11 21:13
哦，原来id=要放在polygon points当中，去试了一下，可以了。看到位置也变了，之前是隐藏在后面了吧。
没有呀，这句，看看id的位置：
<polygon id="hand" points="50,50 50,18 47,18 50,10 54,18 51,18 51,50" fill="red" />
马黑黑 发表于 2022-9-11 21:17
也不简单了，很多人会看的一头雾水
只要理解那些数字和词汇都是什么意思了，就好啊，又不需要背诵{:4_173:}
马黑黑 发表于 2022-9-11 21:19
没有呀，这句，看看id的位置：
嗯，我把ID地址放错了，放最前面了，以为这个语句是不能拆开的呢。
红影 发表于 2022-9-12 15:25
嗯，我把ID地址放错了，放最前面了，以为这个语句是不能拆开的呢。
id 可以放在标签的任何地方，但id是独立的单位，不能并入其他的参数。
红影 发表于 2022-9-12 15:24
只要理解那些数字和词汇都是什么意思了，就好啊，又不需要背诵
记忆总是需要的，不然自己写的时候，可能连标签代码都写不全