单击后如何缩放SVG?

我的导航栏中有一堆带有 SVG 的链接。它们都有一个 onClick 延迟函数,我打算将其用于基本动画,在重定向到链接之前将 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>
skfywj 回答:单击后如何缩放SVG?

transform CSS 属性可让您旋转、缩放、倾斜或平移元素。

您可以使用 Foobar myFoo; ... myFoo = new Foobar( /*constructor arguments,if any,go here*/ );

轻松实现此行为

由于您只想在单击后缩放 SVG,因此您可以有条件地将 transform: scale(1.3); 附加到 class="scale" 元素上。

svg

另外,为所有导航栏链接提供一些 id 以动态更改 svg.scale { transform: scale(1.3); } 标签的 CSS 类。

HTML
本文链接:https://www.f2er.com/9612.html

大家都在问