Question

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

我想要的模式
红灯持续6秒......关闭
然后开始黄灯3秒......关闭
然后开始Greenlight 6秒......关闭
然后回到黄灯3秒......关闭
然后回到Redlight 6秒......关闭
而且模式不断重复。

模式我
红灯从0开始持续2秒......然后关闭
黄灯从2秒开始持续2秒......然后关闭
绿灯从4秒开始持续2秒......然后关闭
他们都不在乎（不重复）

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

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

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

JSFiddle

更新使用重复灯工作编辑代码。图案有问题，黄灯会转回红灯。

已更新： JSFiddle

Answer 1

您有多个具有相同ID的元素无效。在修复之后，您可以正确地定位动画结束，例如

<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动画模式 - 交通灯

1 个答案: