すべてのアニメーションの後にSVG CSS遷移が開始されます

Question

こんにちは私はどのように修正するのかわからないGoogle Chromeのブラウザに問題があります 問題：SVGトランジションがタグとSPANタグの移行が完了した後に開始されます IE 11ですが、そこに問題はないようです。

私はすべての移行が一点で始まると思っています。

私のコード：

#mainNav { 
 
    height: 42px; 
 
    background-color: #f5f5f5; 
 
} 
 

 
#mainNav * { 
 
    transition: all 0.15s ease-out; 
 
} 
 

 
#mainNav > a { 
 
    display: inline-block; 
 
    height: 100%; 
 
    position: relative; 
 
    font: 13px/42px "IranYekanWebLight"; 
 
    font-weight: 700; 
 
    color: #575757; 
 
    overflow: hidden; 
 
} 
 

 
#mainNav > a:hover { 
 
    background-color: #ddd; 
 
} 
 

 
#mainNav > a:hover span { 
 
    font-size: 17px; 
 
    padding-right: 55px; 
 
} 
 

 
#mainNav > a:hover svg { 
 
    left: 35%; 
 
    fill: #fff; 
 
} 
 

 
#mainNav span { 
 
    padding: 0 30px; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
#mainNav svg { 
 
    height: 90px; 
 
    position: absolute; 
 
    bottom: -90%; 
 
    left: 10%; 
 
    fill: #e3e3e3; 
 
    z-index: 0; 
 
} 
 

 
#mainNav > a.aqua { 
 
    border-top: 4px solid #1cbbb4; 
 
}

<nav id="mainNav"> 
 
    <a class="aqua" href="#"> 
 
     <span>خانه</span> 
 
     <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve"> 
 
     <g> 
 
      <g> 
 
      <g> 
 
       <path d="M26,26.4H14c-0.8,0-1.5-0.7-1.5-1.5v-5c0-0.3-0.2-0.5-0.5-0.5h-1c-0.2,0-0.4-0.1-0.5-0.3c-0.1-0.2,0-0.4,0.2-0.6l8.4-6.5 
 
       c0.5-0.4,1.3-0.4,1.8,0l8.4,6.5c0.2,0.1,0.2,0.4,0.2,0.6c-0.1,0.2-0.3,0.3-0.5,0.3h-1c-0.3,0-0.5,0.2-0.5,0.5v5 
 
       C27.5,25.7,26.8,26.4,26,26.4z M12.4,18.4c0.6,0.2,1.1,0.8,1.1,1.4v5c0,0.3,0.2,0.5,0.5,0.5h12c0.3,0,0.5-0.2,0.5-0.5v-5 
 
       c0-0.7,0.5-1.3,1.1-1.4l-7.3-5.7c-0.2-0.1-0.4-0.1-0.6,0L12.4,18.4z"/> 
 
      </g> 
 
      <g> 
 
       <path d="M21.5,25.9v-5c0-0.3-0.2-0.5-0.5-0.5h-2c-0.3,0-0.5,0.2-0.5,0.5v5h-1v-5c0-0.8,0.7-1.5,1.5-1.5h2c0.8,0,1.5,0.7,1.5,1.5 
 
       v5H21.5z"/> 
 
      </g> 
 
      </g> 
 
     </g> 
 
     </svg> 
 
    </a> 
 
</nav>

Answer 1

私はあなたのコードで間違っているものを知っていると思います。サブノードのすべてではなく、svgだけをアニメーション化する場合は、#mainNavのすべての子ノードにトランジションを適用します。確かにクロームのバグのような音

#mainNav a > * { 
    transition: all 0.15s ease-out; 
}