我是js新手。有没有一种方法可以使用 svg 创建播放暂停和恢复按钮?我尝试使用 svg 多边形创建它们。但找出坐标似乎很痛苦。
var poly= svg.append("polygon")
.attr("points" ,"20 3, 60,50 60, 40")
.attr("fill", "brown");
poly.on('click', poly_click)
function poly_click() {
console.log("hello");
}
我打算为播放、暂停和停止按钮提供单独的函数处理程序。有什么想法吗?
最佳答案
这是创建播放、暂停和停止按钮的方法:
var xmlns = "http://www.w3.org/2000/svg";
var play = document.createElementNS(xmlns, "svg");
play.setAttribute("width", "20");
play.setAttribute("height", "20");
var pause = document.createElementNS(xmlns, "svg");
pause.setAttribute("width", "15");
pause.setAttribute("height", "20");
var stop = document.createElementNS(xmlns, "svg");
stop.setAttribute("width", "20");
stop.setAttribute("height", "20");
function playButton() {
var polygon = document.createElementNS(xmlns, "polygon");
polygon.setAttribute("points", "0,0 0,20 20,10");
polygon.setAttribute("fill", "green");
play.appendChild(polygon);
document.body.appendChild(play);
}
playButton();
function pauseButton() {
var path = document.createElementNS(xmlns, "path");
path.setAttribute("d", "M0,0 L0,20 L5,20 L5,0 L0,0 M10,0 L10,20 L15,20 L15,0, L10,0");
path.setAttribute("fill", "green");
pause.appendChild(path);
document.body.appendChild(pause);
}
pauseButton();
function stopButton() {
var rect = document.createElementNS(xmlns, "rect");
rect.setAttribute("width", "20");
rect.setAttribute("height", "20");
rect.setAttribute("fill", "red");
stop.appendChild(rect);
document.body.appendChild(stop);
}
stopButton();
svg {
margin: 3px;
}
关于javascript - 创建 svg 媒体控件按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27057952/