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 (e.g. 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!

score 1 · Answer 1 · edited May 23 '17 at 12:24

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.

If you draw a full arc, it will be vanished (0 deg to 360 deg = none), so you have to draw it from (0 deg to [360-0.01] deg). — Soley, Nov 13 '15 at 09:03

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

1 Answers1