2016-08-25 6 views
0

私はsvg.jsとsvg.pan-zoom.jsを使って、スクロールを使ってsvgをズームできるようにします。 like svg.pan-zoom.jsデモ(this<use>を選択する方法は、svg.pan-zoom.jsを使用してズームできますか?

これはテストのためのコードです。

<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <script src="jquery.js"></script> 
    <script src="svg.js"></script> 
    <script src="svgDraggy.js"></script> 
    <script src="svgPanzoom.js"></script> 
    <style type="text/css"> 
    #drawing svg { 
     width:800px; 
     height:400px; 
     border:1px solid #333333; 
    } 
    </style> 
</head> 
<body> 
    <div id = "drawing"> 
     <svg> 
      <g id="canvas"> 
       <use xlink:href="space.svg#planet" fill="#19317c"></use> 
      </g> 

     </svg> 
    </div> 

    <script> 
     var test = SVG('canvas').panZoom(); 
     test; 
    </script> 
</body> 
</html> 

私は使用したいSVGが複雑な形をしているので、私は 'use'タグを使用しました。

私はスクリプトで誤ってsvg selectをしたことがあるかもしれませんが、修正方法はわかりません。コンソールで

メッセージは、私はそれを修正するにはどうすればよい

svgPanzoom.js:129 Uncaught TypeError: Cannot read property 'tagName' of undefined

のですか?

答えて

0

SVGコンストラクタは、ルートsvgが配置されているノードへのノードまたはIDを要求します。したがって、あなたの場合はSVG('drawing')になります。しかし、新しい svg文書を作成するので、これはあなたのニーズを満たしません。インラインSVGを採用したい。これを行うには、SVG.get('drawing')を試してください。これにより、svg.jsインスタンスが返されます。今、あなたはあなたのグループを検索し、その上にpanZoomを呼び出すことができます。

var svgDoc = SVG.get('drawing') 
svgDoc.select('#canvas').get(0).panZoom() 

代わりにあなただけを直接検索することができます:SVG.select('#canvas').get(0).panZoom()を。あなたは私はあなたが直接のようsvgDocでそれを呼び出す必要が推測文書全体panZoomをしたい場合は :SVG.get('drawing').panZoom()

に私はまた、より多くの安定した変換を処理しますので、代わりにdraggyの公式アドオンsvg.draggable.jsを使用することをお勧めします。

関連する問題