哪個svg-library與interact.js兼容？

-1

我想在我的網站上拖放一個可拖動的元素，其中一些從Adobe Illustrator中導出並嵌入爲img，一些是使用像svg.js這樣的svg庫創建的，因爲它們必須是可修改的。我正在尋找一種方法來在同一個領域移動。哪個svg-library與interact.js兼容？

我試圖此svg.js生成的元素上從網站http://interactjs.io/使用第一示例（拖動）的代碼：

<body> 
    <div id="drawing" class="draggable"></div> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.5.0/svg.js"></script> 
    <script> 
    var draw = SVG('drawing').size(400,400); 
    draw.rect(130, 30).attr({'x': 30, 'y': 80, 'fill': 'black'}); 
    </script> 
</body>

Interact.js可以很好地移動至IMG元素，但不是由svg.js生成的元素我只能在y軸上移動矩形，矩形旁邊的整個右側可拖動。

是否有可能在嵌入式代碼生成的svg上使用相同的js庫？或者我應該使用兩個庫？最後，我需要場上元素的座標。

來源

2017-03-22 KatiKiss

下面是一個拖動svg元素的例子。它不需要圖書館。它還處理在元素上執行拖放操作之前已經轉換過的元素。要拖動的每個svg元素只需包含class =「dragTarget」。這可以添加到任何元素中。試試下面的例子：

<!DOCTYPE HTML> 
 

 
<html> 
 
<head> 
 
    <title>Drag SVG</title> 
 
</head> 
 
<body> 
 
SVG Drag/Drop is also applied to previously transformed elements (see maroon rectangle). 
 
<div style=background:gainsboro;width:300px;height:300px> 
 
<svg id="mySVG" width="300" height="300" onmousedown="startDrag(evt)" onmousemove="drag(evt)" onmouseup="endDrag()"> 
 
<circle style=cursor:move class="dragTarget" id="redCircle" cx="90" cy="80" r="30" fill="red" stroke="black" stroke-width="2" style="cursor:default" ></circle> 
 
<circle style=cursor:move class="dragTarget" id="orangeCircle" cx="200" cy="200" r="20" fill="orange" stroke="black" stroke-width="2" ></circle> 
 
<rect style=cursor:move transform="translate(100,100)scale(1.2,.8)" class="dragTarget" id="maroonRect" x="120" y="150" width="30" height="30" fill="maroon" stroke="black" stroke-width="2"></rect> 
 
<rect style=cursor:move class="dragTarget" id="blueRect" x="40" y="60" width="30" height="15" fill="blue" stroke="black" stroke-width="2"></rect> 
 
</svg> 
 
</div> 
 
<script> 
 
var TransformRequestObj 
 
var TransList 
 
var DragTarget=null; 
 
var Dragging = false; 
 
var OffsetX = 0; 
 
var OffsetY = 0; 
 
//---mouse down over element--- 
 
function startDrag(evt) 
 
{ 
 
\t if(!Dragging) //---prevents dragging conflicts on other draggable elements--- 
 
\t { 
 
\t \t if(evt.target.getAttribute("class")=="dragTarget") 
 
\t \t { 
 
\t \t \t DragTarget = evt.target; 
 
\t \t \t //---reference point to its respective viewport-- 
 
\t \t \t var pnt = DragTarget.ownerSVGElement.createSVGPoint(); 
 
\t \t \t pnt.x = evt.clientX; 
 
\t \t \t pnt.y = evt.clientY; 
 
\t \t \t //---elements transformed and/or in different(svg) viewports--- 
 
\t \t \t var sCTM = DragTarget.getScreenCTM(); 
 
\t \t \t var Pnt = pnt.matrixTransform(sCTM.inverse()); 
 

 
\t \t \t TransformRequestObj = DragTarget.ownerSVGElement.createSVGTransform() 
 
\t \t \t //---attach new or existing transform to element, init its transform list--- 
 
\t \t \t var myTransListAnim=DragTarget.transform 
 
\t \t \t TransList=myTransListAnim.baseVal 
 

 
\t \t \t OffsetX = Pnt.x 
 
\t \t \t OffsetY = Pnt.y 
 

 
\t \t \t Dragging=true; 
 
\t \t } 
 
\t } 
 
} 
 
//---mouse move--- 
 
function drag(evt) 
 
{ 
 
\t if(Dragging) 
 
\t { 
 
\t \t var pnt = DragTarget.ownerSVGElement.createSVGPoint(); 
 
\t \t pnt.x = evt.clientX; 
 
\t \t pnt.y = evt.clientY; 
 
\t \t //---elements in different(svg) viewports, and/or transformed --- 
 
\t \t var sCTM = DragTarget.getScreenCTM(); 
 
\t \t var Pnt = pnt.matrixTransform(sCTM.inverse()); 
 
\t \t Pnt.x -= OffsetX; 
 
\t \t Pnt.y -= OffsetY; 
 

 
\t \t TransformRequestObj.setTranslate(Pnt.x,Pnt.y) 
 
\t \t TransList.appendItem(TransformRequestObj) 
 
\t \t TransList.consolidate() 
 
\t } 
 
} 
 
//--mouse up--- 
 
function endDrag() 
 
{ 
 
\t Dragging = false ; 
 

 
} 
 
</script> 
 
</body> 
 

 
</html>

來源

2017-03-22 15:41:17

謝謝您的回答，我一定會看看您的解決方案。我意外地找出了svg.js和interact.js之間第一個問題的解決方案。每個html元素都需要定義寬度和高度，否則不能正確拖動interact.js。 – KatiKiss

哪個svg-library與interact.js兼容？

回答

相關問題