How to scale an SVG after click?

I have a bunch of links with SVGs in my navbar. All of them have a onClick delay function which I intend to use for a basic animation, scaling the SVG to 1.3 of its original size before redirecting to the link. Now somehow I need to bind the two together, but don`t know how.

Header.ejs

 <script defer src="css/theme.js"></script>

    <nav class="navbar">
      <ul class="navbar-nav">
        <li class="logo">
          <a id="logo-overwrite" class="nav-link">
            <span class="link-text logo-text">Secrets</span>
            <svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="angle-double-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
              <g class="fa-group">
                <path fill="currentColor"
                  d="m1...75z"
                  class="fa-primary"></path>
              </g>
            </svg>
          </a>
        </li>
    
        <!-- home -->
        <li class="nav-item" onclick="welcomeTimoutFunction()">
          <a class="nav-link">
            <svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="home" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
              <g class="fa-group">
    
                <path fill="currentColor"
                  d="m247..23z"
                  class="fa-primary"></path>
              </g>
            </svg>
            <span class="link-text">Home</span>
          </a>
        </li>
   
        <!-- login -->
        <li class="nav-item" onclick="logout2TimoutFunction()">
          <a class="nav-link">
            <svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="sign-ou" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-space-station-moon-alt fa-w-16 fa-5x">
              <g class="fa-group">
                <path fill="currentColor"
                  d="m4..31112 9.46348,-26.98443 0,-37.29556z"
                  class="fa-primary"></path>
              </g>
            </svg>
            <span class="link-text">Login</span>
          </a>
        </li>
      </ul>
    </nav>
<body>

<script> 
        function welcomeTimoutFunction() {
            setTimeout(function(){
              window.location.href = "/secrets";
        }, 900);
        };
   
        function facebookTimoutFunction() {
            setTimeout(function(){
              window.location.href = "/auth/facebook";
        }, 900);
        };

        document.querySelectorAll('form').forEach(form => {
          form.addEventListener('submit', (e) => {
            e.preventDefault();
            setTimeout(() => {
              form.submit();
            }, 900);
          });
        });
    </script>

The transform CSS property lets you rotate, scale, skew, or translate an element.

You can easily achieve this behavior using the transform: scale(1.3);

Since you only want to scale an SVG after a click, you can attach the class="scale" on svg element conditionally.

svg.scale {
    transform: scale(1.3);
}

Also, give some id on all navbar links to dynamically change the CSS class of an HTML tag.

function welcomeTimoutFunction() {
       document.getElementById('idOfElement').classList.add('scale');
            setTimeout(function(){
            document.getElementById('idOfElement').classList.remove('scale');
              window.location.href = "/secrets";
        }, 900);
        };

Leave a Comment