3

私はHTML5、SVGの初心者です。基本的に、作成したSVGパスを介してhtml「div」オブジェクトを移動する必要があります。

私のHTMLは次のようになります

<div class="movepath">

        <div class="car" id="car"></div>


<svg id="canvas" width="1000px" class="content" xmlns="http://www.w3.org/2000/svg" height="370px">
<style type="text/css"><![CDATA[
    .lineC {
        fill:#fff;stroke:#000;
    }
]]></style>


</svg>

    </div>

CSS

.movepath {
width:"1000px";
height:350px;
position:relative;
float:left;
}

.car {
width:100px;
height:50px;
background-color:red;
position:absolute;
left:0;top:0;
}

js

var width=getDocWidth();
    $('#canvas').width(width+'px');
    $('.movepath').width(width+'px');



    var shape = document.createElementNS(svgNS, "path");

    var points = 'M0 10 Q -27 10, 95 80 T'+width+' 40';
    shape.setAttributeNS(null, "d", points);
    shape.setAttributeNS(null, "class", "lineC");
    shape.setAttributeNS(null, "id", 'road');
    document.getElementById("canvas").appendChild(shape);

このようなパスを作成しました。作成されたパスを介して$（'＃car'）を移動する方法が完全に混乱していますか？

ご意見をお聞かせください

4

1 に答える 1

2

基本的に、ループ（等しいタイムステップでトリガーされる関数であるため、»for«または»while«ループはありません）が必要です。その中で、次のようなパスからポイントを取得する必要があります。

length = path.getTotalLength() * i;
point = path.getPointAtLength( length );

よりも：

div.style.left = point.x + 'px';
div.style.top = point.y + 'px';

ここで、iはアニメーションの進行状況を表す0〜1の値です。全体として、知っておくべきことがもう少しあり、divを移動する（つまり、css変換）、または値を取得するさまざまな方法がありますが、基本的にはそれだけです。

于 2013-02-12T06:00:47.720 に答える