更改鼠標懸停的顏色svg

Question

我想爲我的svg元素設置淡淡的黃色照明效果（車頭燈）。鼠標懸停可以做到這一點嗎？

這裏是我的車的SVG元素：

\t \t <path d="M-286.912,486.288c-5.668,11.518-10.595,21.793-15.771,31.941c-2.707,5.307-7.279,7.822-13.323,7.754 
 
\t \t \t \t c-8.107-0.09-16.215-0.022-24.236-0.022c-2.128-14.509,10.613-32.582,25.01-35.839c7.575-1.714,15.223-3.119,22.869-4.498 
 
\t \t \t \t C-291.004,485.378-289.497,485.944-286.912,486.288z M-289.368,487.823c-0.416-0.483-0.833-0.966-1.249-1.449 
 
\t \t \t \t c-7.414,1.581-14.821,3.191-22.242,4.736c-16.099,3.351-22.808,14.912-26.056,29.591c-0.493,2.228-0.81,4.176,2.248,4.142 
 
\t \t \t \t c7.625-0.084,15.336,0.294,22.832-0.779c3.441-0.492,7.727-3.229,9.433-6.206C-298.845,508.159-294.301,497.879-289.368,487.823z"/>

Answer 1

您發佈似乎並沒有做任何SVG的數據。但是，您可以使用SVG濾鏡添加眩光效果。這裏有一個例子：

svg:hover .headlight { 
 
    fill: yellow; 
 
    filter: url(#f1); 
 
}

<svg width="600" height="300" viewBox="0 0 600 300"> 
 
    <defs> 
 
    <filter id="f1" x="-25%" y="-25%" width="150%" height="150%"> 
 
     <feGaussianBlur in="SourceGraphic" stdDeviation="15" result="glare" /> 
 
     <feMerge> 
 
     <feMergeNode in="glare" /> 
 
     <feMergeNode in="SourceGraphic" /> 
 
     </feMerge> 
 
    </filter> 
 
    </defs> 
 
    <path fill="black" stroke="none" d="M0 0 600 0 600 300 0 300z" /> 
 
    <circle cx="150" cy="150" r="50" fill="darkslategray" class="headlight" /> 
 
    <circle cx="450" cy="150" r="50" fill="darkslategray" class="headlight" /> 
 
</svg>