Home/ Questions/Q 9252821
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T11:03:13+00:00

I’ve ran into a rather strange situation I can’t seem to explain. I have

  • 0

I’ve ran into a rather strange situation I can’t seem to explain. I have created a SVG file (see below) with a single animated circle, and two paths.

The animated circle has been given a path, and the black curve has been given the same path. For the most part these work as expected, the circle follows the line until it reaches the last part of the curve (path created in Inkscape).

At the last curve the circle goes significantly off the path, and follows the red curve (which I drew myself from watching where the circle went). I’ve been looking into this for a while, and I’ve passed it around to a few people and we’ve all come up empty! It seems to display the same behavior in both Chrome and 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    By changing the start of the path to “M 0 0” you are modifying the path. Try with: 

    <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>
    • 0