How to change the “starting point” of the stroke-dasharray in a SVG image?

Question

I want to animate a custom logo like a typical progress circle (eg for percentage). Therefore I created a circle with stroke and set a clip-path to the svg logo.

I'm nearly done, but i need to change the starting point of the stroke animation from left (see code) to top - or next to the arrow. So that the progress start at one of the arrows. Different values for stroke-dasharray and stroke-dashoffset won't work.

<html>
<head>
    <title></title>
  <style type="text/css">
  path.progress-logo {
    stroke-dasharray: 204.243;
    stroke-dashoffset: 122.763;
  }
</style>
</head>
<body>
<svg id="svg2">

<path fill="#E2E2E1" d="M100,39.414L81.975,21.982L63.89,39.414h9.86v30.97H17.164V23.659h42.563l-0.033,11.304l18.028-17.729
  L59.799-0.28l-0.031,10.737H18.281c-7.164,0-12.001,1.232-14.512,3.702C1.257,16.627,0,21.212,0,27.917v38.904
  c0,6.752,1.257,11.35,3.768,13.794c2.511,2.443,7.348,3.665,14.512,3.665h54.283c7.165,0,12.003-1.222,14.514-3.665
  c2.511-2.444,3.769-7.042,3.769-13.794V39.414H100z"/>

  <defs>
    <clipPath id="cut-off-bottom">
<path fill="#E2E2E1" d="M100,39.414L81.975,21.982L63.89,39.414h9.86v30.97H17.164V23.659h42.563l-0.033,11.304l18.028-17.729
  L59.799-0.28l-0.031,10.737H18.281c-7.164,0-12.001,1.232-14.512,3.702C1.257,16.627,0,21.212,0,27.917v38.904
  c0,6.752,1.257,11.35,3.768,13.794c2.511,2.443,7.348,3.665,14.512,3.665h54.283c7.165,0,12.003-1.222,14.514-3.665
  c2.511-2.444,3.769-7.042,3.769-13.794V39.414H100z"/>
    </clipPath>
  </defs>
  <path class="progress-logo" d="m0.66666,46.55556c0,-22.98956 18.62155,-41.61111 41.61111,-41.61111c22.98957,0 41.61111,18.62155 41.61111,41.61111c0,22.98956 -18.62154,41.61111 -41.61111,41.61111c-22.98956,0 -41.61111,-18.62155 -41.61111,-41.61111z" clip-path="url(#cut-off-bottom)" stroke-width="40" fill="none" stroke="#1ECD97"  />



</svg>

</body>
</html>

Here is my current code: http://jsfiddle.net/w5huatyf/

Thanks for your help!

Answer 1

Your answer is here:

http://jsfiddle.net/w5huatyf/2/

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

function describeArc(x, y, radius, startAngle, endAngle){

    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);

    var arcSweep = endAngle - startAngle <= 180 ? "0" : "1";

    var d = [
        "M", start.x, start.y, 
        "A", radius, radius, 0, arcSweep, 0, end.x, end.y,
        "L", x,y,
        "L", start.x, start.y
    ].join(" ");

    return d;       
}

var percent = 0;
var startValue = 43;
var endValue = 360+startValue-0.01;
function count(){
    if(percent < startValue)
    percent = startValue;
    else
        percent++;
    if(percent > endValue)
        percent = endValue;
    document.getElementById("arc1").setAttribute("d", describeArc(50, 50, 60, startValue, percent)); 
   document.getElementById("vals").innerHTML = percent + ' Degree';
    if(percent < endValue)
    window.setTimeout(function() {  count(); }, 30);
}

window.setTimeout(function() {  count( ); }, 30);

count(0,359);

It is a simple timer that replace the arc value every time using a timer.

I used some of other answers. Here are some:

Timer: https://stackoverflow.com/a/33676171/2655623 (I answered myself)

Draw pie: https://stackoverflow.com/a/24569190/2655623 (The result didn't work for me, but the functions were useful)

If you need help to explain the code, please let me know.

How to change the “starting point” of the stroke-dasharray in a SVG image?

Question

1 answers

solution1
1 2015-11-13 09:01:20

How to change the “starting point” of the stroke-dasharray in a SVG image?

Question

1 answers

solution1 1 2015-11-13 09:01:20

solution1
1 2015-11-13 09:01:20