iPad - 从桌面反转的 SVG 颜色

Posted 2023-03-12

【中文标题】iPad - 从桌面反转的 SVG 颜色

【英文标题】：iPad - SVG colors inverted from desktop

【发布时间】：2016-08-11 14:26:54

【问题描述】：

看看下面的两张图片：

桌面：

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>

【问题讨论】：

看起来像是 dashoffset 或转换的问题...您是否尝试过调整它并查看问题是否仍然存在。

【参考方案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;

我去掉了外圆的负偏移量，在内圆上加了一个正偏移量。