БЛОГ НА HUSL


Смена иконки внутри кнопки svg

Автор вопроса: SergeyL-1979

Имеется кнопка. Необходимо чтобы по нажатию иконка-1 менялась на иконку-2. Если снова нажать на кнопку, то иконка-2 меняется на иконку-1. Не могу понять как это сделать с помощью JS. Возможно это просто, но я только постигаю эти "джунгли".

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .btn {
            padding: 0;
            background-color: transparent;
            border: none;
            outline: none;
            -webkit-tap-highlight-color: transparent;
            box-shadow: none;
            cursor: pointer;
            display: flex;
            margin: 5px 10px;
            padding: 10px 15px;
            border-radius: 1px;
            font-size: 12px;
            line-height: 15px;
            text-transform: uppercase;
            color: white;
            background: #d931fb;
            transition: 0.3s;
        }
        
        .btn:hover {
            box-shadow: 0px 2px 8px 2px rgba(141, 150, 178, .3);
            transform: scale(1.05);
        }
        
        .btn_text {
            margin-right: 15px;
        }
        
        .btn_icon1 {
            width: 20px;
            height: 20px;
            font-size: 20px;
        }
        
        
        .btn--magic .btn_icon1 {
            /* animation-duration: 5s; */
            animation-name: magic1;
            animation-iteration-count: infinite;
            animation-fill-mode: forwards;
        }
        /* .btn--magic .btn_icon2 {
            animation-duration: 1s;
            animation-name: magic2;
            animation-iteration-count: infinite;
            animation-fill-mode: forwards;
            animation-direction: reverse;
        } */
        
        @keyframes magic1 {
            0% {
                opacity: 1;
                transform-origin: 50% 50%;
                transform: scale(1, 1);
                filter: blur(0px);
            }
            100% {
                opacity: 0;
                transform-origin: 50% 50%;
                transform: scale(2, 2);
                filter: blur(20px);
            }
        }
        
        /* @keyframes magic {
            from {
                transform: rotate(0);
            }
            to {
                transform: rotate(360deg);
            }
        } */
    </style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Практика C6 - задание 1</title>
</head>

<body>
    <h1>Иконки SVG</h1>

    <button class="btn j-btn-test">
  <div class="btn_text">Смена иконок</div>
  
  <div class="btn_icon1">
    <!--   первая иконки начало   -->
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-left-circle" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
        <path fill-rule="evenodd" d="M10.828 5.172a.5.5 0 0 0-.707 0L6.025 9.268V6.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H9.5a.5.5 0 0 0 0-1H6.732l4.096-4.096a.5.5 0 0 0 0-.707z"/>
        
    </svg>
    <!--   первая иконки конец   -->
  </div>
 
 
</button>

    <script>
        const btn = document.querySelector('.j-btn-test');

        btn.addEventListener('click', () => {
            btn.classList.toggle('btn--magic');
        });
    </script>

</body>

</html>


Источник

Ответы (1 шт):

Автор решения: UModeL

Для начала, сделайте что-нибудь с анимациями - совсем мрак, размытие в 20px для тоненькой SVG-линии, прозрачность... Так можно никогда не увидеть результатов. Пока отключил всё.

Можно осуществлять переключение, добавив ID для <path>, и меняя в JS значение атрибута d:

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    .btn {
      padding: 0;
      background-color: transparent;
      border: none;
      outline: none;
      -webkit-tap-highlight-color: transparent;
      box-shadow: none;
      cursor: pointer;
      display: flex;
      margin: 5px 10px;
      padding: 10px 15px;
      border-radius: 1px;
      font-size: 12px;
      line-height: 15px;
      text-transform: uppercase;
      color: white;
      background: #d931fb;
      transition: 0.3s;
    }
    
    .btn:hover {
      box-shadow: 0px 2px 8px 2px rgba(141, 150, 178, .3);
      transform: scale(1.05);
    }
    
    .btn_text {
      margin-right: 15px;
    }
    
    .btn_icon1 {
      width: 20px;
      height: 20px;
      font-size: 20px;
    }
    
    .btn--magic .btn_icon1 {
      /* animation-duration: 5s; */
      animation-name: magic1;
      animation-iteration-count: infinite;
      animation-fill-mode: forwards;
    }
    /* .btn--magic .btn_icon2 {
            animation-duration: 1s;
            animation-name: magic2;
            animation-iteration-count: infinite;
            animation-fill-mode: forwards;
            animation-direction: reverse;
        } 
    
    @keyframes magic1 {
      0% {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1);
        filter: blur(0px);
      }
      100% {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(2);
        filter: blur(0px);
      }
    }*/
    /* @keyframes magic {
            from {
                transform: rotate(0);
            }
            to {
                transform: rotate(360deg);
            }
        } */
  </style>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Практика C6 - задание 1</title>
</head>

<body>
  <h1>Иконки SVG</h1>
  <button class="btn j-btn-test">
    <div class="btn_text">Смена иконок</div>
    <div class="btn_icon1">
      <!--   первая иконки начало   -->
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-left-circle" viewBox="0 0 16 16">
        <path fill-rule="evenodd" id="iconPath" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM10.828 5.172a.5.5 0 0 0-.707 0L6.025 9.268V6.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H9.5a.5.5 0 0 0 0-1H6.732l4.096-4.096a.5.5 0 0 0 0-.707z"/>
      </svg>
      <!--   первая иконки конец   -->
    </div>
  </button>
  <script>
    const btn = document.querySelector('.j-btn-test');
    btn.addEventListener('click', () => {
      iconPath.setAttribute('d', (btn.classList.toggle('btn--magic')) ? 'M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-5.879-2.828a.5.5 0 1 1 .707.707L6.732 9.975H9.5a.5.5 0 1 1 0 1H5.525a.5.5 0 0 1-.5-.5V6.5a.5.5 0 1 1 1 0v2.768l4.096-4.096z' : 'M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM10.828 5.172a.5.5 0 0 0-.707 0L6.025 9.268V6.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H9.5a.5.5 0 0 0 0-1H6.732l4.096-4.096a.5.5 0 0 0 0-.707z');
    });
  </script>
</body>

</html>

Альтернативой может быть назначение пути через CSS-свойство:

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    .btn {
      padding: 0;
      background-color: transparent;
      border: none;
      outline: none;
      -webkit-tap-highlight-color: transparent;
      box-shadow: none;
      cursor: pointer;
      display: flex;
      margin: 5px 10px;
      padding: 10px 15px;
      border-radius: 1px;
      font-size: 12px;
      line-height: 15px;
      text-transform: uppercase;
      color: white;
      background: #d931fb;
      transition: 0.3s;
    }
    
    .btn:hover {
      box-shadow: 0px 2px 8px 2px rgba(141, 150, 178, .3);
      transform: scale(1.05);
    }
    
    .btn_text {
      margin-right: 15px;
    }
    
    .btn_icon1 {
      width: 20px;
      height: 20px;
      font-size: 20px;
    }
    .btn_icon1 svg path {
      d: path('M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM10.828 5.172a.5.5 0 0 0-.707 0L6.025 9.268V6.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H9.5a.5.5 0 0 0 0-1H6.732l4.096-4.096a.5.5 0 0 0 0-.707z');
    }
    
    .btn--magic .btn_icon1 {
      /* animation-duration: 5s; */
      animation-name: magic1;
      animation-iteration-count: infinite;
      animation-fill-mode: forwards;
    }
    .btn--magic .btn_icon1 svg path {
      d: path('M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-5.879-2.828a.5.5 0 1 1 .707.707L6.732 9.975H9.5a.5.5 0 1 1 0 1H5.525a.5.5 0 0 1-.5-.5V6.5a.5.5 0 1 1 1 0v2.768l4.096-4.096z');
    }
    /* .btn--magic .btn_icon2 {
            animation-duration: 1s;
            animation-name: magic2;
            animation-iteration-count: infinite;
            animation-fill-mode: forwards;
            animation-direction: reverse;
        } 
    
    @keyframes magic1 {
      0% {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1);
        filter: blur(0px);
      }
      100% {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(2);
        filter: blur(0px);
      }
    }*/
    /* @keyframes magic {
            from {
                transform: rotate(0);
            }
            to {
                transform: rotate(360deg);
            }
        } */
  </style>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Практика C6 - задание 1</title>
</head>

<body>
  <h1>Иконки SVG</h1>
  <button class="btn j-btn-test">
    <div class="btn_text">Смена иконок</div>
    <div class="btn_icon1">
      <!--   первая иконки начало   -->
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-left-circle" viewBox="0 0 16 16">
        <path fill-rule="evenodd"/>
      </svg>
      <!--   первая иконки конец   -->
    </div>
  </button>
  <script>
    const btn = document.querySelector('.j-btn-test');
    btn.addEventListener('click', () => {
      btn.classList.toggle('btn--magic');
    });
  </script>
</body>

</html>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.