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