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