SVG动画模式 - 交通灯 [英] SVG animation pattern - Traffic light

问题描述

我想要像现实生活中一样重复交通灯。我正在将不透明度从黑暗变为更亮，以显示哪个灯亮。哪些工作，但不重复。

我想要的图案

红灯6秒钟...关闭

然后开始黄灯3秒...关闭

然后开始绿灯6秒钟......关闭

然后回到黄灯3秒钟......关闭

然后回到Redlight 6秒钟......关闭
并且模式不断重复。

我有模式

红灯从0秒开始持续2秒...然后关闭

黄灯从2秒开始持续2秒...然后转动关闭

Greenlight从4秒开始持续2秒...然后关闭

他们全部停留（不重复）

SVG代码（用于我的模式）：

 < svg> 
 
< line x1 =100y1 =100x2 =400y2 =100style =stroke：green; stroke-width：50/> 
 < rect x =300y =600height =100width =200fill =green>< / rect> 
 
< rect id =stoplightx =30y =0height =308width =100>< / rect> 
< rect id =redlightx =55y =25height =60width =50>< / rect> 
 < rect id =yellowlightx =55y =125height =60width =50>< / rect> 
 < rect id =greenlightx =55y =225height =60width =50>< / rect> 
 < / svg> 
  

我们刚开始学习SVG，所以我只是一个初学者。

JSFiddle

更新使用重复灯光编辑代码。与该模式有关的问题，黄灯过渡回红灯。


更新： JSFiddle

解决方案

。修正后，您可以正确定位动画结束，例如

 < rect id =stoplightx =30y = 0height =308width =100>< / rect> 
< rect id =redlightx =55y =25height =60width =50>< / rect> 
 < rect id =yellowlightx =55y =125height =60width =50>< / rect> 
 < rect id =greenlightx =55y =225height =60width =50>< / rect> 
   

I want to animate a repeating traffic light just like in real life. I am changing the opacity from dark to brighter to display which light is on. Which works but it doesn't repeat.

Pattern I want
Redlight for 6 seconds...turn off
then begin Yellowlight for 3 seconds...turn off
then begin Greenlight for 6 seconds...turn off
Then back to Yellowlight for 3 seconds...turn off
Then back to Redlight for 6 seconds ...turn off
and the pattern keeps repeating.

Pattern I have
Redlight begin at 0s for 2 seconds ...then turn off
Yellowlight begin at 2s for 2 seconds...then turn off
Greenlight begin at 4s for 2 seconds...then turn off
They all stay off (no repeat)

The SVG code (for the pattern I have):

<svg>

<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" fill="green"></rect>

<rect id="stoplight" x="30" y="0" height="308" width="100"></rect>
<rect id="redlight" x="55" y="25" height="60" width="50"></rect>
<animate xlink:href="#redlight" id="redlight" attributeName="opacity" from=".3" to="1" dur="2s" begin="0s"/>
<rect id="yellowlight" x="55" y="125" height="60" width="50"></rect> 
<animate xlink:href="#yellowlight" id="yellowlight" attributeName="opacity" from=".3" to="1" dur="2s" begin="2s"/>
<rect id="greenlight" x="55" y="225" height="60" width="50"></rect>
<animate xlink:href="#greenlight" id="greenlight" attributeName="opacity" from=".3" to="1" dur="2s" begin= "4s" />
</svg>

We just started learning SVG so I'm just a beginner.

JSFiddle

Update Edited the code with repeating lights working. Issues with the pattern, the yellow light transitions back to red light.

Updated: JSFiddle

解决方案

You've multiple elements with the same id which is invalid. After fixing that you can target the animation end correctly e.g.

<rect id="stoplight" x="30" y="0" height="308" width="100"></rect>
<rect id="redlight" x="55" y="25" height="60" width="50"></rect>
<animate xlink:href="#redlight" id="redlight2" attributeName="opacity" from=".3" to="1" dur="2s" begin="0s;greenlight2.end"/>
<rect id="yellowlight" x="55" y="125" height="60" width="50"></rect> 
<animate xlink:href="#yellowlight" id="yellowlight2" attributeName="opacity" from=".3" to="1" dur="2s" begin="2s"/>
<rect id="greenlight" x="55" y="225" height="60" width="50"></rect>
<animate xlink:href="#greenlight" id="greenlight2" attributeName="opacity" from=".3" to="1" dur="2s" begin="4s" />

这篇关于SVG动画模式 - 交通灯的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！