Why the lines don't appear on my circle in my SVG elements

Question

so I want to make a clock and as you see in the program below, the lines don't appear on the circle and they are nowhere to be found. please help me I can't figure out the reason. this is the first time I'm making an SVG drawing and I would never think it could be this hard...

HTML

<div class="container">
    <div class="frame">
        <svg viewBox="0 0 40 40">
            <circle cx="20" cy="20" r="19" class="circle"/> 
            <g class="numbers">
                <line x1="0" y1="0" x2="200" y2="200" class="one"/>
                <line x1="0" y1="0" x2="200" y2="200" class="two"/>
                <line x1="0" y1="0" x2="200" y2="200" class="three"/>
                <line x1="0" y1="0" x2="200" y2="200" class="four"/>
                <line x1="0" y1="0" x2="200" y2="200" class="five"/>
                <line x1="0" y1="0" x2="200" y2="200" class="six"/>
                <line x1="0" y1="0" x2="200" y2="200" class="seven"/>
                <line x1="0" y1="0" x2="200" y2="200" class="eight"/>
                <line x1="0" y1="0" x2="200" y2="200" class="nine"/>
                <line x1="0" y1="0" x2="200" y2="200" class="ten"/>
                <line x1="0" y1="0" x2="200" y2="200" class="eleven"/>
                <line x1="0" y1="0" x2="200" y2="200" class="twelve" />
            </g>
        </svg>
        
    </div>
    
</div>

CSS

    body{
    background-color: darksalmon;
    margin: 0%;
    padding: 0%;
}
svg{
    height: 400px;
    
}
line{
    left : -280px;
    top : -187px;
    height: 10px;

}
.circle{
    float: left;
    position: relative;
    height: 400px;
    fill:thistle;
    stroke: black;
    stroke-width: 1;
    stroke-linecap: round ;
    z-index: 2;
}

Try providing a stroke and stroke-width either as an attribute or with your css. — rguttersohn, Feb 13 '21 at 17:36
* * https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line — Paulie_D, Feb 13 '21 at 17:49
Svg elements have no concept of float and also can't be positioned using left and top. — Fuzzyma, Feb 14 '21 at 06:44

Alexandr_TT · Answer 1 · 2021-02-15T07:19:27.223

There is a shorter way to code the 12 dash dial.
This is to divide the circle with stroke-dasharray into 12 parts.

To do this, you need to know the full circumference

2 * PI * R = 2 * 3.14 * 16 = 100.48

One part will be equal 100.48 / 12 = 8.37

The formula for dividing a circle into 12 parts with the output of 12 dashes: Stroke-dasharray="1, 7.37", here

1 - dash, 7.37 - gap

Please see the rest of the explanations in the comments to the code.

body{
    background-color: darksalmon;
    margin: 0%;
    padding: 0%;
}
.container {
width:40vw;
height:auto;
}


.circle{
    float: left;
    position: relative;
    height: 400px;
    fill:thistle;
    stroke: black;
    stroke-width: 1;
    stroke-linecap: round ;
    z-index: 2;
} 
  text {
  font-size:6px;
  fill:#111;
  }

<div class="container">
    <div class="frame">
        <svg width="300" height="300"  viewBox="0 0 40 40" >
            <circle class="circle" cx="20" cy="20" r="19" />  
               <!-- stroke-dasharray="1 7.37" Divides the circle into 12 parts -->
           <circle id="circ" cx="20" cy="20" r="16" fill="none" stroke="black" stroke-width="5" stroke-dasharray="1 7.37" />  
              <circle cx="20" cy="20" r="18" fill="none" stroke="#D8BFD8" /> 
            <text x="17.2" y="12">12 </text>  
              <text x="30" y="22">3 </text>  
                 <text x="18.5" y="32">6 </text> 
               <text x="8" y="22">9 </text>     
            <circle id="center" cx="20" cy="20" r="1" fill="none" stroke="#111" />   
                   <!-- Hour hand -->
            <polyline points="20,20 20 10" stroke="black" stroke-linecap="round" />  
                     <!-- Minute hand -->
             <polyline points="20,20 31 24" stroke="black" stroke-linecap="round"   />          
        </svg>
</div>

Run_Script · Accepted Answer · 2021-02-13T18:01:23.143

If a line does not have a stroke, then it won't appear. You'll need to apply something like stroke: black to your line in your CSS.

Check the snippet below:

body {
  background-color: darksalmon;
  margin: 0%;
  padding: 0%;
}

svg {
  height: 400px;
}

line {
  left: -280px;
  top: -187px;
  height: 10px;
  stroke: black;
}

.circle {
  float: left;
  position: relative;
  height: 400px;
  fill: thistle;
  stroke: black;
  stroke-width: 1;
  stroke-linecap: round;
  z-index: 2;
}

<div class="container">
  <div class="frame">
    <svg viewBox="0 0 40 40">
            <circle cx="20" cy="20" r="19" class="circle"/> 
            <g class="numbers">
                <line x1="0" y1="0" x2="200" y2="200" class="one"/>
                <line x1="0" y1="0" x2="200" y2="200" class="two"/>
                <line x1="0" y1="0" x2="200" y2="200" class="three"/>
                <line x1="0" y1="0" x2="200" y2="200" class="four"/>
                <line x1="0" y1="0" x2="200" y2="200" class="five"/>
                <line x1="0" y1="0" x2="200" y2="200" class="six"/>
                <line x1="0" y1="0" x2="200" y2="200" class="seven"/>
                <line x1="0" y1="0" x2="200" y2="200" class="eight"/>
                <line x1="0" y1="0" x2="200" y2="200" class="nine"/>
                <line x1="0" y1="0" x2="200" y2="200" class="ten"/>
                <line x1="0" y1="0" x2="200" y2="200" class="eleven"/>
                
                <line x1="20" y1="0" x2="20" y2="200" class="twelve" />
            </g>
        </svg>

  </div>

</div>

Note: With your code, it looks like only one line is visible, this is because all of your lines have the same start and end points. I've changed the numbers on one of the lines to demonstrate that this is not a problem with the code.

Why the lines don't appear on my circle in my SVG elements

2 Answers2