title: How to place the hours in a clock dynamically?
body: <p>I made an svg clock using Java by drawing a circle and three animated lines into an svg file. This is how my clock looks like. </p>
  
  <p><img src="https://i.stack.imgur.com/6mwvI.png" alt="enter image description here"></p>
  
  <p>Now I want to add the hours to the clock like the following. </p>
  
  <p><img src="https://i.stack.imgur.com/xiPwL.png" alt="enter image description here"></p>
  
  <p>How can I do the calculations given the <code>cx</code>, <code>cy</code>, <code>r</code>, and <code>stroke-width</code> of the circle ? I want the user to supply these values and I draw the rest including the hour, minute, and second hand. I am not worried about the clock hands, I can figure that out, but I am not sure how to place the hours in the clock dynamically. I don't want to place them manually. </p>
  
  <p>Here is my SVG file. </p>
  
  <pre><code>&lt;svg xmlns = 'http://www.w3.org/2000/svg' version = '1.1' width="500.0" height="500.0"&gt;
  
  
  
  &lt;circle cx="100.0" cy="100.0" r="50.0" stroke="none" stroke-width="1.0" fill="rgba(102,205,170,0.4)"/&gt;
  
  &lt;line x1="100" y1="100" x2="100" y2="62" stroke="red" stroke-width="2.0" stroke-linecap="round"&gt;
  &lt;animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="500ms" repeatCount="indefinite"&gt;&lt;/animateTransform&gt;
   &lt;/line&gt;
  
  &lt;line x1="100" y1="100" x2="100" y2="62" stroke="black" stroke-width="2.0" stroke-linecap="round"&gt;
  &lt;animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="3s" repeatCount="indefinite"&gt;&lt;/animateTransform&gt;
   &lt;/line&gt;
  
  
  &lt;line x1="100" y1="100" x2="100" y2="75" stroke="black" stroke-width="4.0" stroke-linecap="round"&gt;
  &lt;animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="40s" repeatCount="indefinite"&gt;&lt;/animateTransform&gt;
   &lt;/line&gt;
  
  
  &lt;/svg&gt;
  </code></pre>
  
  <p>How do I do this and what are the variables that I need as part of the calculations ? I'm pretty much looking for a formula in order to place the hours correctly. </p>
  
  <p><strong>Update: The answer by Michaël Lhomme is given me the best drawings</strong></p>
  
  <p><img src="https://i.stack.imgur.com/Hx9Uk.png" alt="enter image description here"></p>
  
  <p>How can I make the hours go inside the circle? They are very close but I would want them inside.  </p>
  
  <p>Thanks!</p>