SVG顏色過渡不起作用懸停

Question

我想使用CSS做一個簡單的SVG按鈕。我設法改變懸停的顏色，但顏色過渡似乎不適用於我。我希望至少有1秒的過渡時間。下面是我使用的代碼：

SVG：

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 162 113"><title>Telephone</title><g id="Page-1"><g id="Artboard-2"><g id="Group-13"><g id="Group-4"><g id="Group-9"><rect id="Rectangle" x="1" y="1" width="160" height="111" rx="8" ry="8" fill="none" stroke="#2b7db5" stroke-width="2"/></g></g><g id="icons8-phone_office" data-name="icons8-phone office"><rect id="Rectangle-path" x="55.24" y="36.31" width="55.86" height="49.66" rx="3" ry="3" fill="#c2cde7"/><path id="Shape" d="M59.38,72.52H107a4.14,4.14,0,0,1,4.14,4.14v6.21A3.1,3.1,0,0,1,108,86H58.34a3.1,3.1,0,0,1-3.1-3.1V76.66A4.14,4.14,0,0,1,59.38,72.52Z" fill="#acb7d0"/><path id="Shape-2" data-name="Shape" d="M68.69,36.31H108a3.1,3.1,0,0,1,3.1,3.1V54.93H65.59V39.41A3.1,3.1,0,0,1,68.69,36.31Z" fill="#bbdef9"/><polygon id="Shape-3" data-name="Shape" points="78.18 54.93 92.31 36.31 108.86 36.31 94.73 54.93 78.18 54.93" fill="#def0ff"/><polygon id="Shape-4" data-name="Shape" points="69.94 54.93 84.68 36.31 88.17 36.31 73.43 54.93 69.94 54.93" fill="#def0ff"/><polygon id="Shape-5" data-name="Shape" points="66.96 52.86 80.07 36.31 81.1 36.31 68 52.86 66.96 52.86" fill="#def0ff"/><path id="Shape-6" data-name="Shape" d="M66.62,32.17H53.17V28H49V76.66a3.1,3.1,0,0,0,3.1,3.1H66.62a3.1,3.1,0,0,0,3.1-3.1V35.28A3.1,3.1,0,0,0,66.62,32.17Z" fill="#c2cde7"/><rect id="Rectangle-path-2" data-name="Rectangle-path" x="49.03" y="72.52" width="20.69" height="7.24" rx="3" ry="3" fill="#acb7d0"/><path id="Shape-7" data-name="Shape" d="M53.17,32.17h14a2.59,2.59,0,0,1,2.59,2.59h0a2.59,2.59,0,0,1-2.59,2.59h-14Z" fill="#ced9ed"/><rect id="Rectangle-path-3" data-name="Rectangle-path" x="75.93" y="61.14" width="6.21" height="6.21" fill="#ed7899"/><rect id="Rectangle-path-4" data-name="Rectangle-path" x="86.28" y="61.14" width="6.21" height="6.21" fill="#85cbf8"/><rect id="Rectangle-path-5" data-name="Rectangle-path" x="96.62" y="61.14" width="6.21" height="6.21" fill="#85cbf8"/><rect id="Rectangle-path-6" data-name="Rectangle-path" x="75.93" y="71.48" width="6.21" height="6.21" fill="#85cbf8"/><rect id="Rectangle-path-7" data-name="Rectangle-path" x="86.28" y="71.48" width="6.21" height="6.21" fill="#85cbf8"/><rect id="Rectangle-path-8" data-name="Rectangle-path" x="96.62" y="71.48" width="6.21" height="6.21" fill="#72caaf"/><path id="Shape-8" data-name="Shape" d="M81.1,60.1H77a2.07,2.07,0,0,0-2.07,2.07v4.14A2.07,2.07,0,0,0,77,68.38H81.1a2.07,2.07,0,0,0,2.07-2.07V62.17A2.07,2.07,0,0,0,81.1,60.1Zm0,6.21H77V62.17H81.1Z" fill="#2b7db5"/><path id="Shape-9" data-name="Shape" d="M91.45,60.1H87.31a2.07,2.07,0,0,0-2.07,2.07v4.14a2.07,2.07,0,0,0,2.07,2.07h4.14a2.07,2.07,0,0,0,2.07-2.07V62.17A2.07,2.07,0,0,0,91.45,60.1Zm0,6.21H87.31V62.17h4.14Z" fill="#2b7db5"/><path id="Shape-10" data-name="Shape" d="M91.45,70.45H87.31a2.07,2.07,0,0,0-2.07,2.07v4.14a2.07,2.07,0,0,0,2.07,2.07h4.14a2.07,2.07,0,0,0,2.07-2.07V72.52A2.07,2.07,0,0,0,91.45,70.45Zm0,6.21H87.31V72.52h4.14Z" fill="#2b7db5"/><path id="Shape-11" data-name="Shape" d="M101.79,70.45H97.66a2.07,2.07,0,0,0-2.07,2.07v4.14a2.07,2.07,0,0,0,2.07,2.07h4.14a2.07,2.07,0,0,0,2.07-2.07V72.52A2.07,2.07,0,0,0,101.79,70.45Zm0,6.21H97.66V72.52h4.14Z" fill="#2b7db5"/><path id="Shape-12" data-name="Shape" d="M101.79,60.1H97.66a2.07,2.07,0,0,0-2.07,2.07v4.14a2.07,2.07,0,0,0,2.07,2.07h4.14a2.07,2.07,0,0,0,2.07-2.07V62.17A2.07,2.07,0,0,0,101.79,60.1Zm0,6.21H97.66V62.17h4.14Z" fill="#2b7db5"/><path id="Shape-13" data-name="Shape" d="M81.1,70.45H77a2.07,2.07,0,0,0-2.07,2.07v4.14A2.07,2.07,0,0,0,77,78.72H81.1a2.07,2.07,0,0,0,2.07-2.07V72.52A2.07,2.07,0,0,0,81.1,70.45Zm0,6.21H77V72.52H81.1Z" fill="#2b7db5"/><path id="Shape-14" data-name="Shape" d="M78,46.73h1v1H78a1,1,0,1,0,0,2.07h2.07a1,1,0,0,0,1-1v-3.1a1,1,0,0,0-1-1H79V43.55h1a1,1,0,0,0,0-2.07H78a1,1,0,0,0-1,1v3.1a1,1,0,0,0,1,1.11Z" fill="#2b7db5"/><path id="Shape-15" data-name="Shape" d="M84.21,46.73h1v1h-1a1,1,0,1,0,0,2.07h2.07a1,1,0,0,0,1-1v-3.1a1,1,0,0,0-1-1h-1V43.55h1a1,1,0,0,0,0-2.07H84.21a1,1,0,0,0-1,1v3.1a1,1,0,0,0,1,1.11Z" fill="#2b7db5"/><path id="Shape-16" data-name="Shape" d="M90.41,46.73h1v1h-1a1,1,0,0,0,0,2.07h2.07a1,1,0,0,0,1-1v-3.1a1,1,0,0,0-1-1h-1V43.55h1a1,1,0,1,0,0-2.07H90.41a1,1,0,0,0-1,1v3.1a1,1,0,0,0,1,1.11Z" fill="#2b7db5"/><path id="Shape-17" data-name="Shape" d="M100.76,46.73h1v1h-1a1,1,0,1,0,0,2.07h2.07a1,1,0,0,0,1-1v-3.1a1,1,0,0,0-1-1h-1V43.55h1a1,1,0,0,0,0-2.07h-2.07a1,1,0,0,0-1,1v3.1a1,1,0,0,0,1,1.11Z" fill="#2b7db5"/><path id="Shape-18" data-name="Shape" d="M109,35.28H70.66a5.17,5.17,0,0,0-5.07-4.14H54.21v-1a3.1,3.1,0,0,0-6.21,0V75.62a5.17,5.17,0,0,0,5.17,5.17h1v3.1a3.1,3.1,0,0,0,3.1,3.1H109a3.1,3.1,0,0,0,3.1-3.1V38.38A3.1,3.1,0,0,0,109,35.28ZM51.1,29.07a1,1,0,0,1,1,1v8.28a1,1,0,0,0,2.07,0V33.21H65.59a3.1,3.1,0,0,1,3.1,3.1V72.52H50.07V30.1A1,1,0,0,1,51.1,29.07Zm-1,46.55v-1H68.69v1a3.1,3.1,0,0,1-3.1,3.1H53.17A3.1,3.1,0,0,1,50.07,75.62Zm59,9.31H57.31a1,1,0,0,1-1-1v-3.1h9.31a5.17,5.17,0,0,0,5.17-5.17V37.34H109a1,1,0,0,1,1,1V53.9H82.14a1,1,0,1,0,0,2.07h27.93V83.9A1,1,0,0,1,109,84.93Z" fill="#2b7db5"/><path id="Shape-19" data-name="Shape" d="M95.59,46.66h2.07a1,1,0,0,0,0-2.07H95.59a1,1,0,1,0,0,2.07Z" fill="#2b7db5"/><path id="Shape-20" data-name="Shape" d="M54.21,57a1,1,0,0,0,1-1V53.9a1,1,0,1,0-2.07,0V56A1,1,0,0,0,54.21,57Z" fill="#2b7db5"/><path id="Shape-21" data-name="Shape" d="M59.38,57a1,1,0,0,0,1-1V53.9a1,1,0,0,0-2.07,0V56A1,1,0,0,0,59.38,57Z" fill="#2b7db5"/><path id="Shape-22" data-name="Shape" d="M64.55,57a1,1,0,0,0,1-1V53.9a1,1,0,1,0-2.07,0V56A1,1,0,0,0,64.55,57Z" fill="#2b7db5"/><path id="Shape-23" data-name="Shape" d="M79,54.93a1,1,0,0,0-1-1H73.86a1,1,0,0,0,0,2.07H78A1,1,0,0,0,79,54.93Z" fill="#2b7db5"/></g></g></g></g></svg> 

CSS

svg:hover #Rectangle{ fill: #DAF0FF; } 
#Rectangle{ transition: 1s; } 

https://codepen.io/Vitamin-b/pen/OjgwOd

任何幫助將appriciated

Answer 1

你需要給#Rectangle一個爲了過渡到工作的初始價值。因爲它需要一個值來過渡到/從。例如：

#Rectangle{ 
    fill: white; 
    transition: 1s; 
} 

#Rectangle{ 
 
    fill: white; /*Add starting fill*/ 
 
    transition: 1s; } 
 
svg:hover #Rectangle{ 
 
    fill: #DAF0FF; 
 
}

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 162 113"><title>Telephone</title><g id="Page-1"><g id="Artboard-2"><g id="Group-13"><g id="Group-4"><g id="Group-9"><rect id="Rectangle" x="1" y="1" width="160" height="111" rx="8" ry="8" fill="none" stroke="#2b7db5" stroke-width="2"/></g></g><g id="icons8-phone_office" data-name="icons8-phone office"><rect id="Rectangle-path" x="55.24" y="36.31" width="55.86" height="49.66" rx="3" ry="3" fill="#c2cde7"/><path id="Shape" d="M59.38,72.52H107a4.14,4.14,0,0,1,4.14,4.14v6.21A3.1,3.1,0,0,1,108,86H58.34a3.1,3.1,0,0,1-3.1-3.1V76.66A4.14,4.14,0,0,1,59.38,72.52Z" fill="#acb7d0"/><path id="Shape-2" data-name="Shape" d="M68.69,36.31H108a3.1,3.1,0,0,1,3.1,3.1V54.93H65.59V39.41A3.1,3.1,0,0,1,68.69,36.31Z" fill="#bbdef9"/><polygon id="Shape-3" data-name="Shape" points="78.18 54.93 92.31 36.31 108.86 36.31 94.73 54.93 78.18 54.93" fill="#def0ff"/><polygon id="Shape-4" data-name="Shape" points="69.94 54.93 84.68 36.31 88.17 36.31 73.43 54.93 69.94 54.93" fill="#def0ff"/><polygon id="Shape-5" data-name="Shape" points="66.96 52.86 80.07 36.31 81.1 36.31 68 52.86 66.96 52.86" fill="#def0ff"/><path id="Shape-6" data-name="Shape" d="M66.62,32.17H53.17V28H49V76.66a3.1,3.1,0,0,0,3.1,3.1H66.62a3.1,3.1,0,0,0,3.1-3.1V35.28A3.1,3.1,0,0,0,66.62,32.17Z" fill="#c2cde7"/><rect id="Rectangle-path-2" data-name="Rectangle-path" x="49.03" y="72.52" width="20.69" height="7.24" rx="3" ry="3" fill="#acb7d0"/><path id="Shape-7" data-name="Shape" d="M53.17,32.17h14a2.59,2.59,0,0,1,2.59,2.59h0a2.59,2.59,0,0,1-2.59,2.59h-14Z" fill="#ced9ed"/><rect id="Rectangle-path-3" data-name="Rectangle-path" x="75.93" y="61.14" width="6.21" height="6.21" fill="#ed7899"/><rect id="Rectangle-path-4" data-name="Rectangle-path" x="86.28" y="61.14" width="6.21" height="6.21" fill="#85cbf8"/><rect id="Rectangle-path-5" data-name="Rectangle-path" x="96.62" y="61.14" width="6.21" height="6.21" fill="#85cbf8"/><rect id="Rectangle-path-6" data-name="Rectangle-path" x="75.93" y="71.48" width="6.21" height="6.21" fill="#85cbf8"/><rect id="Rectangle-path-7" data-name="Rectangle-path" x="86.28" y="71.48" width="6.21" height="6.21" fill="#85cbf8"/><rect id="Rectangle-path-8" data-name="Rectangle-path" x="96.62" y="71.48" width="6.21" height="6.21" fill="#72caaf"/><path id="Shape-8" data-name="Shape" d="M81.1,60.1H77a2.07,2.07,0,0,0-2.07,2.07v4.14A2.07,2.07,0,0,0,77,68.38H81.1a2.07,2.07,0,0,0,2.07-2.07V62.17A2.07,2.07,0,0,0,81.1,60.1Zm0,6.21H77V62.17H81.1Z" fill="#2b7db5"/><path id="Shape-9" data-name="Shape" d="M91.45,60.1H87.31a2.07,2.07,0,0,0-2.07,2.07v4.14a2.07,2.07,0,0,0,2.07,2.07h4.14a2.07,2.07,0,0,0,2.07-2.07V62.17A2.07,2.07,0,0,0,91.45,60.1Zm0,6.21H87.31V62.17h4.14Z" fill="#2b7db5"/><path id="Shape-10" data-name="Shape" d="M91.45,70.45H87.31a2.07,2.07,0,0,0-2.07,2.07v4.14a2.07,2.07,0,0,0,2.07,2.07h4.14a2.07,2.07,0,0,0,2.07-2.07V72.52A2.07,2.07,0,0,0,91.45,70.45Zm0,6.21H87.31V72.52h4.14Z" fill="#2b7db5"/><path id="Shape-11" data-name="Shape" d="M101.79,70.45H97.66a2.07,2.07,0,0,0-2.07,2.07v4.14a2.07,2.07,0,0,0,2.07,2.07h4.14a2.07,2.07,0,0,0,2.07-2.07V72.52A2.07,2.07,0,0,0,101.79,70.45Zm0,6.21H97.66V72.52h4.14Z" fill="#2b7db5"/><path id="Shape-12" data-name="Shape" d="M101.79,60.1H97.66a2.07,2.07,0,0,0-2.07,2.07v4.14a2.07,2.07,0,0,0,2.07,2.07h4.14a2.07,2.07,0,0,0,2.07-2.07V62.17A2.07,2.07,0,0,0,101.79,60.1Zm0,6.21H97.66V62.17h4.14Z" fill="#2b7db5"/><path id="Shape-13" data-name="Shape" d="M81.1,70.45H77a2.07,2.07,0,0,0-2.07,2.07v4.14A2.07,2.07,0,0,0,77,78.72H81.1a2.07,2.07,0,0,0,2.07-2.07V72.52A2.07,2.07,0,0,0,81.1,70.45Zm0,6.21H77V72.52H81.1Z" fill="#2b7db5"/><path id="Shape-14" data-name="Shape" d="M78,46.73h1v1H78a1,1,0,1,0,0,2.07h2.07a1,1,0,0,0,1-1v-3.1a1,1,0,0,0-1-1H79V43.55h1a1,1,0,0,0,0-2.07H78a1,1,0,0,0-1,1v3.1a1,1,0,0,0,1,1.11Z" fill="#2b7db5"/><path id="Shape-15" data-name="Shape" d="M84.21,46.73h1v1h-1a1,1,0,1,0,0,2.07h2.07a1,1,0,0,0,1-1v-3.1a1,1,0,0,0-1-1h-1V43.55h1a1,1,0,0,0,0-2.07H84.21a1,1,0,0,0-1,1v3.1a1,1,0,0,0,1,1.11Z" fill="#2b7db5"/><path id="Shape-16" data-name="Shape" d="M90.41,46.73h1v1h-1a1,1,0,0,0,0,2.07h2.07a1,1,0,0,0,1-1v-3.1a1,1,0,0,0-1-1h-1V43.55h1a1,1,0,1,0,0-2.07H90.41a1,1,0,0,0-1,1v3.1a1,1,0,0,0,1,1.11Z" fill="#2b7db5"/><path id="Shape-17" data-name="Shape" d="M100.76,46.73h1v1h-1a1,1,0,1,0,0,2.07h2.07a1,1,0,0,0,1-1v-3.1a1,1,0,0,0-1-1h-1V43.55h1a1,1,0,0,0,0-2.07h-2.07a1,1,0,0,0-1,1v3.1a1,1,0,0,0,1,1.11Z" fill="#2b7db5"/><path id="Shape-18" data-name="Shape" d="M109,35.28H70.66a5.17,5.17,0,0,0-5.07-4.14H54.21v-1a3.1,3.1,0,0,0-6.21,0V75.62a5.17,5.17,0,0,0,5.17,5.17h1v3.1a3.1,3.1,0,0,0,3.1,3.1H109a3.1,3.1,0,0,0,3.1-3.1V38.38A3.1,3.1,0,0,0,109,35.28ZM51.1,29.07a1,1,0,0,1,1,1v8.28a1,1,0,0,0,2.07,0V33.21H65.59a3.1,3.1,0,0,1,3.1,3.1V72.52H50.07V30.1A1,1,0,0,1,51.1,29.07Zm-1,46.55v-1H68.69v1a3.1,3.1,0,0,1-3.1,3.1H53.17A3.1,3.1,0,0,1,50.07,75.62Zm59,9.31H57.31a1,1,0,0,1-1-1v-3.1h9.31a5.17,5.17,0,0,0,5.17-5.17V37.34H109a1,1,0,0,1,1,1V53.9H82.14a1,1,0,1,0,0,2.07h27.93V83.9A1,1,0,0,1,109,84.93Z" fill="#2b7db5"/><path id="Shape-19" data-name="Shape" d="M95.59,46.66h2.07a1,1,0,0,0,0-2.07H95.59a1,1,0,1,0,0,2.07Z" fill="#2b7db5"/><path id="Shape-20" data-name="Shape" d="M54.21,57a1,1,0,0,0,1-1V53.9a1,1,0,1,0-2.07,0V56A1,1,0,0,0,54.21,57Z" fill="#2b7db5"/><path id="Shape-21" data-name="Shape" d="M59.38,57a1,1,0,0,0,1-1V53.9a1,1,0,0,0-2.07,0V56A1,1,0,0,0,59.38,57Z" fill="#2b7db5"/><path id="Shape-22" data-name="Shape" d="M64.55,57a1,1,0,0,0,1-1V53.9a1,1,0,1,0-2.07,0V56A1,1,0,0,0,64.55,57Z" fill="#2b7db5"/><path id="Shape-23" data-name="Shape" d="M79,54.93a1,1,0,0,0-1-1H73.86a1,1,0,0,0,0,2.07H78A1,1,0,0,0,79,54.93Z" fill="#2b7db5"/></g></g></g></g></svg>

Answer 2

原因的過渡是不工作是因爲矩形被定義爲具有fill="none"。您不能從none轉換爲顏色。關鍵字「none」表示「沒有填充」，因此轉換等同於將填充「打開」。這就是爲什麼它只是出現，而不是衰落。

#Rectangle { transition: 1s; } 
 

 
svg:hover #Rectangle { fill: #DAF0FF; }

<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 162 113"> 
 
<rect id="Rectangle" x="1" y="1" width="160" height="111" rx="8" ry="8" fill="none" stroke="#2b7db5" stroke-width="2"/> 
 
</svg>

的解決方案是更新矩形，使其具有transparent而非none填充顏色。從透明到另一種顏色的過渡/動畫，允許爲。

#Rectangle { transition: 1s; } 
 

 
svg:hover #Rectangle { fill: #DAF0FF; }

<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 162 113"> 
 
<rect id="Rectangle" x="1" y="1" width="160" height="111" rx="8" ry="8" fill="transparent" stroke="#2b7db5" stroke-width="2"/> 
 
</svg>