Question

我想为我的svg元素设置一个微弱的黄色灯光效果（车头灯）。鼠标悬停时可以这样做吗？

这是我车的svg元素：

		<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
				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
				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
				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
				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过滤器添加眩光效果。这是一个例子：

＆＃13;

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

＆＃13;

<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>

＆＃13;

在鼠标悬停svg上更改颜色

1 个答案: