1
エッジブラウザ内のsvgドーナツ内のテキストを正しく配置するにはどうすればよいですか。それ以外のブラウザはすべて正常に表示されます。IEエッジトランスフォームの問題
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;
}
プレゼンテーション属性（高さ、幅、位置合わせ）が償却され、ピクセルではなく％であるべきです。 style属性= style = "width：100％"でインラインsvg要素のheight属性とwidth属性を置き換えてください。 –
@RobParsonsここで、プレゼンテーション属性は廃止されました。彼らはまだ生きているようです（https://www.w3.org/TR/SVG2/styling.html#PresentationAttributes）。そして、 'width'と' height'のデフォルト値は '' 100％ ''です（https://www.w3.org/TR/SVG2/geometry.html#Sizing）。なぜそうなっているのですか？デフォルト値が '％'のときは 'px'ですか？ – Kaiido
@kaido https://wiki.whatwg.org/wiki/presentational_elements_and_attributes –