SVG 动画红绿灯

Question

我正在使用 SVG 动画创建红绿灯。我选择了矩形来使用（我可能会切换到圆形）。我在填充不透明度和鼠标效果方面遇到问题。

我想要什么- 我希望灯光在初始加载时几乎不可见（暗淡），当您将鼠标悬停在它上面时它会变亮，然后当您使用你的鼠标关闭它变回几乎看不见。

发生了什么- 在 html 页面初始加载时，所有指示灯都亮起。一旦我将鼠标悬停在一盏灯上，什么也没有发生，当我将鼠标从一盏灯上移开时，它就会熄灭。在我打开所有灯之后，所有灯都熄灭了。然后它按我想要的方式正常工作。

我的代码

<svg width="500" height="800">
<!--Stoplight Pole-->
<line x1="100" y1="100" x2="400" y2="100" style="stroke: green; stroke-width:50" />
<line x1="400" y1="0" x2="400" y2="600" style="stroke: green; stroke-width:50" />
<rect x="300" y="600" height="100" width="200"></rect>

<!--Begin Stoplight-->
<rect id="stoplight" x="30" y="0" height="300" width="100" fill="black"></rect>

<rect id="redlight" x="55" y="25" height="60" width="50" fill="red" 
onmouseover="this.style.stroke = 'red'; evt.target.setAttribute('opacity','1.0'); this.style['stroke-width'] = 4; 
onmouseout="this.style.stroke = 'red'; evt.target.setAttribute('opacity', '0.5'); this.style['stroke-width'] = 1;"></rect>

<rect id="yellowlight" x="55" y="125" height="60" width="50" fill="yellow" 
onmouseover="this.style.stroke = 'yellow'; evt.target.setAttribute('opacity', '1.0'); this.style['stroke-width'] = 4;" 
onmouseout="this.style.stroke = 'yellow'; evt.target.setAttribute('opacity','0.5'); this.style['stroke-width'] = 1;"></rect>

<rect id="greenlight" x="55" y="225" height="60" width="50" fill="green" 
onmouseover="this.style.stroke = 'green'; evt.target.setAttribute('opacity', '1.0'); this.style['stroke-width'] = 4;" 
onmouseout="this.style.stroke = 'green'; evt.target.setAttribute('opacity', '0.5'); this.style['stroke-width'] = 1;"></rect>

</svg>

我尝试了多种填充不透明度组合，所提供的代码仅来自我最近的尝试。

JSFiddle

Answer 1

您想将初始不透明度值设置为 0.5。

试试这个：

<svg width="500" height="800">
<line x1="100" y1="100" x2="400" y2="100" style="stroke: green; stroke-width:50" />
<line x1="400" y1="0" x2="400" y2="600" style="stroke: green; stroke-width:50" />
<rect x="300" y="600" height="100" width="200"></rect>

<rect id="stoplight" x="30" y="0" height="300" width="100" fill="black"></rect>

<rect id="redlight" x="55" y="25" height="60" width="50" fill="red"  opacity="0.5" onmouseover="this.style.stroke = 

'red'; evt.target.setAttribute('opacity', '1.0'); this.style['stroke-width'] = 4;"
       onmouseout="this.style.stroke = 'red'; evt.target.setAttribute('opacity', '0.5'); 

this.style['stroke-width'] = 1;"></rect>
    
<rect id="yellowlight" x="55" y="125" height="60" width="50" fill="yellow"  opacity="0.5"

onmouseover="this.style.stroke = 'yellow';  evt.target.setAttribute('opacity', '1.0'); 

this.style['stroke-width'] = 4;"
       onmouseout="this.style.stroke = 'yellow'; evt.target.setAttribute('opacity', 

'0.5');this.style['stroke-width'] = 1;"></rect>
    
<rect id="greenlight" x="55" y="225" height="60" width="50" fill="green" opacity="0.5"

onmouseover="this.style.stroke = 'green'; evt.target.setAttribute('opacity', '1.0'); 

this.style['stroke-width'] = 4;" 
       onmouseout="this.style.stroke = 'green'; evt.target.setAttribute('opacity', '0.5'); 

this.style['stroke-width'] = 1;"></rect>

</svg>

SVG 动画红绿灯

SVG animation StopLight

html

animation

svg