如何將SVGPan支持添加到raphael

我正在使用使用raphael庫創建svg內容的庫。我現在想添加縮放功能。我發現下面的庫：如何將SVGPan支持添加到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

的問題是，這個庫需要一個腳本標籤和整個圖像周圍A G標記。它應該是這樣的操作之後：

<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>

我需要添加腳本標籤，但真正的問題是把一個g組件id爲「視口」周圍的圖像的整個休息。我該如何使用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'）選擇了所需的元素，我可以對它做任何事情，除了預先爲我不明白的任何元素添加腳本標記。

來源

2011-10-05 beginner_

謝謝Clafou指着我到raphael-zpd。這導致我找到解決方案。問題是我能夠得到raphael對象，但zpd只有在沒有繪製任何東西的情況下才起作用。

我使用的是使用raphael的http://www.jsphylosvg.com。解決的辦法是直接編輯JavaScript文件jsphylosvg.js：

搜索this.svg =聖拉斐爾（sDivId，this.canvasSize [0]，this.canvasSize [1]）; （我的情況是1217行）
add：this.svg.ZPD（{zoom：true，pan：true，drag：true}）;直接跌破這一線
保存jsphylosvg.js

做起來難。有用！（當然，你需要在你的網頁中參考raphael-zpd）

來源

2011-10-06 07:03:18

我不認爲拉斐爾允許你操縱SVG元素，但你可以嘗試一個類似的Raphael專用庫。這個可以提供你正在尋找的東西：https://github.com/semiaddict/raphael-zpd

編輯：實際上它可以操縱SVG元素：Raphael公開了一個Node屬性。所以，如果你能得到拉斐爾紙對象的抱着你可以嘗試像：

paper.node.setAttribute（「ID」，「視」）

來源

2011-10-05 11:03:40 Clafou

更具體地說，我使用的是一個內部使用raphael的庫。我還沒有想出如何讓base raphael紙張對象能夠操作它，例如使用zpd插件。 –

它不是'paper.node'，它是'paper.canvas' – treecoder

您是否嘗試過通過得到它jQuery選擇器？舉例來說，你可以嘗試在子元素元素上設置id（在你的類庫構建SVG元素後）：

$（'svg> g'）。attr（'id'，'viewport 「）;

來源

2011-10-05 17:11:33 Clafou

這件事就是讓所有東西都得到g元素。它根本就沒有！請參閱我的問題中的編輯。 –

如何將SVGPan支持添加到raphael

回答

相關問題