如何正确对齐边缘浏览器中svg甜甜圈内的文本。所有其他浏览器都显示得很好。
https://codepen.io/anon/pen/gopVwr
<figure class="vendor-donut">
<div class="figure-content">
<svg xmlns="http://www.w3.org/2000/svg" class="donut" role="img" viewBox="0 0 42 42" width="100%" height="100%">
<circle class="donut-ring" role="presentation" fill="transparent" stroke="#f00" stroke-width="3" cx="21" cy="21" r="15.9155" />
<circle class="donut-segment" fill="transparent" stroke="#140" stroke-dasharray="100, 0" stroke-dashoffset="0" stroke-width="3" cx="21" cy="21" r="15.9155" />
<g class="chart-text">
<text class="chart-number" x="50%" y="50%">50</text>
<text class="chart-label" x="50%" y="50%">out of 100</text>
</g>
</svg>
</div>
</figure>
CSS
.vendor-donut {width:400px}
.vendor-donut .chart-text {
-moz-transform: translateY(0.25em);
-ms-transform: translateY(0.25em);
-webkit-transform: translateY(0.25em);
transform: translateY(0.25em);
}
.vendor-donut .chart-number {
font-size: 0.6em;
line-height: 1;
text-anchor: middle;
-moz-transform: translateY(-0.25em);
-ms-transform: translateY(-0.25em);
-webkit-transform: translateY(-0.25em);
transform: translateY(-0.25em);
}
.vendor-donut .chart-label {
font-size: 0.2em;
text-anchor: middle;
-moz-transform: translateY(0.5em);
-ms-transform: translateY(0.5em);
-webkit-transform: translateY(0.5em);
transform: translateY(0.5em);
}
.vendor-donut .figure-content
{
flex: 1;
padding-left: 15px;
padding-right: 15px;
align-self: center;
}
.vendor-donut .figure-content svg {
height: auto;
}
答案 0 :(得分:0)
<svg xmlns="http://www.w3.org/2000/svg" class="donut" role="img" viewBox="0 0 42 42" style="width:100%">