HTML5 SVG грфика и анимация

[Гиф]

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

вот анимация отдельного блока для овала и линии

<rect x="100" y="80" width="140" height="40" rx="60" ry="25"

style="stroke: green; fill: white" ; stroke-width="1.5" fill="slategrey">

<animate attributeName="height" from="0" to="40" begin="button.click" dur="1s"/>

</rect>

<line x1="120" y1="150" x2="250" y2="150" stroke="green" stroke-width="1.5" >

<animate attributeName="x2" from="120" to="250" begin="button.click+2" dur="1s"/>

<animate attributeName="y2" from="150" to="150" begin="button.click+2" dur="1s"/>

</line>

[Гиф]

ладно... подскажите а где могут помочь?

[Николя223]

никогда не работал с svg. сейчас поподставлял минут 10 вот что получилось

http://jsfiddle.net/nikolya223/P2cMx/

svg, оказывается интерессная вещь)

исправил. читайте: _http://webix.pro/svg/spravochnik/atributy/fill.html#fill-animate

http://jsfiddle.net/nikolya223/DqwJ8/

Edited March 17, 2013 by Николя223

[Гиф]

я имел ввиду, что с начало объекты не видны и после нажатия кнопки выполняется анимация и происходит отображение с последующей заморозкой элемента

Edited March 19, 2013 by Гиф

[Николя223]

http://jsfiddle.net/nikolya223/zxFp4/ Edited March 19, 2013 by Николя223

[Гиф]

а не мог ли бы вы объяснить еще немножко:

style="stroke:#ddd;opacity:0" и attributeType="CSS"

[Николя223]

style - это стиль)) насколько я понимаю stroke - цвет обводки, opacity, взят из CSS и обозначает прозрачность. варьируется в пределах от 0 до 1.

атрибутТайп CSS об этом и говорит, что анимационный эффект накладывается на свойство, которое является Стилем, и находится в атрибуте STYLE)) как то так. ))

читайте тот сайт, ссылку на который я вам дал. Вы с SVG дольше занимаетесь, я его впервые вижу)))

[Гиф]

ссылка открываться почему то не хочет(, а 2 проблема я плохо знаю хтмл )) так как лишь заканчиваю колледж и пишу диплом в котором используется хтмл5, асп.нет и си шарп

[Николя223]

http://webix.pro/svg/spravochnik/atributy/fill.html#fill-animate

вы бы с чего попроще начали) туго вам придется. html - это основы

[Гиф]

так знаю но время поджимает)

а вообще хтмл 5 мне нужен что бы анимировать алгоритм с разветвлением, по нажатию 1 кнопки отображается по 1 ветке по нажатию 2 кнопки по другой в этом вся и сложность)

[Great Rash]

Вы бы купили книжечку. HTML - это совсем не сложно, нужно просто перестать лениться и потратить 3-4 вечера на прочтение.