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">&nbsp;&nbsp;&nbsp;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

Popular posts from this blog

Java 3D LWJGL collision -

spring - SubProtocolWebSocketHandler - No handlers -

methods - python can't use function in submodule -