SVG路徑曲線在相反方向上動畫

我在adobe illustrator中創建了一個svg並使用了它生成的代碼。我正在嘗試使svg圖形動起來。我的SVG元素：SVG路徑曲線在相反方向上動畫

<svg width="100px" height="100px"> 
    <path fill="none" d="M5,60c0-24.873,20.127-45,45-45" /> 
    <path fill="none" d="M95,60c0-24.873-20.127-45-45-45" /> 
</svg>

第一條曲線以順時針方向的動畫，我要爲這是在反時針方向動畫第二曲線相同。您可以在問題結尾處看到演示代碼片段。

請解釋我如何在順時針方向上動畫第二條路徑。另外請解釋一下你是否可以得到兩條路徑的曲線數據。由於

svg { 
 
    width: 300px; 
 
} 
 
svg path { 
 
    fill-opacity: 0; 
 
    stroke: #50514F; 
 
    stroke-width: 5; 
 
    stroke-dasharray: 870; 
 
    stroke-dashoffset: 870; 
 
    animation: draw 10s infinite linear; 
 
} 
 
@keyframes draw { 
 
    to { 
 
    stroke-dashoffset: 0; 
 
    } 
 
}

<svg width="100px" height="100px"> 
 
    <path fill="none" d="M5,60c0-24.873,20.127-45,45-45" /> 
 
    <path fill="none" d="M95,60c0-24.873-20.127-45-45-45" /> 
 
</svg>

來源

2016-09-21 Waqas Ibrahim

要更改動畫的方向，您需要更改指定曲線點的方向。目前，您將移動到3點並向12繪製曲線。如果使用我們的svg編輯器選擇路徑，而不是路徑命令：'M95,60c0-24.873-20.127-45-45-45'，我們以這些命令結束：'m 50,15 c 24.873,0 45,20.127 45,45'。如果我們從9點鐘到3點鐘繪製CCW 1/2圈，我們得到如下內容：'M 4.6428572,100.21932 C 4.6428572,80.243545 26.088068,60.94722 50,60.576463 79.088033,60.805598 95.357143,81.911631 95.357143,100.21932' – enhzflep

@enhzflep謝謝，我用插畫畫出了一條從12到3的弧線，我得到了這個 '' 請您介紹一下曲線數據，每個數值的含義是什麼？謝謝 –

不用擔心隊友。當然，你可以在這裏看到所有SVG格式的語法：https：//www.w3.org/TR/SVG2/paths.html#PathDataCubicBezierCommands（他們解釋得比我想象的要好得多） – enhzflep

第二條路徑在逆時針的方式開始爲出發點，在終點的正確定義point.And爲什麼要用複雜的三次貝塞爾曲線，當您的要求僅僅是一個圓弧？可以使用橢圓曲線，對於這實在是太簡單易用和handle.Change這兩者你定義了這兩個路徑definations的路徑，你會實現你想要的：

<path fill="none" d="M5,60 A50,50 0 0,1 55,10" /> 
<path fill="none" d="M55,10 A50,50 0 0,1 105,60"/>

的座標旁邊M是您的出發點。值旁邊A分別表示您的橢圓曲線的水平和垂直半徑（兩者將與您想要的圓形曲線相同）。之後的那個表示你想要旋轉你的橢圓的角度。之後，你必須提供由逗號分隔兩個標誌。第一標誌表示是否要採取最短（）或起始之間的最長（）路徑和結束百分點。第二標誌表示是否要採取開始點和結束點之間的逆時針（）路徑或順時針（）路徑（您可以更改兩個標誌以查看更改）。最後一個座標是你的終點，第一個路徑是55,10，第二個是105,60。

來源

2017-07-29 05:18:29

SVG路徑曲線在相反方向上動畫

回答

相關問題