圆的

圆的

关注
发信
关注(28)粉丝(399)

html - 如何更改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;
    }
}

如何正确调整大小？

最佳答案

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>

关于html - 如何更改SVG圆的大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33064754/

10-09 14:37
Powered by LMLPHP ©2024 圆的 0.032052