Вопрос

    kattiperk

    Здравствуйте. Как осуществить такую анимацию - https://dribbble.com/shots/1296229-Animation-Rectify-Stats

    От нее нужен сам круг и цифры в центре, ну и эффект тоже.

    На SVG? Вдруг у кого-то есть пример, поделитесь, пожалуйста.

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах

    12 ответов на этот вопрос

    Рекомендуемые сообщения

    • 0
    Igor Schnaider

    У меня так получилось :-)
    Код, конечно, надо нормально оформить. Просто как пример.

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    kattiperk

    @Igor Schnaider , спасибо. Можно вас попросить прикрутить еще точку на конец .stat__path_bar, чтоб было примерно так - http://joxi.ru/52aQLKkuG7QzK2

    Пока не могу сама разобраться, не становится куда хочу.

    http://codepen.io/kattiperk/pen/mEvqVq

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    Igor Schnaider

    Самое простое сделать вот такую группу и  всю ее вращать, вместо того, чтобы писать уравнение для шарика.

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    DivMan
    42 минуты назад, Igor Schnaider сказал:

    Самое простое сделать вот такую группу и  всю ее вращать, вместо того, чтобы писать уравнение для шарика.

    а если сделать простой ползунок и закруглить его?

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    kattiperk

    А если несколько таких анимаций на странице? Отчего они не работают, кроме первой?

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    Igor Schnaider
    14 часа назад, kattiperk сказал:

    А если несколько таких анимаций на странице? Отчего они не работают, кроме первой?

    Ну так они и не должны работать. Я же написал

    В 10.08.2016 в 20:47, Igor Schnaider сказал:

    Просто как пример.

     

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    kattiperk

    Спасибо, хороший великолепный прекрасный мастер в костюме космонавта.

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    Igor Schnaider
    В 14.08.2016 в 21:26, Igor Schnaider сказал:

    Самое простое сделать вот такую группу и  всю ее вращать, вместо того, чтобы писать уравнение для шарика.

    Кстати, тут я перемудрил :-)
    Достаточно центр трансформации шарика сместить было.

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах
    • 0
    kattiperk

    Таки остался последний вопрос - мы их вывели после <body>. А как засунуть в определенный контейнер одну svg?

    Изменено пользователем kattiperk

    Поделиться сообщением


    Ссылка на сообщение
    Поделиться на других сайтах

    Создайте аккаунт или войдите в него для комментирования

    Вы должны быть пользователем, чтобы оставить комментарий

    Создать аккаунт

    Зарегистрируйтесь для получения аккаунта. Это просто!

    Зарегистрировать аккаунт

    Войти

    Уже зарегистрированы? Войдите здесь.

    Войти сейчас

    • Войти через Facebook
    • Войти через Twitter
    • Войти через Microsoft
    • Войти через LinkedIn
    • Войти через Google

    • Похожие публикации

      • Ospna
        Автор: Ospna
        Решил анимировать иконки, нашел пример в интернете, скопировал

        в Safari Версия 11.0.2 (13604.4.7.1.3), в мобильных Safari и Chrome все отображается отлично

        но почему-то иконки неправильно отображаются в Chrome Mac (Версия 63.0.3239.132 (Официальная сборка), (64 бит), Chrmoe Windows и Edge - на переднем плане анимированный градиент, а на заднем иконка
         
        пример кода
        пример того как должна выглядеть анимированная иконка во вложении
        Screen Capture 2018-01-10 06.49.14.mov
      • Hasiev
        Автор: Hasiev
        У меня в проекте используются медиа-изображения с помощью picture и source, изображения формата svg, нужно что бы при ховере менялись некоторые стили у svg-элемента .. Как это сделать? И возможно ли это в данном случае? Пробовал в каждом svg-файле прописовать ховеры, не работает .. 
        Я так понял нужно вставлять все svg на страницу, а с помощью media queries, показывать нужное .. Только так?
      • Koss
        Автор: Koss
        Здравствуйте! 
        Проблема следующая: есть некий корпоративный портал (уже довольно древненький и написанный задолго до меня), с него есть обычная ссылка <a> на карту, которая открывается в новой вкладке. Карта нарисована как svg и вставлена непосредственно в саму страницу через тег <svg> (вновь открываемую). Проблема в том, что при переходе по ссылке непосредственно с портала, IE11 не отображает svg и не корректно отображает стили для блоков с текстом. Все остальные браузеры отображают все полностью и правильно. Самое главное, что отдельно (правда на другом веб-сервере [может это важно]) эту страницу с картой IE11 отображает просто замечательно. Но стоит обратиться к ней через ссылку с главной страницы портала, не работает. Предполагаю, что проблема непосредственно с порталом. Где-то какие-то стили не те, или еще что... Может кто поопытнее подскажет, в какую сторону хоть копать...
        При написании портала использованы:      - jquery.fancybox-1.3.4.css
                                                                                                     - AC_RunActiveContent.js
                                                                                                    - swfobject_modified.js
                                                                                                    - jquery-1.4.3.min.js
                                                                                                    - jquery.easing-1.3.pack.js
                                                                                                    - jquery.fancybox-1.3.4.js
                                                                                                    - jquery.fancybox-1.3.4.pack.js
        Может где-то в них проблема?
         
    • advertisement_alt
    • advertisement_alt
    • advertisement_alt