[英]How to change the “starting point” of the stroke-dasharray in a SVG image?
我想為自定義徽標設置動畫,例如典型的進度圈(例如百分比)。 因此,我創建了一個帶有筆划的圓圈,並設置了一個到svg徽標的剪輯路徑。
我差不多完成了,但我需要將筆畫動畫的起點從左邊(見代碼)改為頂部 - 或者在箭頭旁邊。 因此,進展從其中一個箭頭開始。 stroke-dasharray和stroke-dashoffset的不同值不起作用。
<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>
這是我目前的代碼: http : //jsfiddle.net/w5huatyf/
謝謝你的幫助!
你的答案在這里:
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);
它是一個簡單的計時器,每次使用計時器替換弧值。
我使用了其他一些答案。 這里有一些:
計時器: https : //stackoverflow.com/a/33676171/2655623 (我自己回答)
畫餅: https : //stackoverflow.com/a/24569190/2655623 (結果對我不起作用,但功能很有用)
如果您需要幫助來解釋代碼,請告訴我。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.