如何改变SVG圈的大小

时间：2015-10-11 12:05:09

标签： html css svg

我想从here调整我的第一个SVG圈子，所以我做了第二个，但是动画中存在问题，动画不一样。

HTML：

<div class="loader">
    <svg class="circular">
        <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="8" stroke-miterlimit="10" />
    </svg>
</div>


<div style="margin-top: 50px;" class="loader">
    <svg class="circular">
        <circle class="path" cx="50" cy="50" r="44" fill="none" stroke-width="8" stroke-miterlimit="10" />
    </svg>
</div>

CSS：

body, svg, circle {
    margin: 0px !important;
    padding: 0px !important;
}
.loader {
    position: relative;
    margin: 0px auto;
    padding: 0px;
    width: 100px;
    height: 100px;
    zoom: 1;
    background-color: grey;
}
.circular {
    -webkit-animation: rotate 3s linear infinite;
    animation: rotate 3s linear infinite;
    height: 100px;
    position: relative;
    width: 100px;
}
.path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
}
@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124;
    }
}
@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124;
    }
}
@-webkit-keyframes color {
    100%, 0% {
        stroke: #d62d20;
    }
    40% {
        stroke: #0057e7;
    }
    66% {
        stroke: #008744;
    }
    80%, 90% {
        stroke: #ffa700;
    }
}
@keyframes color {
    100%, 0% {
        stroke: #d62d20;
    }
    40% {
        stroke: #0057e7;
    }
    66% {
        stroke: #008744;
    }
    80%, 90% {
        stroke: #ffa700;
    }
}

如何正确调整大小？

1 个答案:

答案 0 :(得分：3)

stroke-dasharray元素的circle属性确定笔划短划线的长度和两个短划线之间的间距，而stroke-dashoffset确定笔划短划线开始的偏移量。在@keyframes规则中，这些属性正在被修改，从而最终产生动画效果。当圆的半径（以及圆周）发生变化时，这些属性（在keyframes中设置）也必须与半径成比例地修改。

由于设置取决于圆的半径，我认为您不能为两个圆保持相同的动画（@keyframe）设置。任何时候只有其中一个可以正常工作。

在下面的代码片段中，我完成了使更大的圆圈工作所需的更改。

body,
svg,
circle {
  margin: 0px !important;
  padding: 0px !important;
}
.loader {
  position: relative;
  margin: 0px auto;
  padding: 0px;
  width: 100px;
  height: 100px;
  zoom: 1;
  background-color: grey;
}
.circular {
  -webkit-animation: rotate 3s linear infinite;
  animation: rotate 3s linear infinite;
  height: 100px;
  position: relative;
  width: 100px;
}
.path {
  stroke-dasharray: 1, 440;
  stroke-dashoffset: 0;
  -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}
@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1, 440;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 440;
    stroke-dashoffset: -77;
  }
  100% {
    stroke-dasharray: 89, 440;
    stroke-dashoffset: -272;
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 440;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 440;
    stroke-dashoffset: -77;
  }
  100% {
    stroke-dasharray: 89, 440;
    stroke-dashoffset: -272;
  }
}
@-webkit-keyframes color {
  100%, 0% {
    stroke: #d62d20;
  }
  40% {
    stroke: #0057e7;
  }
  66% {
    stroke: #008744;
  }
  80%,
  90% {
    stroke: #ffa700;
  }
}
@keyframes color {
  100%, 0% {
    stroke: #d62d20;
  }
  40% {
    stroke: #0057e7;
  }
  66% {
    stroke: #008744;
  }
  80%,
  90% {
    stroke: #ffa700;
  }
}
<div style="margin-top: 50px;" class="loader">
  <svg class="circular">
    <circle class="path" cx="50" cy="50" r="44" fill="none" stroke-width="8" stroke-miterlimit="10" />
  </svg>
</div>

或者，如果您希望同时为两个圈子设置相同的动画（@keyframe）设置，那么您可以考虑使用transform: scale创建更大的圈而不是手动修改圆的半径。 （但正如你所看到的，输出与修改半径并不完全相同，因此我不会真的推荐这个）。

body,
svg,
circle {
  margin: 0px !important;
  padding: 0px !important;
}
.loader {
  position: relative;
  margin: 0px auto;
  padding: 0px;
  width: 100px;
  height: 100px;
  zoom: 1;
  background-color: grey;
}
.circular {
  -webkit-animation: rotate 3s linear infinite;
  animation: rotate 3s linear infinite;
  height: 100px;
  position: relative;
  width: 100px;
}
.path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}
@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}
@-webkit-keyframes color {
  100%, 0% {
    stroke: #d62d20;
  }
  40% {
    stroke: #0057e7;
  }
  66% {
    stroke: #008744;
  }
  80%,
  90% {
    stroke: #ffa700;
  }
}
@keyframes color {
  100%, 0% {
    stroke: #d62d20;
  }
  40% {
    stroke: #0057e7;
  }
  66% {
    stroke: #008744;
  }
  80%,
  90% {
    stroke: #ffa700;
  }
}
.loader2 {
  transform: scale(2.2);
}
<div class="loader">
  <svg class="circular">
    <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="8" stroke-miterlimit="10" />
  </svg>
</div>


<div style="margin-top: 100px;" class="loader loader2">
  <svg class="circular">
    <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="8" stroke-miterlimit="10" />
  </svg>
</div>

相关问题
最新问题