SVG 背景在悬停效果下无法正常工作

有一个块，其中有三个社交网络图标。而且有两个问题。

1. 当鼠标悬停在图标上时，新出现的背景开始移动相邻的元素。一个例子是在屏幕上。
2. 在您用光标点击图标本身之前，它不会将颜色更改为我需要的颜色。在这种情况下，我不能一次将悬停效果组合在两个元素上。结果发现，橙色圆圈出现在图标背景变化之前（如果不用光标戳它，可能根本不显示）。

在第一个屏幕上，什么应该起作用，在第二个和第三个屏幕上，当我将鼠标悬停在图标上时会出现什么（

代码如下。

<div class="learn__footer">
           <span class="learn__footer-share-text">
             Поделиться:
           </span>
           <div class="learn__footer-share">
            
             <ul class="learn__footer-social">
               <li class="learn__footer-social-link">
               
                 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path
                     d="M12.0004 0.00332907L9.92554 0C7.59455 0 6.08817 1.54552 6.08817 3.93762V5.75313H4.00203C3.82176 5.75313 3.67578 5.89927 3.67578 6.07954V8.71001C3.67578 8.89028 3.82193 9.03625 4.00203 9.03625H6.08817V15.6738C6.08817 15.854 6.23414 16 6.41441 16H9.13623C9.3165 16 9.46247 15.8539 9.46247 15.6738V9.03625H11.9017C12.0819 9.03625 12.2279 8.89028 12.2279 8.71001L12.2289 6.07954C12.2289 5.99299 12.1944 5.91009 12.1334 5.84884C12.0723 5.78758 11.989 5.75313 11.9025 5.75313H9.46247V4.2141C9.46247 3.47438 9.63875 3.09886 10.6023 3.09886L12 3.09836C12.1801 3.09836 12.3261 2.95222 12.3261 2.77211V0.329578C12.3261 0.149642 12.1803 0.00366197 12.0004 0.00332907Z"
                     fill="#E36F59" />
                 </svg>

               </li>
               <li class="learn__footer-social-link">
                 
                 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <g clip-path="url(#clip0_84_22370)">
                     <path
                       d="M14.356 4.742C15.0067 4.28 15.554 3.70333 16 3.03933V3.03867C15.4047 3.29933 14.7713 3.47267 14.11 3.55667C14.79 3.15067 15.3093 2.51267 15.5533 1.744C14.9193 2.122 14.2193 2.38867 13.4733 2.538C12.8713 1.89667 12.0133 1.5 11.0773 1.5C9.26133 1.5 7.79933 2.974 7.79933 4.78067C7.79933 5.04067 7.82133 5.29067 7.87533 5.52867C5.14867 5.39533 2.73533 4.08867 1.114 2.09733C0.831333 2.58867 0.664667 3.15067 0.664667 3.75533C0.664667 4.89133 1.24933 5.898 2.122 6.48133C1.59467 6.47133 1.078 6.318 0.64 6.07733V6.11333C0.64 7.70733 1.77667 9.03133 3.268 9.33666C3.00067 9.41 2.71 9.44466 2.408 9.44466C2.198 9.44466 1.986 9.43266 1.78733 9.38866C2.212 10.6873 3.41867 11.6427 4.852 11.674C3.736 12.5467 2.31867 13.0727 0.784667 13.0727C0.516 13.0727 0.258 13.0607 0 13.028C1.45333 13.9647 3.17467 14.5 5.032 14.5C10.8207 14.5 14.5933 9.67066 14.356 4.742V4.742Z"
                       fill="#E36F59" />
                   </g>
                   <defs>
                     <clipPath id="clip0_84_22370">
                       <rect width="16" height="16" fill="white" />
                     </clipPath>
                   </defs>
                 </svg>

               </li>
               <li class="learn__footer-social-link">
           
                 <svg  width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path id="instagram"
                     d="M15.9922 16C14.8828 16 13.7922 16 12.6828 16C12.6828 15.9312 12.6828 15.8718 12.6828 15.8093C12.6828 14.0117 12.6859 12.2141 12.6766 10.4166C12.6734 10.0445 12.6359 9.66627 12.5641 9.30051C12.3609 8.2751 11.6891 7.88745 10.6953 7.98749C9.75156 8.0844 9.22344 8.59711 9.06719 9.57249C9.00469 9.96639 8.97656 10.3697 8.97344 10.7698C8.96406 12.4486 8.97031 14.1243 8.97031 15.803C8.97031 15.8656 8.97031 15.925 8.97031 15.9969C7.86406 15.9969 6.76719 15.9969 5.66406 15.9969C5.66406 12.4392 5.66406 8.89097 5.66406 5.32708C6.71719 5.32708 7.76406 5.32708 8.83594 5.32708C8.83594 5.80226 8.83594 6.28058 8.83594 6.80578C8.88594 6.74951 8.90781 6.73075 8.92344 6.70887C9.48281 5.78038 10.3266 5.26768 11.3734 5.10512C12.2391 4.97069 13.0984 5.04259 13.9203 5.38022C14.8641 5.76475 15.4016 6.50566 15.6891 7.45603C15.9047 8.16569 15.9859 8.8941 15.9922 9.62876C16.0047 11.7233 15.9984 13.8179 16.0016 15.9125C15.9984 15.9375 15.9953 15.9625 15.9922 16Z"
                     fill="#E36F59" />
                   <path id="instagram"
                     d="M0.273438 15.9969C0.273438 12.4361 0.273438 8.88473 0.273438 5.32709C1.37344 5.32709 2.46406 5.32709 3.57031 5.32709C3.57031 8.87847 3.57031 12.433 3.57031 15.9969C2.47656 15.9969 1.37969 15.9969 0.273438 15.9969Z"
                     fill="#E36F59" />
                   <path id="instagram"
                     d="M1.92188 3.86402C0.86875 3.86402 0 2.98555 0 1.92263C0 0.862845 0.86875 -0.00311778 1.93125 8.43798e-06C2.98438 0.00313466 3.84375 0.869098 3.84375 1.92576C3.84375 2.98555 2.97187 3.86402 1.92188 3.86402Z"
                     fill="#E36F59" />
                 </svg>
               </li>
             </ul>
           </div>

           <a class="learn__footer-btn" href="#">
             <img class="learn__footer-btn-img" src="images/icons/learn-footer-coffe.svg" alt="">
           </a>



         </div>

.learn__footer {
  display: flex;
  justify-content: space-between;
  padding: 20px 20px 20px 30px;
  align-items: center;
  box-shadow: 0px 9px 34px rgba(21, 33, 56, 0.1);
  border-radius: 10px;
  margin-bottom: 67px;
  height: 80px;
}

.learn__footer-btn {
  display: block;
}

.learn__footer-share {
  display: flex;
}

.learn__footer-social {
  display: flex;
  margin-right: 22em !important;
}

.learn__footer-share-text {
  font-family: 'Segoe UI';
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
  color: rgba(35, 38, 45, 1);
  margin-right: 30px;
}

.learn__footer-social-link {
  margin-right: 24px;
  cursor: pointer;
}

svg:hover path {
  fill: white;

}

.learn__footer-social-link:hover {
  background: #E36F59;
  border-radius: 50%;
  padding: 12px;

} 

https://codepen.io/Den323/pen/RwMJvLj