SVG Circle Progress / SVG rem ios 이슈

* SVG  Circle  작업 시 rem 단위 경우 ios 사파리 에서 적용 안됨. rem 단위를 px로 변경하면 정상 작동됩니다.

 

HTML

<div class="circle-wrap">
  <div class="circle-progress">
    <svg viewBox="0 0 54 54" data-per="100">
      <defs>
        <linearGradient id="MyGradient">
          <stop offset="5%" stop-color="#6B95FF" />
          <stop offset="95%" stop-color="#6352FF" />
        </linearGradient>
      </defs>
      <circle cx="27" cy="27" r="24" stroke="#e1e5ec" />
      <circle
        cx="27"
        cy="27"
        r="24"
        stroke="url(#MyGradient)"
        class="progress-ring"
      />
    </svg>
    <p class="circle-num">1</p>
  </div>

  <div class="circle-progress">
    <svg viewBox="0 0 54 54" data-per="100">
      <circle cx="27" cy="27" r="24" stroke="#e1e5ec" />
      <circle
        cx="27"
        cy="27"
        r="24"
        stroke="url(#MyGradient)"
        class="progress-ring"
      />
    </svg>
    <p class="circle-num">2</p>
  </div>
</div>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

 

CSS

.circle-wrap {
  display: flex;
  justify-content: center;
}
.circle-wrap .circle-progress {
  position: relative;
  width: 3.375rem;
  height: 3.375rem;
}
.circle-wrap .circle-progress:nth-child(n+2) {
  margin-left: 0.375rem;
}
.circle-wrap .circle-progress svg {
  width: 3.375rem;
  height: 3.375rem;
  transform: rotate(-90deg) scaleX(-1);
  overflow: initial;
}
.circle-wrap .circle-progress svg.progress-zero + .circle-num {
  color: #a1a6af;
}
.circle-wrap .circle-progress circle {
  stroke-width: 0.375rem;
  fill: none;
}
.circle-wrap .circle-progress circle.progress-ring {
  transform-origin: center;
  transform: rotate(180deg);
  stroke-dasharray: 150.72px;
  stroke-dashoffset: 0;
}
.circle-wrap .circle-progress .circle-num {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.0625rem;
  letter-spacing: -0.02125rem;
  font-weight: 700;
  color: #4130df;
}

 

JS

$( document ).ready( function() {
  $(".circle-progress").each(function () {
    var perCircle = $(this).find("svg").attr("data-per");
    var circleR = $(this).find("circle").attr("r");
    var circleSize = 2 * 3.14 * circleR;
    var calcPer = circleSize * ((100 - perCircle) / 100);
    $(this)
      .find(".progress-ring")
      .css("stroke-dashoffset", calcPer + "px");
    if (calcPer >= circleSize) {
      $(this).children("svg").addClass("progress-zero");
    }
  });
});

 

코드확인

https://codepen.io/csvhixfk-the-scripter/pen/eYXKJOq

 

참고

https://codepen.io/JMChristensen/pen/AGbeEy