SVG animation pattern - Светофор

Question

Я хочу анимировать повторяющийся светофор, как в реальной жизни. Я изменяю непрозрачность от темного до более яркого, чтобы отображать, какой свет горит. Это работает, но это не повторяется.

Pattern Я хочу
Redlight в течение 6 секунд ... выключить
затем начать Yellowlight в течение 3 секунд ... выключить
затем начать Greenlight в течение 6 секунд ... выключить
Тогда назад к Желтому свету в течение 3 секунд ... выключить
Затем обратно в Redlight в течение 6 секунд ... выключить
и шаблон продолжает повторяться.

Узор У меня есть
Redlight начинается в 0s в течение 2 секунд ... затем выключите
Yellowlight начинается в 2s в течение 2 секунд ... затем выключите
Greenlight начинается с 4s на 2 секунды .. .then выключить
Они все держаться подальше (без повтора)

Этот код 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

Update Отредактированный код с повторяющимися огни работают. Проблемы с шаблоном, желтый свет переходит обратно на красный свет.

Обновлено:JSFiddle

Answer 1

Вы имеете несколько элементов с одинаковым идентификатором, который является недействительным. После исправления, что вы можете правильно настроить цель анимации, например.

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