[英]IE & Firefox rendering incorrectly but not in Chrome, Safari & Chromium browsers
All, 所有,
There is a double walled circle and a text. 有一个双壁圆圈和一个文本。 Ideally the text should be rendered within the circle but in IE & Firefox , the circle is coming down and the text on the top. 理想情况下,文本应显示在圆圈内,但在IE&Firefox中,圆圈向下,文本在顶部。 The issue can be seen using the below code. 使用以下代码可以看到该问题。
Any help or advice on how to get it fixed in IE & firefox is much appreciated. 非常感谢任何有关如何在IE和firefox中进行修复的帮助或建议。
<div class="col-xs-4 col-sm-2"> <div style="margin-top: 20px; position: relative; display: inline-block; max-width: 116px; max-height: 116px;"> <svg width="100%" height="100%" viewBox="0 0 418 418" tabindex="-1"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-31.000000, -31.000000)" stroke="#9B9B9B" stroke-width="2" fill="#FFFFFF"> <g transform="translate(32, 32)"> <path d="M208,416 C322.875228,416 416,322.875228 416,208 C416,93.124772 322.875228,0 208,0 C93.124772,0 -9.09494702e-13,93.124772 -9.09494702e-13,208 C-9.09494702e-13,322.875228 93.124772,416 208,416 Z"></path> <path d="M208,398.666667 C313.302292,398.666667 398.666667,313.302292 398.666667,208 C398.666667,102.697708 313.302292,17.3333333 208,17.3333333 C102.697708,17.3333333 17.3333333,102.697708 17.3333333,208 C17.3333333,313.302292 102.697708,398.666667 208,398.666667 Z"></path> </g></g></g> </svg> <span style="font-size: 24px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">400</span> </div> </div>
The styling you have added to the divs pushes the number outside of the SVG. 您添加到div中的样式会将数字推到SVG之外。 I would just avoid the problem in the first place by using an SVG <text>
element that you can position inside the svg. 我只是首先使用可以放置在svg内的SVG <text>
元素来避免该问题。
You might have to fiddle with the x and y values a bit. 您可能不得不摆弄x和y值。
ps: There's also a <circle>
element you could use instead of a <path>
. ps:还有一个<circle>
元素可以代替<path>
。
<svg width="100%" height="100%" viewBox="0 0 418 418" tabindex="-1"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-31.000000, -31.000000)" stroke="#9B9B9B" stroke-width="2" fill="#FFFFFF"> <g transform="translate(32, 32)"> <path d="M208,416 C322.875228,416 416,322.875228 416,208 C416,93.124772 322.875228,0 208,0 C93.124772,0 -9.09494702e-13,93.124772 -9.09494702e-13,208 C-9.09494702e-13,322.875228 93.124772,416 208,416 Z"></path> <path d="M208,398.666667 C313.302292,398.666667 398.666667,313.302292 398.666667,208 C398.666667,102.697708 313.302292,17.3333333 208,17.3333333 C102.697708,17.3333333 17.3333333,102.697708 17.3333333,208 C17.3333333,313.302292 102.697708,398.666667 208,398.666667 Z"></path> </g> </g> </g> <text x="47%" y="49%" style="font-size: 32px;">400</text> </svg>
I don't know what are your constraints, but to render these circles in particular I'd play with border-radius: 50%
and display: flex
: 我不知道您的约束是什么,但是要特别渲染这些圆,我将使用border-radius: 50%
和display: flex
:
.circle { border: 2px solid #888; border-radius: 50%; /* make the border a circle */ display: flex; /* align the content vertically and horizontally */ align-items: center; /* same */ justify-content: space-around; /* same */ }
<div class="circle" style="width: 100px; height: 100px;"> <div class="circle" style="width: 90px; height: 90px;"> 400 </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.