16

SVG要素のグループを移動するための最良の方法（より速く、よりきれいに...）を探しています。私は3つの方法を念頭に置いています：

  • すべての要素に対してループを実行し、それぞれについて x 属性と y 属性を変更します
  • すべての要素を svg 要素にグループ化し、その x 属性と y 属性を変更する
  • ag 要素のすべての要素をグループ化し、ここで説明されている方法を適用します: https://stackoverflow.com/a/14036803/2019761

アイデアはありますか？

4

3 に答える 3

6

javascriptでsvgグループまたは要素を移動できます

// translate svg element
function translate( _element , _x , _y )
{
  var transform = _element.transform.baseVal.getItem(0);   
  var mat = transform.matrix;   

  mat = mat.translate( _x, _y );  
  transform.setMatrix( mat );

}

実際に見てみましょう:

http://www.janvas.com/illustrators_designers_developers/projects/janvas2D_web/examples_EN.php?exampleName=ufo_animation_EN

于 2013-05-08T11:04:48.530 に答える
4

DOM メソッドとのやり取りには、JS <-> ネイティブ コードのオーバーヘッドが伴います。ブラウザーの実装者は、このオーバーヘッドを削減するために懸命に取り組んできましたが、無料になることはありません。多くの要素に x と y を設定するなど、多くのことを行っている場合は、パフォーマンスに大きな影響を与える可能性があります。この場合、<svg>または<g>コンテナで位置プロパティを 1 回だけ設定すると役立つ可能性があります。

オーバーヘッドのより重要な原因は、行った変更のために再描画する作業である可能性があります。これらの変更がトランスフォームの変更であり、トランスフォームの値が短時間に複数回変更される場合、ほとんどの実装では、変換された SVG 要素のコンテンツをキャッシュされたオフスクリーン サーフェスにペイントし、毎回再ペイントする代わりにそのサーフェスを合成します。 . 要素のコンテンツの描画にコストがかかる場合 (たとえば、要素に多くの子が含まれている場合や、高価なフィルター効果がある場合)、再合成は再描画よりもはるかに高速になる可能性があるため、a の変換をアニメーション化する場合は、<g>はるかに見やすくなります。パフォーマンス。

于 2013-05-05T16:21:44.447 に答える