用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"});
}
我找到的代码,其播放音乐的第一部分。但是,播放按钮不被隐藏。什么问题?
答
改为使用detach - 它从dom中删除元素,但保留引用。
var playButton = $('#play-button');
function start() {
try {
$('audio').currentTime=0;
}
catch(e) {}
$('audio').play();
playButton.detach();
}
//re-add playbutton
$('#canvas').append(playButton);
答
在CSS设置不透明度为隐藏SVG元素
$('#play-button').css({"opacity": 0 });
答
尝试用SVG文件本身的工作:
var obj = $('#canvas').get(0);
obj.onload = function() {
var doc = obj.contentDocument;
doc.find('#play-button').click(function() {
$(this).fadeTo(400, 0);
});
};
愚蠢的问题,但的ID输出的元素仍然是播放按钮? – Alex 2014-11-24 13:27:57
是的,它仍然是播放按钮 – user2397282 2014-11-24 13:30:47