IE 가장자리 변형 문제

가장자리 브라우저에서 svg 도넛 내부의 텍스트를 올바르게 정렬하려면 어떻게해야합니까? 다른 모든 브라우저는 잘 표시합니다.IE 가장자리 변형 문제

<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; 
}

출처

2017-12-15 Mike

프레젠테이션 (높이, 폭, 정렬)이 하락되며, PX하지 %이어야 특성. 스타일 속성 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 –

<svg xmlns="http://www.w3.org/2000/svg" class="donut" role="img" viewBox="0 0 42 42" style="width:100%">

출처

2017-12-21 07:12:05

답변

관련 문제