CSS SVG Animation Offset / Проблема с массивом - PullRequest
Новая
       38

CSS SVG Animation Offset / Проблема с массивом

0 голосов
/ 12 июня 2019

Я создал анимацию, и мне нужно еще 3 вещи, чтобы она работала правильно.

  1. Мне нужно, чтобы заливка шла против часовой стрелки, а не по часовой стрелке.
  2. Мне нужно, чтобы начать в определенной точке на круге
  3. В некоторых случаях я захочу сделать так, чтобы он занимал только часть круга, а не полный круг.

Код здесь: https://codepen.io/laura-conde/pen/qzEZLL

<svg viewBox="0 0 705.88 705.88" >
 <circle class="white_circle_land" cx="352.94" cy="352.94" r="272.94"  />
  <circle class="_magenta50To100Image" cx="352.94" cy="352.94" r="272.94"  />
</svg>


<style>
._magenta50To100Image {
  fill: none;
  stroke: #E92D87;
  stroke-width: 135;
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
  animation: magenta 2s linear;
  animation-fill-mode: forwards;
}

.white_circle_land {
  fill: none;
  stroke: #000000;
  stroke-width: 149;
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
  animation: magenta 2s linear;
  animation-fill-mode: forwards;
}

@keyframes magenta {
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
</style>
...