How do I change the "starting point" of a barcode dashar in an SVG image?
I want to animate a custom logo like a normal progress circle (for a percentage, for example). So I created a circle with a stroke and set the clip path to the svg logo.
I'm almost ready, but I need to change the start point of the move animation to the left (see code) at the top or next to the arrow. So that progress starts from one of the arrows. Different values for dash-dasharray and stroke-dashoffset will not 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/
Thank you for your help!
source to share
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 replaces the arc value each time the timer is used.
I've used some of the other answers. Here are some of them:
Timer: fooobar.com/questions/2155236 / ... (I answered myself)
Draw pie: fooobar.com/questions/45461 / ... (the result didn't work for me, but the functions were helpful)
If you need help explaining the code, please let me know.
source to share