Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

angularjs - Dotted/Dashed circle shapes using CSS - Not rendering right in Chrome

We're trying to render a circle in which I can place a number. I want the circle to use either a solid, dashed or dotted border. In addition the color can vary and it would be all defined in CSS, so trying to use images for this will be less than optimal.

circle-score-label {
  height: 30px;
  width: 30px;
}

circle-score-label .circle {
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: relative;
  border: 3px solid black;
}

circle-score-label .solid-conf {
  border-style: solid;
}

circle-score-label .dotted-conf {
  border-style: dotted;
}

circle-score-label .dashed-conf {
  border-style: dashed;
}

In IE11 it seems to render fine. Whereas in Chrome(Currently 42.0.2311.135 m or Canary), the there is a gap in the top of the circle.

Chrome example:

enter image description here

IE example:

enter image description here

Has anyone ran into this issue and how to solve it?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

These differences are expected because of the way how each browser renders it and there is not much that we can do to control it. If you need to support FireFox also then I would suggest moving away from this method because FF cannot display dashed borders as of now.

Your best bet would be to use SVG to achieve this because SVG allows greater control over the dots/dashes through the usage of stroke-dasharray property.

Below is a sample snippet: (I am giving this though you haven't tagged SVG because SVG is probably the best suited for things like this and the example can guide you.)

svg{
  height: 100px;
  width: 100px;
}
circle {
  fill: transparent;
  stroke: green;
  stroke-width: 3;
}
.solid{
  stroke-dasharray: none;
}
.dashed {
  stroke-dasharray: 8, 8.5;
}
.dotted {
  stroke-dasharray: 0.1, 12.5;
  stroke-linecap: round;
}
div {
  height: 100px;
  width: 100px;
  color: green;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
}
<svg viewBox="0 0 120 120">
  <circle cx="55" cy="55" r="50" class="solid" />
  <foreignObject x="5" y="5" height="100px" width="100px">
    <div>100</div>
  </foreignObject>
</svg>

<svg viewBox="0 0 120 120">
  <circle cx="55" cy="55" r="50" class="dashed" />
  <foreignObject x="5" y="5" height="100px" width="100px">
    <div>100</div>
  </foreignObject>
</svg>

<svg viewBox="0 0 120 120">
  <circle cx="55" cy="55" r="50" class="dotted" />
  <foreignObject x="5" y="5" height="100px" width="100px">
    <div>100</div>
  </foreignObject>
</svg>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...