0

raphael.js の代わりに svg.js を使用することにしました。これは、SVG 画像に必要なのは単純なアニメーション関数だけであり、サイズがはるかに小さく、構文が優れているためです。

SVG インポートは正常に機能していますが、アニメーション化するためにどのオブジェクトを参照する必要があるかわかりません。

インポート後の私のコードの最後のビットは言う

var rawSvg = 'svg raw data here'
var draw = svg('paper').size('100%', '100%');
    draw.import(rawSvg);

Google Chrome で要素を調べたところ、SVG オブジェクト「g」、#path1layer1、および Path2993 だけが表示されました。そのため、それぞれにアニメーション メソッドを適用しようとしましたが、オブジェクトにアニメーション メソッドがないというエラーが表示されます。では、animate メソッドをどのオブジェクトにバインドすればよいのでしょうか?

これは私が試した最後のことです

path2993.animate().move(150, 150);
4

3 に答える 3

1

svg.import.jsプラグインが更新されました。ここで説明されているように、インポートされたすべての要素が import() メソッドによって返されるオブジェクトで参照されるようになりました。

var rawSvg = '<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"    width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve"><line id="line1234" fill="none" stroke="#FF7BAC" stroke-width="20" stroke-linecap="round" stroke-miterlimit="10" x1="138.682" y1="250" x2="293.248" y2="95.433"/><rect id="rect1235" x="22.48" y="19.078" fill="#F7931E" stroke="#C1272D" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="94.972" height="94.972"/><path id="path1236" opacity="0.5" fill="#29ABE2" d="M189.519,131.983c0,5.523-4.477,10-10,10H92.257c-5.523,0-10-4.477-10-10V53.659 c0-5.523,4.477-10,10-10h87.262c5.523,0,10,4.477,10,10V131.983z"/><circle id="circle1237" opacity="0.8" fill="#8CC63F" cx="201.603" cy="159.508" r="69.067"/><polygon id="polygon1238" fill="none" stroke="#8C6239" stroke-width="20" stroke-linecap="round" stroke-miterlimit="10" points="286.331,287.025  227.883,271.365 212.221,212.915 255.009,170.127 313.459,185.789 329.119,244.237 "/></svg>';
var draw = svg('paper');
var store = draw.import(rawSvg);
store.polygon1238.fill('#f06');
于 2013-02-05T21:46:41.347 に答える
0

svg.jsインポートプラグインは非常に若いです。インポートされたすべての要素は実際にはsvg.jsで構築されているため、children（）メソッドを使用してsvg.js内ですべて公開されます。

var draw = svg('paper');
draw.import('... svg data ... ');
draw.children().forEach(function(element) {
  console.log(element.attr('id');
});

ただし、要素を個別に参照する場合は、SVGの巨大なドキュメントをインポートするよりも、個別に作成する方が適切です。Inkscapeで生成されたパスを使用したいとします。単一の形状を作成し、それをプレーンsvgとして保存します。svgファイルを開き、<path>タグを見つけて、d="..."属性の内容をコピーします。これは次のようになります。

M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z

次に、パスを作成してアニメーション化できます。

var pathData = 'M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z';
var draw = svg('paper');
var path = draw.path(pathData).size(30).move(10,10);
path.animate().move(100,100);
于 2013-02-05T21:16:33.793 に答える
0

私はドキュメントを読んでいますが、私には明確ではありません。しかし、オブジェクトに id 属性を追加して、this.SVG標準の DOM メソッドを介して svg 要素にアクセスすることはできませんか? それとも、js オブジェクト自体を取得しようとしていますか? それはあなたが描く変数ではないでしょうか、それとも遅すぎますか?

于 2013-02-05T19:06:44.247 に答える