css - SVG clock hour hand length -
i've been playing round clock on code pen http://codepen.io/knitevision1/pen/qfdne.
can me reduce length of hour hand? i've tried altering height seems drawing hand outside in.
the piece of code in question is:
<div id="clock-container" style="padding-left:180px;"> <font color="white" size="1"> london</font> <svg id="clock" viewbox="0 0 100 100"> <circle id="face" cx="50" cy="50" r="45"/> <g id="hands"> <rect id="hour" x="47.5" y="12.5" width="5" height="40" rx="2.5" ry="2.55" /> <rect id="min" x="48.5" y="12.5" width="3" height="40" rx="2" ry="2"/> <line id="sec" x1="50" y1="50" x2="50" y2="16" /> </g> </svg> </div>
thanks!
simply change both height
, y
. example, 20px
shorter:
<rect id="hour" x="47.5" y="32.5" width="5" height="20" rx="2.5" ry="2.55" />
the center of clock @ 50, 50
, formulas x
, y
both hands are:
x = 50 - width/2 y = 50 - height
Comments
Post a Comment