更改懸停時SVG移動漢堡圖示的顏色

當滑鼠懸停時，我正在嘗試更改移動漢堡選單圖示以適合我的徽標顏色 -

.menu-hamburger:hover {
  fill: #FFB400!important;
}   

<a href="#"> 

<svg class="menu-hamburger">
   <use xlink:href="#menu-hamburger"></use>
</svg> 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
       <symbol id="menu-hamburger" class="menu-hamburger" viewBox="0 0 16 16" style="width: 16px; height: 16px; color:#FFF;">
            <rect y="1" width="16" height="2"></rect>
            <rect y="7" width="16" height="2"></rect>
            <rect y="13" width="16" height="2"></rect>
       </symbol>
   </defs>

</svg> 

</a>

但仍然沒有運氣

uj5u.com熱心網友回復：

使用<use xlink:href="#"時，SVG內容落入，DOM shadow而樣式結果取決于外部、內部CSS樣式表的樣式層次，SVG表現樣式這些樣式斗爭的結果是什么并不總是容易預見的。

因此，在相鄰的答案中，規則fill: #FFB400!important; 但這是一個非常糟糕的做法，可能會破壞布局的其余部分。

樣式層次結構可以在文章的下圖中看到：作者 Sara Soueidan

Computed Styles的權重最大。
因此，使用 CSS 變數進行 CSS 樣式設定是最可靠的。

.menu-hamburger {
margin:1em;
}
#u1,#u2 {
 fill:black;
 
 }
 #u1:hover {
 --primary-color: red;
 cursor:pointer;
 }
  #u2:hover {
 --primary-color: green;
 }

<a href="#"> 

<svg class="menu-hamburger" width="64" height="64" viewBox="0 0 16 16" >
   <use id="u1" xlink:href="#menu-hamburger"  ></use>
</svg> 
<svg class="menu-hamburger" width="64" height="64" viewBox="0 0 16 16" >
   <use id="u2" xlink:href="#menu-hamburger"  ></use>
</svg> 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" viewBox="0 0 16 16">
         <symbol   class="menu-hamburger">
             
          <g id="menu-hamburger" style="fill: var(--primary-color, black)">
            <rect width="100%" height="100%" fill="transparent" />
            <rect y="1" width="16" height="2"></rect>
            <rect y="7" width="16" height="2"></rect>
            <rect y="13" width="16" height="2"></rect>
            </g>
       </symbol>
  
</svg>

更新

通過應用 CSS 變數，您可以實作多色圖示

顯示代碼片段

.menu-hamburger {
margin:1em;
}
#u1,#u2 {
 fill:black;
 
 }
 #u1:hover {
 --primary-color: green;
 --second-color: gold;
 --third-color: red;
 cursor:pointer;
 }
  #u2:hover {
  --primary-color: purple;
 --second-color: greenyellow;
 --third-color: dodgerblue;
 }

<a href="#"> 
    <svg class="menu-hamburger" width="96" height="96" viewBox="0 0 16 16">
       <use id="u1" xlink:href="#menu-hamburger"  ></use>
    </svg>  
</a>
<a href="#"> 
    <svg class="menu-hamburger" width="64" height="64" viewBox="0 0 16 16" >
       <use id="u2" xlink:href="#menu-hamburger"  ></use>
    </svg> 
</a>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" viewBox="0 0 16 16">
       <defs>
         <symbol   class="menu-hamburger">
             
          <g id="menu-hamburger" style="fill: var(--primary-color, black)">
             <rect width="100%" height="100%" fill="transparent" />
            <rect y="1" width="16" height="2" style="fill: var(--primary-color)"></rect>
            <rect y="7" width="16" height="2" style="fill: var(--second-color)"></rect>
            <rect y="13" width="16" height="2" style="fill: var(--third-color)"></rect>
            </g>
       </symbol>
  </defs>
</svg> 

uj5u.com熱心網友回復：

試試這個。

svg.menu-hamburger :hover {
      fill: #FFB400!important;
    }

<a href="#"> 

<svg class="menu-hamburger">
   <use xlink:href="#menu-hamburger"></use>
</svg> 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
       <symbol id="menu-hamburger" class="menu-hamburger" viewBox="0 0 16 16" style="width: 16px; height: 16px; color:#FFF;">
            <rect y="1" width="16" height="2"></rect>
            <rect y="7" width="16" height="2"></rect>
            <rect y="13" width="16" height="2"></rect>
       </symbol>
   </defs>

</svg> 

</a>

uj5u.com熱心網友回復：

在此示例中，我將其更改<a>為 a <button>，因為單擊它的操作不是在某處導航，而是打開一個選單。它具有相同的屬性。使用button#menu-hamburger svg選擇器和填充顏色來控制選單的寬度和高度。因此，現在使用類似的選擇器 ( button#menu-hamburger:hover svg) 懸停選單可以毫無問題地更改顏色。我將懸停添加到按鈕上，這樣當指標位于漢堡選單中的條之間時，您也可以“懸停”。

button#menu-hamburger {
  display: block;
  border: none;
  background: transparent;
}

button#menu-hamburger svg {
  fill: #000;
  width: 16px;
  height: 16px;
}

button#menu-hamburger:hover svg {
  fill: #FFB400;
}

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" display="none">
  <defs>
    <symbol id="menu-hamburger" viewBox="0 0 16 16">
      <rect y="1" width="16" height="2"></rect>
      <rect y="7" width="16" height="2"></rect>
      <rect y="13" width="16" height="2"></rect>
    </symbol>
  </defs>
</svg>

<button id="menu-hamburger"> 
  <svg xmlns="http://www.w3.org/2000/svg">
    <use href="#menu-hamburger"/>
  </svg>
</button>

標籤：html css svg

上一篇：SVGanimateTransform縮放keySplines以匹配旋轉矢量的Y分量

下一篇：PHPImagick在轉換為PNG時破壞了SVG