javascript - 创建 svg 媒体控件按钮

Question

我是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");
}

我打算为播放、暂停和停止按钮提供单独的函数处理程序。有什么想法吗？

Answer 1

这是创建播放、暂停和停止按钮的方法:

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;
}