Нужен совет по корректировке скрипта

#1 28 января 2017 в 09:46
Есть скрипт. он меняет вид логотипа при наведении на блок, а именно за это отвечает строка elem_other.animate({'d': "M17"}, animation_duration, animation_easing);, где 'd': "M17" — это SVG картинка. Вот вместо этого кода как вывести путь до обычной phg картинки?
  1. function toggleLeftSideBar(force_state) {// force_state 3 for toggle
  2. if((left_side_bar_can_be_hovered)&&(force_state!=left_side_bar_opened)) {
  3. var animation_easing = mina.easeinout,
  4. animation_duration = 300
  5. ;
  6. clearInterval(left_side_bar_interval);
  7. if(jQuery('#left_container').hasClass('hovered')) {
  8. var animatingLogo = Snap('#logo_svg'),
  9. elem_H = animatingLogo.select('#logo_h');
  10. //elem_H.animate({'d': "M16,10.7l0,10.7h16V10.7h5.3v26.7H32V26.7H16v10.7h-5.3V10.7H16z"}, animation_duration, animation_easing);
  11. elem_H.animate({ transform: "s0.89,10,20"}, animation_duration, animation_easing);
  12. elem_other = animatingLogo.select('#logo_other');
  13. elem_other.animate({'d': "M47"}, animation_duration, animation_easing);
  14. jQuery('#left_container').removeClass('hovered');
  15. left_side_bar_opened = 0;
  16. left_side_bar_may_click = false;
  17. } else {
  18. var animatingLogo = Snap('#logo_svg'),
  19. elem_H = animatingLogo.select('#logo_h');
  20. //elem_H.animate({'d': "M17,39h-6V9h6l0,12l18,0V9h6v30h-6V27H17V39z"}, animation_duration, animation_easing);
  21. elem_H.animate({ transform: "s1,0,0"}, animation_duration, animation_easing);
  22. elem_other = animatingLogo.select('#logo_other');
  23. elem_other.animate({'d': "M17"}, animation_duration, animation_easing);
  24. jQuery('#left_container').addClass('hovered');
  25. left_side_bar_opened = 1;
  26. setInterval(function(){left_side_bar_may_click = true},500);
  27. }
  28. }
  29. }
#2 28 января 2017 в 10:51
Как отредактировать данный код не подскажу, но возможно подскажу решение..
Все это работает на спрайтах на вскидку что по яше выдал ссылка 1..
Из опыта подскажу, была у нас задача сделать смену дня и ночи в шапке в зависимости от времени суток, воспользовались спрайтами, я сейчас не вспомню что именно использовали из инструментов — но код формировали с помощью игрового движка, можете попробовать подобрать под ваши цели что нибудь например, аля такое ссылка 2
их много как программ работы со спрайтами так и более сложных и крупных инструментов.
#3 28 января 2017 в 14:10
А пробовали просто поменять {'d': "M47"} на '<img src=".." />'?
#4 28 января 2017 в 14:54


А пробовали просто поменять {'d': "M47"} на '' ?

Lora

да, не работает
#5 28 января 2017 в 15:21
Возможно потому, что Snap.svg работает только с файлами svg
#6 28 января 2017 в 15:23
Сконвектируйте свою картинку в svg
#7 28 января 2017 в 16:00

Возможно потому, что Snap.svg работает только с файлами svg

Lora
как вообще с ним работать с этим snap?) честно туплю сильно, не понимаю как со снапом работать
#8 28 января 2017 в 19:30
Вот пример работы snap.svg сделал. Взял отсюда

PS.Покажите svg код в html
#9 29 января 2017 в 11:40

Вот пример работы snap.svg сделал. Взял отсюда

PS.Покажите svg код в html

Lora
это я читал, но вообще не понял как оно работает. жаль, что нет сервиса, который бы позволил автмоатизировать процесс.
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.