虚线/使用CSS虚线圆圈形状 - 不正确呈现在Chrome [英] Dotted/Dashed circle shapes using CSS - Not rendering right in Chrome
问题描述
我们正在努力呈现一个圈，我可以代替数字。我想圈内使用一个实线，虚线或虚线边框。除了颜色可以变化，这将是在CSS中的所有定义，因此尝试使用这个图像将小于最优
圈得分标签{
高度：30PX;
宽度：30PX;
}圈得分标签.circle {
保证金左：自动;
保证金右：自动;
边界半径：50％;
宽度：100％;
高度：100％;
位置：相对;
边框：3PX纯黑色;
}圈得分标签.solid-conf的{
边框样式：固体;
}圈得分标签.dotted-conf的{
边框样式：星罗棋布;
}圈得分标签.dashed-conf的{
边框样式：虚线;
}
在IE11似乎呈现罚款。而在Chrome（目前42.0.2311.135米或金丝雀）时，有一个在圆的上方缺口。
Chrome范例：
IE例如：
有没有人遇到了这个问题，如何解决呢？
这些差异，预计的，因为每个浏览器如何呈现它并没有太多，我们可以做些什么来控制它的方式。如果你需要支持FireFox还那么我会建议此方法远动因<一个href=\"http://stackoverflow.com/questions/4756049/why-does-border-5px-dashed-not-come-out-as-dashed-in-firefox\">FF无法显示虚线边框作为即时。
您最好的选择是使用SVG来实现这一点，因为SVG允许对点更大的控制/通过的 中风dasharray 财产。
下面是一个示例代码段：（我给这个虽然你还没有标记的SVG ，因为SVG可能是最适合这样的事情和例子可以指导你。）
SVG {\r
高度：100像素;\r
宽度：100像素;\r
}\r
圈{\r
补：透明;\r
行程：绿色;\r
笔画宽度：3;\r
}\r
。固体{\r
行程dasharray：无;\r
}\r
.dashed {\r
行程dasharray：8，8.5;\r
}\r
.dotted {\r
行程dasharray：0.1，12.5;\r
中风的linecap：圆形;\r
}\r
DIV {\r
高度：100像素;\r
宽度：100像素;\r
颜色：绿色;\r
字体重量：大胆的;\r
文本对齐：中心;\r
行高：100像素;\r
} \r
＆LT; SVG视框=0 0 120 120＆GT;\r
＆LT;圈CX =55CY =55R =50级=实/＆GT;\r
＆LT; foreignObject X =5Y =10高度=100px的WIDTH =100px的＆GT;\r
＆LT; DIV＆GT; 100℃/ DIV＆GT;\r
＆LT; / foreignObject＆GT;\r
＆LT; / SVG＆GT;\r
\r
＆LT; SVG视框=0 0 120 120＆GT;\r
＆LT;圈CX =55CY =55R =50级=虚线/＆GT;\r
＆LT; foreignObject X =5Y =10高度=100px的WIDTH =100px的＆GT;\r
＆LT; DIV＆GT; 100℃/ DIV＆GT;\r
＆LT; / foreignObject＆GT;\r
＆LT; / SVG＆GT;\r
\r
＆LT; SVG视框=0 0 120 120＆GT;\r
＆LT;圈CX =55CY =55R =50级=虚线/＆GT;\r
＆LT; foreignObject X =5Y =10高度=100px的WIDTH =100px的＆GT;\r
＆LT; DIV＆GT; 100℃/ DIV＆GT;\r
＆LT; / foreignObject＆GT;\r
＆LT; / SVG＆GT; \r
作为SVG 支持是在Chrome中的几乎所有版本，火狐，Safari，Opera和IE9 +。
使用了 foreignObject 来定位文本是一个，我发现更容易使用和风格，但它不能在IE浏览器。所以，你可以使用文本 SVG元素像下面的代码片段。
SVG {\r
高度：100像素;\r
宽度：100像素;\r
}\r
圈{\r
位置：相对;\r
补：透明;\r
行程：绿色;\r
笔画宽度：3;\r
}\r
。固体{\r
行程dasharray：无;\r
}\r
.dashed {\r
行程dasharray：8，8.5;\r
}\r
.dotted {\r
行程dasharray：0.1，12.5;\r
中风的linecap：圆形;\r
}\r
文字{\r
宽度：100像素;\r
文本锚：中等;\r
补：绿色;\r
字体重量：大胆的;\r
文本对齐：中心;\r
} \r
＆LT; SVG视框=0 0 120 120＆GT;\r
＆LT;圈CX =55CY =55R =50级=实/＆GT;\r
＆LT;文字X =55Y =60＆GT;\r
100\r
＆LT; /文字和GT;\r
＆LT; / SVG＆GT;\r
\r
＆LT; SVG视框=0 0 120 120＆GT;\r
＆LT;圈CX =55CY =55R =50级=虚线/＆GT;\r
＆LT;文字X =55Y =60＆GT;\r
100\r
＆LT; /文字和GT;\r
＆LT; / SVG＆GT;\r
\r
＆LT; SVG视框=0 0 120 120＆GT;\r
＆LT;圈CX =55CY =55R =50级=虚线/＆GT;\r
＆LT;文字X =55Y =60＆GT;\r
100\r
＆LT; /文字和GT;\r
＆LT; / SVG＆GT; \r
有关支持较低版本的IE，你可以看看像这个或引用<一href=\"http://stackoverflow.com/questions/6097179/cant-display-svg-charts-in-internet-explorer-8/6097246#6097246\">this SO回答。
这可以比其他使用CSS属性来完成边框还，但这些要么需要很多的箱阴影或伪元素，并不会是非常可取大圈。
使用伪元素的方式将需要CSS 变换，因此仍然不支持IE8或更低，无需使用其他库。
盒子阴影的方法虽然它有更好的浏览器的支持，是不是很可扩展性。下面是使用的box-shadow 办法创造虚线边框的示例代码段。这是改编<距离的Pragmatick的答案href=\"http://stackoverflow.com/questions/28693659/how-to-make-a-smooth-dashed-border-rotation-animation-like-marching-ants/\">this螺纹。
DIV {\r
位置：相对;\r
高度：100像素;\r
宽度：100像素;\r
保证金：10px的;\r
文本对齐：中心;\r
行高：100像素;\r
边界半径：50％;\r
}\r
.dotted {\r
的box-shadow：0像素-55px 0像素-48px蓝色，0像素55像素0像素-48px蓝色，55像素0像素0像素-48px蓝色，-55px 0像素0像素-48px蓝色，-39px -39px 0像素-48px蓝色，39px -39px 0像素-48px蓝色，-39px 39px 0像素-48px蓝色，39px 39px 0像素-48px蓝色，-22px -51px 0像素-48px蓝色，-51px的22px 0像素-48px蓝色，51px -22px 0像素-48px蓝色，-51px -22px 0像素-48px蓝， 51px的22px 0像素-48px蓝色的22px 51px 0像素-48px蓝色，-22px 51px 0像素-48px蓝色的22px -51px 0像素-48px蓝色;\r
} \r
＆LT; DIV CLASS =虚线＆GT;\r
100\r
＆LT; / DIV＆GT; \r
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:
IE example:
Has anyone ran into this issue and how to solve it?
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>
Support for SVG is available in almost all versions of Chrome, Firefox, Safari, Opera and IE9+.
The use of a foreignObject to position the text is the one that I found easier to use and style but it doesn't work in IE. So, you can use the text SVG element like in the below snippet.
svg{
height: 100px;
width: 100px;
}
circle {
position: relative;
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;
}
text {
width: 100px;
text-anchor: middle;
fill: green;
font-weight: bold;
text-align: center;
}
<svg viewBox="0 0 120 120">
<circle cx="55" cy="55" r="50" class="solid" />
<text x="55" y="60">
100
</text>
</svg>
<svg viewBox="0 0 120 120">
<circle cx="55" cy="55" r="50" class="dashed" />
<text x="55" y="60">
100
</text>
</svg>
<svg viewBox="0 0 120 120">
<circle cx="55" cy="55" r="50" class="dotted" />
<text x="55" y="60">
100
</text>
</svg>
For supporting lower versions of IE you could look at some libraries like this one or refer to this SO answer.
This can be done with CSS using properties other than border also but those would either require a lot of box-shadows or pseudo-elements and would not be very advisable for larger circles.
Using pseudo-elements approach would require CSS transform and hence would still not support IE8 or less without the use of other libraries.
The box-shadow approach though it has better browser support, is not very scalable. Below is a sample snippet for creating dotted borders using box-shadow approach. This was adapted from The Pragmatick's answer in this thread.
div {
position: relative;
height: 100px;
width: 100px;
margin: 10px;
text-align: center;
line-height: 100px;
border-radius: 50%;
}
.dotted {
box-shadow: 0px -55px 0px -48px blue, 0px 55px 0px -48px blue, 55px 0px 0px -48px blue, -55px 0px 0px -48px blue, -39px -39px 0px -48px blue, 39px -39px 0px -48px blue, -39px 39px 0px -48px blue, 39px 39px 0px -48px blue, -22px -51px 0px -48px blue, -51px 22px 0px -48px blue, 51px -22px 0px -48px blue, -51px -22px 0px -48px blue, 51px 22px 0px -48px blue, 22px 51px 0px -48px blue, -22px 51px 0px -48px blue, 22px -51px 0px -48px blue;
}
<div class="dotted">
100
</div>
这篇关于虚线/使用CSS虚线圆圈形状 - 不正确呈现在Chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
