1

我遇到了一个相当奇怪的情况，我似乎无法解释。我创建了一个带有单个动画圆和两条路径的 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>
4

1 回答 1

0

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>
于 2013-02-07T17:19:42.630 回答