動畫SVG對象遵循不同的路徑，而不是給定相同路徑的繪圖

Question

我遇到了一個我似乎無法解釋的奇怪的情況。我創建了一個SVG文件（見下文），帶有一個動畫圓圈和兩個路徑。

動畫圓圈已被賦予一條路徑，而黑色曲線已被賦予相同的路徑。在大多數情況下，這些工作如預期的那樣，圓形沿着直線到達曲線的最後部分（在Inkscape中創建的路徑）。

在最後一條曲線處，圓圈大大偏離了路徑，並且跟隨着紅色曲線（我從看着圓圈的位置開始抽身了）。我一直在考慮這一點，我已經把它傳遞給了幾個人，我們都空了！它似乎在Chrome和Firefox中都顯示相同的行爲。

<?xml version='1.0' ?> 
<svg id="bg" width="640" height="480" viewBox="0 0 640 480"  xmlns="http://www.w3.org/2000/svg"> 
<!-- 0.3120145,28.545527 --> 
    <circle cx="0" cy="28" r="10" fill="red" > 
     <animateMotion attributeName="transform" type="translate" path="M 0,0 
     c 208.4152955,0 434.8417755,7.528088 526.1842855,11.292119  91.34251,3.764044 61.75268,101.629084 46.31451,116.685274 
      -15.43817,15.05615 -348.64533,0 -464.4316,0 -51.970376,0  -69.396244,-17.08125 -87.777293,15.80389 
     C -0.1965619,209.53694 501.31249,229.91057 504.89916,3.6862537" begin="0s"  dur="10s" fill="freeze"/> 
    </circle> 
<path d="M 0.3120145,28.545527 
     c 208.4152955,0 
      434.8417755,7.528088 
       526.1842855,11.292119 
      91.34251,3.764044 
      61.75268,101.629084 
      46.31451,116.685274 
      -15.43817,15.05615 
      -348.64533,0 
      -464.4316,0 
      -51.970376,0 
      -69.396244,-17.08125 
      -87.777293,15.80389 
     C -0.1965619,209.53694 
     501.31249,229.91057 
     504.89916,3.6862537" 
     fill="none" stroke="black" stroke-width="1" 
    /> 
    <path d="M 0.3120145,28.545527 
     c 208.4152955,0 
      434.8417755,7.528088 
      526.1842855,11.292119 
      91.34251,3.764044 
      61.75268,101.629084 
      46.31451,116.685274 
      -15.43817,15.05615 
      -348.64533,0 
      -464.4316,0 
      -51.970376,0 
      -69.396244,-17.08125 
      -87.777293,15.80389 
     C -0.1965619,250.53694 
     530.31249,245.91057 
     504.89916,10.6862537" 
     fill="none" stroke="red" stroke-width="0.5" 
    /> 
    <!--path class="SamplePath" d="M100,200 C100,100 250,100 250,200 S400,300 400,200" -- > 

</svg> 

Answer 1

通過將路徑的開始更改爲「M 0 0」，您正在修改路徑。試一下：

<svg id="bg" width="640" height="480" viewBox="0 0 640 480"  xmlns="http://www.w3.org/2000/svg"> 

<circle cx="0" cy="28" r="10" fill="red" transform="translate(0, -30)"> 
    <animateMotion attributeName="transform" type="translate" path="M 0.3120145,28.545527 
    c 208.4152955,0 
     434.8417755,7.528088 
      526.1842855,11.292119 
     91.34251,3.764044 
     61.75268,101.629084 
     46.31451,116.685274 
     -15.43817,15.05615 
     -348.64533,0 
     -464.4316,0 
     -51.970376,0 
     -69.396244,-17.08125 
     -87.777293,15.80389 
    C 0,210 
    501,230 
    505,3.7" begin="0s"  dur="3s" fill="freeze"/> 
</circle> 
<path d="M 0.3120145,28.545527 
    c 208.4152955,0 
     434.8417755,7.528088 
      526.1842855,11.292119 
     91.34251,3.764044 
     61.75268,101.629084 
     46.31451,116.685274 
     -15.43817,15.05615 
     -348.64533,0 
     -464.4316,0 
     -51.970376,0 
     -69.396244,-17.08125 
     -87.777293,15.80389 
    C 0,210 
    501,230 
    505,3.7" 
    fill="none" stroke="black" stroke-width="1"/> 
</svg>