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>

动画SVG对象遵循与给定相同路径的图形不同的路径

1 个答案: