iPad的 - 從桌面

Question

反轉SVG的顏色來看看下面的兩張圖片：

桌面：

的iPad：

通知顏色外圈？他們爲什麼倒在iPad上？

.statistic-container { 
 
    display: inline-block; 
 
    position: relative; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    max-width: 326px; 
 
    margin-bottom: 20px; 
 
} 
 
.statistic-container:before { 
 
    content: ''; 
 
    padding-bottom: 100%; 
 
    display: block; 
 
} 
 
.statistic-container svg { 
 
    fill: transparent; 
 
    display: inline-block; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    transform: rotate(270deg); 
 
} 
 
.statistic-container__outer-circle { 
 
    stroke: #385fd1; 
 
    stroke-width: 16; 
 
    stroke-dasharray: 1607; 
 
    stroke-dashoffset: -530; 
 
} 
 
.statistic-container__inner-circle { 
 
    stroke: #02158b; 
 
    stroke-width: 16; 
 
    stroke-dasharray: 1607; 
 
}

<div class="statistic-wrapper"> 
 
    <div class="statistic-container"> 
 
    <svg viewBox="0 0 500 500"> 
 
     <circle cx="250" cy="250" r="242" class="statistic-container__inner-circle"></circle> 
 
     <circle cx="250" cy="250" r="242" class="statistic-container__outer-circle"></circle> 
 
    </svg> 
 
    </div> 
 
</div>

Answer 1

謝謝Paulie_D的小費。

當你在stroke-dashoffset上使用負值時，它看起來像ipad不能很好地發揮作用。

下面固定我的問題：

.statistic-container__outer-circle { 
    stroke: #385fd1; 
    stroke-width: 16; 
    stroke-dasharray: 1607; 
} 

.statistic-container__inner-circle { 
    stroke: #02158b; 
    stroke-width: 16; 
    stroke-dasharray: 1607; 
    stroke-dashoffset: 1077; 
} 

我除去負從外圓偏移並增加了一個正的內圓偏移。