Conceal SVG components using JavaScript

I'm diving into the world of SVG animation using JavaScript. I have a scenario where there is a play button at the beginning, which, when clicked, triggers the music to start playing and should hide itself.

Here's a look at my HTML setup:

<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>

Additionally, here's the JavaScript function included:

function start() {

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

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

}

While the audio playback part works fine, I seem to be facing an issue with hiding the play button once it is clicked. Any suggestions on what might be causing this behavior?

javascriptjqueryhtmlcsssvg

Answer №1

Using CSS to control the opacity of SVG elements

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

Check it out here!

Answer №2

Opt for detach instead - it takes out the element from the dom while maintaining the reference.

let startButton = $('#start-btn');

function launch() {

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

    startButton.detach();
}

//re-insert start button
$('#container').append(startButton);

Answer №3

Experiment with manipulating the SVG document directly:

let svgElement = $('#canvas').get(0);

svgElement.onload = function() {
  let doc = svgElement.contentDocument;

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to combine ng-switch and ng-if directives in Angular?

I attempted to combine the angular ng-switch and ng-if directives, but it doesn't seem to be functioning properly. Here is what I tried: <div data-ng-if = "x === 'someValue'" data-ng-switch on = "booleanValue"> <div data-ng-swit ...

javascripthtmleclipseangularjsangularjs-directive

Vuelidate is failing to display the accurate error messages

Exploring vuelidate for the first time has been an interesting journey. I found that while following some of the tutorial examples in their documentation, my code was showing errors even before I started typing. Strangely, the error messages were not accur ...

javascriptvue.jsvue-materialvuelidate

Is there a way to have the even numbers in an array printed before the odd numbers?

Looking for a way to separate even and odd numbers into two arrays? This function will do just that, but with a twist - the evens array will be printed before the odds. var numbersArray = [1,2,34,54,55,34,32,11,19,17,54,66,13]; function customDivider(n ...

javascriptarrays

Steps for modifying the documents on an osCmax website

I had a developer set up my website in osCmax a while ago, and now I want to update the design of some pages using HTML and CSS on my own. While I am comfortable with HTML and CSS, I have very limited knowledge of PHP. This is my first attempt at working o ...

phphtmloscommerce

express-validator: display a single validation error message for each field

As a newcomer to expressjs and express-validator, I am navigating through setting up a registration form where users need to submit their email address among other details. My current validation rule for the email field using 'express-validator' ...

javascriptnode.jsexpress

Executing JavaScript code upon clicking a menu item involves creating event listeners for each menu

Currently, I am working on a Squarespace website that includes a navigation bar. I am looking to incorporate a JavaScript code as a link within the navigation bar. The specific JavaScript code is as follows: <div> <script type="text/javascript ...

javascriptjqueryhtmlsquarespace

The sticky menu feature in jQuery does not assign classes to elements after the page is refreshed; it will only work when scrolling is activated manually

Currently, I am customizing a WordPress theme and have incorporated this jQuery code snippet to ensure that the menu sticks to the top of the page when the user scrolls down: /* ----------------------------------------- Fixed navigation on scroll -------- ...

jquery

State calculation occurs too tardily

I'm working on creating a simple like button that changes color based on whether it's liked or not. I've tried to calculate this beforehand using React.useEffect, but it seems to be calculating afterwards instead... The hearts are initially ...

javascriptreactjsreact-nativereact-hooks

The structural design of a PHP application using Javascript and CSS in an MVC framework

My team and I are about to revamp the frontend of a large CakePHP 2 application. Our main aim, apart from giving it a fresh look, is to create more reusable SCSS/Javascript code, establish a logical structure in our frontend code as well as the third-party ...

javascriptcsscakephpfrontend

Issue with Loading Data on AJAX Causing Scrolling Difficulties

Currently, I am in the midst of website development using PHP, MySQL, and JavaScript (JQuery + Ajax). One issue that has arisen is with the customer scroll function and scrollbars. When loading data via ajax, the scroll function is generating numerous erro ...

javascriptjqueryajax

Learn how to create a button that will only submit a value when clicked using Node.js and EJS

Currently in my ejs file, I have a button that sends a value to app.js instantly when the program runs. However, I want it to only submit the value when clicked by the user. <% notesArray.forEach((note,i) =>{ %> <div class="note"> ...

javascripthtmlnode.jsejs

Starting an Angularjs CSS3 animation with JavaScript

I am currently exploring how to create a CSS3 animation in Angular.js. Before starting the animation, I need to establish the initial CSS properties using Javascript. Is there a way to kickstart an animation with Javascript and then smoothly transition ...

javascriptcssangularjsangularjs-animation

Navigation bar's active area does not span the full height

I'm facing some issues with the navigation bar on my responsive website. One issue is that the clickable area for the links does not extend to the full height of the nav bar, and I would like it to cover the entire height. Another problem arises whe ...

cssnavigation

Problem encountered when trying to create a fixed position Sticky Div

I've attempted to create a sticky DIV using the code below, but it's not behaving as anticipated. The DIV sticks when I scroll down, but it overlaps with the website Header and Footer. How can I fix this issue using CSS/JS? Any assistance would b ...

javascripthtmljquerycss

Ways to get to the bottom in a React component using a button

I've been struggling to automatically scroll the user to the bottom of the page when they click on a button. Despite my best efforts, I haven't been able to find a solution. Can someone please assist me in achieving this goal? Thank you ...

javascriptreactjsecmascript-6react-redux

Chrome and Firefox do not support floating CSS Grid columns, whereas IE and Edge do

I've been experimenting with creating my own grid system using CSS, inspired by the simplicity of Bootstrap. You can check out the CodePen page where I've shared my progress. This is the CSS I've implemented: /* * light blue = 00AEEF * ...

htmlcsstwitter-bootstrapgoogle-chrome

Issues with cross-browser compatibility are arising in my jQuery code

Here is the code snippet I'm working with: function toggleLoader( display ){ if( display === 'show' ){ $('.overlay, .loader').css({ 'z-index' : '1000', 'display& ...

javascriptjquerycsscross-browser

Unable to transform SVG files in Next.js Jest version 28

Currently, my setup involves Next.js version 12.0.7, Jest version 28.1.0, and the use of the next-react-svg library for importing SVG files into components. The configuration in my jest.config.js file looks like this: // jest.config.js const nextJest = re ...

javascriptreactjssvgjestjsnext.js

How come Bootstrap isn't functioning despite being properly loaded in my Django project?

I recently started working on a Django project and encountered some confusion while integrating Bootstrap3 for the front-end. After successfully installing django-bootstrap3 using pip in my command prompt, I added it as a third-party app in my settings.py ...

pythonhtmldjangotwitter-bootstrapweb

Tips for accessing the following element within an array using a for loop with the syntax for (let obj of objects)

Is there a way to access the next element in an array while iterating through it? for (let item of list) { // accessing the item at index + 1 } Although I am aware that I could use a traditional for loop, I would rather stick with this syntax. for (i ...

javascriptarraystypescriptobject