用javascript隐藏SVG元素

Question

I'm trying to make a javascript vector animation with SVG. At the start, there is a play button. When this is pressed, it starts the music and should hide itself.

This is my 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>

And this is my javascript:

function start() {

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

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

}

I found the first part of the code, which plays the music. However, the play button is not being hidden. What is going wrong??

Answer 1

Use detach instead - it removes the element from the dom but keeps the reference.

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

function start() {

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

    playButton.detach();
}

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

Answer 2

Set opacity in css for hide svg elements

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

Link

Answer 3

Try to work with the SVG document itself:

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

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

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