为什么线条没有出现在我的 SVG 元素的圆圈上

Question

所以我想做一个时钟，正如您在下面的程序中看到的那样，圆圈上没有线条，也找不到它们。请帮助我，我无法找出原因。这是我第一次制作 SVG 绘图，我从没想过它会这么难...

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

Answer 1

如果一行没有笔画，那么它就不会出现。您需要在 CSS.

中的行中应用 stroke: black 之类的内容

检查下面的代码片段：

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>

注意：使用您的代码，看起来只有一行是可见的，这是因为您所有的行都具有相同的起点和终点。我更改了其中一行中的数字以证明这不是代码的问题。

Answer 2

有一种更短的方法来对 12 破折号拨号盘进行编码。
这是用stroke-dasharray把圆分成12份

为此，您需要知道完整的周长

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

一部分等于100.48 / 12 = 8.37

将圆分成12份并输出12条破折号的公式：Stroke-dasharray="1, 7.37"，这里

1 - 破折号，7.37 - 间隙

请参阅代码注释中的其余解释。

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>

为什么线条没有出现在我的 SVG 元素的圆圈上

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

html

css

svg

svg.js