iPad - 从桌面反转的 SVG 颜色答案

【问题标题】：iPad - SVG colors inverted from desktopiPad - 从桌面反转的 SVG 颜色
【发布时间】：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 或转换的问题...您是否尝试过调整它并查看问题是否仍然存在。

标签： ios css ipad svg

【解决方案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;
}

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

【讨论】：