我有一個帶有圖示的容器，該圖示應該執行兩個功能：
當我直接在標記中使用 SVG 時，懸停效果可以按預期工作，但我無法像使用img標籤時那樣為 SVG 分配按鈕角色：
.container { height: 500px; width: 400px; background-color: lightblue; position: relative; } .favourite-icon { position: absolute; top: 16px; right: 16px; } .favourite-icon:hover { fill: red; }
但是，當我使用img標籤時，我可以透過src屬性使用SVG，為img指派按鈕角色，但無法在懸停狀態下達到預期結果（SVG 保存在自己的檔案並在src) 中引用：
.container { height: 500px; width: 400px; background-color: lightblue; position: relative; } .favourite-icon { position: absolute; top: 16px; right: 16px; } .favourite-icon:hover { fill: red; }
誰能給點建議嗎？
將 SVG 視為文檔。當您將 HTML 檔案包含在
中時，您無法編輯該框架中的 CSS。當您將其作為img而不是 SVG src 程式碼包含時，它會直接從 src 文件中提取該映像。但是，CSS
濾鏡a> 讓我們可以直接在瀏覽器中套用一大堆很酷的 Photoshop 式效果。img { max-width: 100%; } img:hover { filter: invert(0.5) sepia(1) hue-rotate(200deg) saturate(4) brightness(1); }