Длина часовой стрелки часов SVG

Я играл с этими часами на кодовой ручке http://codepen.io/knitevision1/pen/qfdne .

Может ли кто-нибудь помочь мне уменьшить длину часовой стрелки? Я пытался изменить высоту, но, похоже, рука тянется снаружи внутрь.

Рассматриваемый фрагмент кода:

<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>

Спасибо!


svg css clock
person ls_dev    schedule 29.05.2015    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Просто измените как height, так и y. Например, для 20px короче:

<rect id="hour" x="47.5" y="32.5" width="5" height="20" rx="2.5" ry="2.55" />

Центр часов находится в 50, 50, поэтому формулы для x и y для обеих стрелок таковы:

x = 50 - width/2
y = 50 - height
person Dark Falcon    schedule 29.05.2015