3

SVG で定義されたパスがあります。パスのコピーを 2 つ作成し、一方が一方の側で元のパスと平行に配置され、もう一方が反対側で平行に配置されるように変換したいと考えています。アイデアは、すべてが互いに平行で重なり合わない 3 つのパスで終わることです。

2 つのパスについて、transform="translate(10,10)" や transform="translate(-10,-10)" などの簡単な変換を試みましたが、一部のパスでは最終的に互いに交差してしまいます。欲しいです。

ありがとう。

4

3 に答える 3

2

あなたの答えはあなたがそれを提供したようにいくらかうまくいくはずです。より良い解決策を呼び起こすために、問題のより具体的な例を提供することができます。

提供されたコマンドは、アイテムを1次元だけでなく、2次元で移動します。

また、SVGは左上のポイントを0,0として使用し、右/下は正であることに注意してください。また、ユニットにつまずかないように確認してください。

于 2009-11-10T02:42:53.177 に答える
0

元のパスにX、Yのバウンディングボックスがある場合、コピーされたものがオーバーラップしないようにする最も簡単な方法は、+ Xと-Xで変換することです。したがって、次のようになります。

translate(-X, 0)

と

translate(X, 0)

ここで、Xの値を計算し、それをtranslate引数に設定しました。

于 2009-11-21T11:19:08.623 に答える
0

SVG DOM 仕様を見ずに書かれた、完全にテストされていないコードをいくつか紹介します。次に、それをテストし、微調整して機能させることができます。

まず、要素の境界ボックスを取得します。

var box = mypath.getBBox();

次に、パスを 2 回複製します (または要素を作成します)。

var rightCopy = mypath.cloneNode(true); var bottomCopy = mypath.cloneNode(true);

次に、各コピーを変換します。

rightCopy.setAttribute("transform", "translate(" + box.width + ",0) " + rightCopy.getAttribute("transform"));

bottomCopy.setAttribute("transform", "translate(0," + box.height + ") " + bottomCopy.getAttribute("transform"));

乱雑に見える理由は、元のパスに既に変換がある可能性があるためです。

次に、それらのノードを DOM に追加します。

mypath.parentNode.insertBefore(rightCopy, mypath);

mypath.parentNode.insertBefore(bottomCopy, mypath);

于 2009-11-22T02:06:12.287 に答える