Как добавить поддержку SVGPan в Raphael - PullRequest
Новая
       2

Как добавить поддержку SVGPan в Raphael

2 голосов
/ 05 октября 2011

Я использую библиотеку, которая создает SVG-контент, используя библиотеку Raphael.Теперь я хотел бы добавить функцию масштабирования.Я нашел следующую библиотеку:

http://www.cyberz.org/blog/2009/12/08/svgpan-a-javascript-svg-panzoomdrag-library/

Вот так выглядит часть svg: 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
//...the image

Проблема в том, что эта библиотека ожидает тег сценария и тег agокружающий все изображение.После манипуляции это должно выглядеть так: 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<script xlink:href="SVGPan.js"/>
<g id="viewport" transform="translate(200,200)">
...//the image
</g>

Мне нужно было бы добавить тег script, но реальная проблема заключается в размещении элемента ag с id = "viewport" вокруг всей остальной части изображения.Как я могу сделать это с JQuery или планировать JavaScript?

РЕДАКТИРОВАТЬ:

Я немного опередил себя.Оказывается, что добавление тега сценария, похоже, не работает: 

var svg = $('svg'); 
svg.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink'); // else error in firefox with links
var scriptElement = document.createElementNS('http://www.w3.org/2000/svg','script');
scriptElement.setAttribute('xlink:href','js/SVGPan.js');
svg.prepend(scriptElement);

Я не получаю сообщение об ошибке, и сценарий выполняется полностью, но тег не добавляется.Я проверил, что $ ('svg') выбирает нужный элемент, и я могу с ним что-то делать, кроме предварительного добавления тега script для любой причины, которую я не понимаю.

Ответы [ 3 ]

2 голосов
/ 06 октября 2011

Спасибо, Клафу, за то, что указал мне на рафаэля. Это привело меня к решению. Проблема в том, что мне удалось получить объект Raphael, но zpd работает только в том случае, если еще ничего не нарисовано, а это не так.

Я использую http://www.jsphylosvg.com, который использует Рафаэля. Решение состоит в том, чтобы отредактировать javascript-файл jsphylosvg.js напрямую:

  1. поиск this.svg = Raphael (sDivId, this.canvasSize [0], this.canvasSize [1]); (строка 1217 в моем случае)
  2. add: this.svg.ZPD ({zoom: true, pan: true, drag: true}); прямо под этой линией
  3. save jsphylosvg.js

сделано. Оно работает! (Конечно, на вашей веб-странице должна быть ссылка на raphael-zpd)

2 голосов
/ 05 октября 2011

Я не думаю, что Рафаэль позволяет вам манипулировать элементом SVG, но вы можете попробовать подобную библиотеку, специфичную для Рафаэля.Это может обеспечить то, что вы ищете: https://github.com/semiaddict/raphael-zpd

Редактировать: На самом деле можно манипулировать элементами SVG: Рафаэль предоставляет свойство Node.Поэтому, если бы вы могли получить бумажный объект Рафаэля, вы могли бы попробовать что-то вроде:

paper.node.setAttribute ("id", "viewport")

0 голосов
/ 05 октября 2011

Вы пытались получить его через селектор jQuery? Например, вы можете попытаться установить идентификатор для дочернего элемента g, выполнив это (после того, как ваша библиотека создаст элемент SVG):

$ ('svg> g'). Attr ('id', 'viewport');

...