[英]Increasing the size of an SVG circle
我遇到了这个小提琴:
http://jsfiddle.net/wz32sy7y/1/
我很难理解如何扩展圆以获得更大的半径。
我尝试更改半径属性r
,但这会使动画失去同步。
半径似乎是一些神奇的数字,但我无法确定它是如何计算的。
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle" class="circle_animation" r="79.85699"
cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
</g>
</svg>
对于给定的半径r ,圆的周长为2πr 。
由于四舍五入,此小提琴中的值略有偏差,但您可以通过设置半径和周长的新值来验证关系是否成立。
小提琴中有三个位置使用圆周。 进入JavaScript之后:
var initialOffset = '440';
CSS中两次:
.circle_animation {
stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
stroke-dashoffset: 440;
transition: all 1s linear;
}
这是小提琴的一个版本,其中半径设置为20,周长为2π×20 = 125.664:
http://jsfiddle.net/6x3rbpfu/1/
这里我们将半径设置为50,将半径设置为314.159:
以下小提琴将允许您使用标记和“r”属性任意设置宽度,而不是每次都更改CSS。 尝试将SVG中“r”属性中的值更改为您喜欢的任何值。
https://jsfiddle.net/ma46yjvx/1/
SVG中的虚线偏移动画通过使用SVG的虚线轮廓特征制作一个非常长的短划线,然后使用像素偏移沿着该路径爬行边界来工作。 它使它看起来像是绘图。
因此,当我们缩放半径时,我们需要缩放每个动画步骤偏移破折号的量。 因此,使用作者使用的相同幻数(dunno来自哪里,但它有效!),我们有:
var time = 10;
var initialOffset = '440';
var i = 1
var r = $(".circle_animation").attr("r"); //Get the radius, so we can know the multiplier
var interval = setInterval(function() {
$('.circle_animation').css(
'stroke-dashoffset',
initialOffset-(i*(initialOffset/time)*(r/69.85699)) //Scale it!
);
$('h2').text(i);
if (i == time) {
clearInterval(interval);
}
i++;
}, 1000);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.