Question

我试图用SVG制作一个javascript矢量动画。一开始，有一个播放按钮。按此按钮时，它会启动音乐，并应隐藏自己。

这是我的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"});

}

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

Answer 1

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

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

function start() {

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

    playButton.detach();
}

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

Answer 2

在隐藏svg元素的css中设置不透明度

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

Link

Answer 3

尝试使用SVG文档本身：

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

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

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

使用javascript隐藏SVG元素

3 个答案: