我想要的图案 红灯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/>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动画模式
发布评论