[英]How to change size of SVG circle
I want to resize my first SVG circle from here , so I made the second, but there is a problem in the animation, the animation is not the same. 我想从此处调整第一个SVG圆圈的大小,所以我制作了第二个SVG圆圈,但是动画存在问题,动画不一样。
HTML: 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: 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;
}
}
How to properly resize it? 如何正确调整大小?
The stroke-dasharray
property of the circle
element determine the length of the stroke's dash and the space between two dashes whereas the stroke-dashoffset
determines the offset at which the stroke's dash starts. circle
元素的stroke-dasharray
属性确定笔划的虚线的长度和两个虚线之间的间隔,而stroke-dashoffset
确定笔划的虚线开始的偏移量。 Within the @keyframes
rules these properties are getting modified and thus ends up producing the animation effect. 在
@keyframes
规则内,这些属性被修改,因此最终产生了动画效果。 When the circle's radius (and thus the circumference) is changed, these properties (set within the keyframes
) also have to modified in proportion to the radius. 当圆的半径(以及圆周)改变时,这些属性(在
keyframes
设置)也必须与半径成比例地修改。
Since the settings depend on the radius of the circle, I don't think you can keep the same animation ( @keyframe
) settings for both circles. 由于设置取决于圆的半径,因此我认为您不能为两个圆保留相同的动画(
@keyframe
)设置。 At any time only one of them can work properly. 在任何时候,它们中只有一个可以正常工作。
In the below snippet I have done the changes that are required to make the bigger circle work. 在下面的代码段中,我完成了使较大的圆圈生效所需的更改。
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>
Alternately, if you wish to make the same animation ( @keyframe
) settings work for both the circles at the same time, then you could consider using a transform: scale
to create the bigger circle instead of manually modifying the radius of the circle. 或者,如果希望使两个圆都同时使用相同的动画(
@keyframe
)设置,则可以考虑使用transform: scale
来创建更大的圆,而不是手动修改圆的半径。 ( But as you can see, the output is not exactly same as modifying the radius and hence I wouldn't really recommend this ). ( 但是,正如您所看到的,输出与修改半径并不完全相同,因此我不推荐这样做 )。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.