主页 / 问题 / 1023436
Accepted
Дмытрык
Asked:2020-09-11 18:53:45 +0000 UTC2020-09-11 18:53:45 +0000 UTC

为 stroke-dasharray 属性指定圆的周长

  • 772

圆形百分比进度条 在这个问题的答案中，有这样的代码：

<svg id="svg" viewbox="0 0 100 100">
  <circle cx="50" cy="50" r="45" fill="#FDB900"/>
  <path fill="none" stroke-linecap="round" stroke-width="5" stroke="#fff"
        stroke-dasharray="1,250.2"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80"/>
  <text x="50" y="50" text-anchor="middle" dy="7" font-size="20">1%</text>
</svg>

<svg viewbox="0 0 100 100">
  <circle cx="50" cy="50" r="45" fill="#FDB900"/>
  <path fill="none" stroke-linecap="round" stroke-width="5" stroke="#fff"
        stroke-dasharray="125.6,125.6"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80"/>
  <text x="50" y="50" text-anchor="middle" dy="7" font-size="20">50%</text>
</svg>

如您所见，有 2 个相同的 svg 元素具有pathc 属性stroke-dasharray。在第一种情况下，属性的值为1,250.2，在第二种情况下，为125.6,125.6。此属性中的第二个值是周长。根据我的计算，周长应该是 282.74... ( r="45" * 2 * пи)，但是，在代码中，它是完全不同的。

问题：为什么两个相同的 svg 的周长不同？
是什么影响了它的意义？
如何正确计算？

javascript

1 个回答

  1. Best Answer

    为什么两个相同的 svg 的周长不同？是什么影响了它的意义？如何正确计算？

    正如@StrangerintheQ 在评论中回答的那样，这个例子中圆的半径是40这个半径值，圆的总长度是 -40*2*3.14=251.2

    • 第一段代码显示了一个等于总长度百分之一的圆段。

      stroke-dasharray="1,250.2"，其中破折号的长度 -1空间250.2总计相等，它将是圆的整个长度 -251.2 

    <svg id="svg" width="25%" height="25%" viewbox="0 0 100 100">
  <circle cx="50" cy="50" r="45" fill="#FDB900"/>
  <path fill="none" stroke-linecap="round" stroke-width="5" stroke="#fff"
        stroke-dasharray="1,250.2"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80"/>
  <text x="50" y="50" text-anchor="middle" dy="7" font-size="20">1%</text>
</svg>

    • 第二段代码显示了一个等于总长度一半的圆段，即50%

    stroke-dasharray="125.6,125.6"，其中破折号的长度 -125.6空间125.6总计相等，它将是圆的整个长度 -251.2 

    <svg width="50%" height="50%" viewbox="0 0 100 100">
  <circle cx="50" cy="50" r="45" fill="#FDB900"/>
  <path fill="none" stroke-linecap="round" stroke-width="5" stroke="#fff"
        stroke-dasharray="125.6,125.6"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80"/>
  <text x="50" y="50" text-anchor="middle" dy="7" font-size="20">50%</text>
</svg>

    进度条的动画

    与 SMIL

    对于动画，我们需要将线的长度分别从零增加到最大值，251.2
    间隙会从最大值减小251.2到0 

    <animate attributeName="stroke-dasharray" from ="0, 251.2" to = "251, 0" dur="4s" 
repeatCount="indefinite" />


    <svg id="svg" width="25%" height="25%" viewbox="0 0 100 100">
  <circle cx="50" cy="50" r="45" fill="#FDB900"/>
  <path fill="none" stroke-linecap="round" stroke-width="5" stroke="#fff"
        stroke-dasharray="0,251.2"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80">
     <animate attributeName="stroke-dasharray" from ="0, 251.2" to = "251, 0" dur="4s" repeatCount="indefinite" />
   </path>		   
  
</svg>

    用JS

    动画机制与使用 SMIL 时相同 - 将笔画长度从零增加到最大值251.2 

    progress.attr({strokeDasharray: '0, 251.2'});
Snap.animate(0,251.2, function( value ) {
    progress.attr({ 'stroke-dasharray':value+',251.2'});
}, 5000);


    var count = $(('#count'));
$({ Counter: 0 }).animate({ Counter: count.text() }, {
  duration: 5000,
  easing: 'linear',
  step: function () {
    count.text(Math.ceil(this.Counter)+ "%");
  }
});

var s = Snap('#animated');
var progress = s.select('#progress');

progress.attr({strokeDasharray: '0, 251.2'});
Snap.animate(0,251.2, function( value ) {
    progress.attr({ 'stroke-dasharray':value+',251.2'});
}, 5000);
    body{text-align:center;font-family:sans-serif;}
svg{width:30%;}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<svg id="animated" viewbox="0 0 100 100">
  <circle cx="50" cy="50" r="45" fill="#FDB900"/>
  <path id="progress" stroke-linecap="round" stroke-width="5" stroke="#fff" fill="none"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80">
  </path>
  <text id="count" x="50" y="50" text-anchor="middle" dy="7" font-size="20">100%</text>
</svg>

    JS示例取自提问者引用的话题

    • 2

相关问题