locked
Clock using SVG RRS feed

  • Question

  • User-414050457 posted

    See this Svg code

     <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200"><defs/><path fill="none" stroke="#000000" d="M187.5,100L170.00000000000003,100" style="stroke-width: 2;" stroke-width="2"/><path fill="none" stroke="#000000" d="M175.7772228311384,56.25L160.62177826491074,65" style="stroke-width: 2;" stroke-width="2"/><path fill="none" stroke="#000000" d="M143.75,24.22277716886162L135,39.37822173508929" style="stroke-width: 2;" stroke-width="2"/><path fill="none" stroke="#000000" d="M100,12.5L100,29.999999999999993" style="stroke-width: 2;" stroke-width="2"/><path fill="none" stroke="#000000" d="M56.25000000000002,24.222777168861608L65.00000000000001,39.378221735089284" style="stroke-width: 2;" stroke-width="2"/><path fill="none" stroke="#000000" d="M24.222777168861608,56.25L39.378221735089284,65" style="stroke-width: 2;" stroke-width="2"/><path fill="none" stroke="#000000" d="M12.5,99.99999999999999L29.999999999999993,99.99999999999999" style="stroke-width: 2;" stroke-width="2"/><path fill="none" stroke="#000000" d="M24.222777168861608,143.74999999999997L39.378221735089284,135" style="stroke-width: 2;" stroke-width="2"/><path fill="none" stroke="#000000" d="M56.24999999999996,175.77722283113837L64.99999999999997,160.6217782649107" style="stroke-width: 2;" stroke-width="2"/><path fill="none" stroke="#000000" d="M99.99999999999999,187.5L99.99999999999999,170.00000000000003" style="stroke-width: 2;" stroke-width="2"/><path fill="none" stroke="#000000" d="M143.75,175.77722283113837L135,160.62177826491072" style="stroke-width: 2;" stroke-width="2"/><path fill="none" stroke="#000000" d="M175.77722283113837,143.75000000000006L160.6217782649107,135.00000000000003" style="stroke-width: 2;" stroke-width="2"/><ellipse cx="100" cy="100" rx="87.5" ry="87.5" fill="none" stroke="#000" style="stroke-width: 2;" stroke-width="2"/><ellipse cx="100" cy="100" rx="2.1875" ry="2.1875" fill="none" stroke="#000" style="stroke-width: 2;" stroke-width="2"/><path fill="none" stroke="#000000" d="M139.2251662373625,96.56824262931096L100,100" style="stroke-width: 2;" stroke-width="2"/><path fill="none" stroke="#000000" d="M54.53366630131698,73.75L100,100" style="stroke-width: 2;" stroke-width="2"/></svg></div>

    When i executes this code then it displays a clock with time 02:50 now i want to change the time of this click like 01:15, 08:10 etc by using above code. . How this can be possible by using above code

    Tuesday, June 5, 2012 1:43 AM

Answers

  • User-781136081 posted

    Hi Bushan Bharat,

    1.The first 12 <path fill are for the time viz 1,2,3,..12

    2.Following to that, the first ellipse points to the outer circle of the clock

    3.The second ellipse points to the centre point where the two needls connect

    4.Next the <path fill, points to the smaller needle

    5.The last <path points to the bigger needle of the clock.


    For example experiment the last needle, where the value of d is as follows.

    * d    =     "M54.53366630131698,      73.75L100,100"            points to the x,y co-ordinates

        Try changing the 73 to 20 etc, reducing the value will move the needle towards 12. Note the proposition of the x axis as well y axis must be properly maintained. otherwise the needle would grow in size. The third value 100 should be fixed, otherwise the needle will be moved away from the centre.

    Enjoy experimenting more

    -Rishi

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 5, 2012 3:33 AM