用javascript隐藏SVG元素

我想用SVG制作一个JavaScript矢量动画。在开始时，有一个播放按钮。当它被按下时，它开始播放音乐，并且应该隐藏自己。用javascript隐藏SVG元素

这是我的HTML：

<audio> 
     <source src="song.mp3" type="audio/mp3" /> 
    </audio> 

    <svg id="canvas" xmlns:html="http://www.w3.org/1999/xhtml"> 

     <!-- Definitions --> 
     <defs> 
      <linearGradient id="white-grey" x1="0%" y1="0%" x2="0%" y2="100%"> 
       <stop offset="0%" style="stop-color:#F5F5F5;stop-opacity:1" /> 
       <stop offset="100%" style="stop-color:#D9D9D9;stop-opacity:1" /> 
      </linearGradient> 

      <linearGradient id="grey-white" x1="0%" y1="100%" x2="0%" y2="0%"> 
       <stop offset="0%" style="stop-color:#F5F5F5;stop-opacity:1" /> 
       <stop offset="100%" style="stop-color:#D9D9D9;stop-opacity:1" /> 
      </linearGradient> 
     </defs> 

     <g id="play-button" onclick="start()"> 
      <rect x="300" y="200" rx="20" ry="20" width="200" height="100" 
       fill="url(#white-grey)" stroke="#5E5E5E" stroke-width="2"> 
      </rect> 
      <text x="361" y="259" fill="#5E5E5E" font-size="30"> 
       PLAY 
      </text> 
     </g> 
    </svg>

这是我的javascript：

function start() { 

    try { 
     $('audio').currentTime=0; 
    } 
    catch(e) {} 
    $('audio').play(); 

    $('#play-button').css({"visibility":"hidden"}); 

}

我找到的代码，其播放音乐的第一部分。但是，播放按钮不被隐藏。什么问题？

来源

2014-11-24 user2397282

愚蠢的问题，但的ID输出的元素仍然是播放按钮？ – Alex 2014-11-24 13:27:57

是的，它仍然是播放按钮 – user2397282 2014-11-24 13:30:47

改为使用detach - 它从dom中删除元素，但保留引用。

var playButton = $('#play-button'); 

function start() { 

    try { 
     $('audio').currentTime=0; 
    } 
    catch(e) {} 
    $('audio').play(); 

    playButton.detach(); 
} 

//re-add playbutton 
$('#canvas').append(playButton);

来源

2014-11-24 13:28:24

在CSS设置不透明度为隐藏SVG元素

$('#play-button').css({"opacity": 0 });

来源

2014-11-24 13:28:39

尝试用SVG文件本身的工作：

var obj = $('#canvas').get(0); 

obj.onload = function() { 
    var doc = obj.contentDocument; 

    doc.find('#play-button').click(function() { 
    $(this).fadeTo(400, 0); 
    }); 
};

来源

2014-11-24 13:38:49 Alex

用javascript隐藏SVG元素

回答

相关问题