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

115

粉红猫

所以我想打个钟，正如您在下面的程序中看到的那样，线条没有出现在圆圈上，也找不到它们。请帮我，我不知道原因。这是我第一次制作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;
}

运行脚本

如果线条没有笔触，则不会出现。您需要将类似的内容stroke: black应用于CSS中的行。

检查以下代码段：

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>

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。