Как выбрать <use> и можно увеличить с помощью svg.pan-zoom.js?

Я использую svg.js и svg.pan-zoom.js, чтобы увеличить svg с помощью прокрутки. , как демонстрация 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>

Я использовал тег 'use', потому что SVG, что я хочу использовать, имеет сложную форму.

Возможно, у меня есть ошибка svg select в скрипте, но я не знаю, как это исправить.

сообщение в консоли

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

Как я могу это исправить?

источник

2016-08-25 Songyi Lim

Конструктор SVG ожидает узел или идентификатор узла, на котором размещен корневой svg. Так что в вашем случае это будет 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(). В случае, если вы хотите panZoom всего документа я думаю, вы должны вызвать его на svgDoc непосредственно как: SVG.get('drawing').panZoom()

Я также предлагаю использовать официальный аддон svg.draggable.js вместо draggy, так как он обрабатывает преобразования намного более стабильными.

источник

2016-08-25 20:57:34 Fuzzyma

Как выбрать <use> и можно увеличить с помощью svg.pan-zoom.js?

ответ

Смежные вопросы