单击后如何缩放 SVG？

Question

我的导航栏中有一堆带有 SVG 的 link。它们都有一个 onClick 延迟函数，我打算将其用于基本动画，在重定向到 link 之前将 SVG 缩放到其原始大小的 1.3。现在我需要以某种方式将两者绑定在一起，但不知道如何。

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>

Answer 1

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

您可以使用 transform: scale(1.3);

轻松实现此行为

由于您只想在单击后缩放 SVG，因此您可以有条件地将 class="scale" 附加到 svg 元素上。

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

此外，在所有导航栏链接上提供一些 ID 以动态更改 HTML 标签的 CSS class。

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

单击后如何缩放 SVG？

How to scale an SVG after click?

javascript

svg

onclick