1

私は説明できないようなかなり奇妙な状況に遭遇しました。アニメーション化された 1 つの円と 2 つのパスを含む 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

パスの開始を「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>
于 2013-02-07T17:19:42.630 に答える