svg.jsでインポートされたsvgを移動する

Question

svg.jsでsvgスニペットをインポートしてからオフセットしようとしていますが、使用しようとしている変換方法がインポートされたsvgで動作しないようです。

コード私が持っている：

var lang = SVG('lang').size(400,400) 
var swe = lang.svg('<svg id="swe" width="65" height="40.625" preserveAspectRatio="xMidYMid meet" zoomAndPan="magnify" version="1.0" contentScriptType="text/ecmascript" contentStyleType="text/css" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="navy"/>' + 
'<g transform="scale(4.0625)">' + 
' <rect x="5" width="2" height="10" fill="gold"/>' + 
' <rect y="4" width="16" height="2" fill="gold"/>' + 
'</g></svg>') 

swe.dx(100).dy(50) <-- this line does nothing. 

もないx()、transform()またはmove()

私は長方形を作り、さらにその先のインポートしようとしているように、仕事を翻訳することになっている他の方法は動作しません：

var flag = lang.rect(65, 40.625) 
var swe = flag.svg(<svg code>) 
swe.dx(100).dy(50) 

私は賢明な私を作るドキュメントで何も見つかりません。これを経験した人はいますか？

Answer 1

まず、rect要素には子供がいないので、最後のアプローチはナンセンスです。

さらに、svg要素を変換することは許可されていないため、変換も機能しません。一方、xとyのプロパティはネストされたsvgでのみ動作し、ルートsvgでは動作しません。

グループを作成し、そこにsvgをインポートしてグループを移動することができます。または、ルートSVGのすべての子をループして移動することができます（children().each()メソッドを使用して子をループすることができます）

Answer 2

投稿したコードでは、SVG()のSVGドキュメントを作成し、別のSVGドキュメントをインポートしますまったく意味をなさないこと、

あなたが最初にあなたのdivタグにあなたのSVGドキュメントをインポートする必要があります。

document.getElementById('lang').innerHTML = (yourSvgCode); 

その後、あなたはSVGドキュメントを取得するためにSVG.get()を使用することができます

01。

その後、ドキュメント内の要素を操作できるようになります。 swe.children()またはSVG.jsにある他の参照方法を使用して、SVG要素を取得してください。

Answer 3

グラフィックを移動するには2通りの方法があります。最初に、CSSを使用して "lang" divタグの位置を変更するだけです。

実際にsvg.js関数呼び出しでsvgドキュメントの内側でグラフィックスを移動したい場合は、次のようなことができます。

var lang = SVG('lang').size(800,800) 
var swe = lang.svg('<svg id="swe" preserveAspectRatio="xMidYMid meet" zoomAndPan="magnify" version="1.0" contentScriptType="text/ecmascript" contentStyleType="text/css" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">' + 
'<g transform="scale(1)" id="my_flag">' + 
' <rect width="65" height="40.625" fill="navy"/>' + 
' <rect x="15" width="5" height="40.625" fill="gold"/>' + 
' <rect y="15" width="65" height="5" fill="gold"/>' + 
'</g></svg>') 

var flag = SVG.get("my_flag"); 
flag.move(5,5); 

私はグループにIDを与えたことに注目してください。私はまた、グループに海軍の背景を移動したので、それ以外のものと一緒に移動しました。