Question

使用SVG.js，我有一个div作为foreignobject放在svg中。 div基于innerHTML很好地调整大小。我希望它可以拖延。我将draggable（）添加到foreignobject，但它无法正常工作：它不保留x，y拖动的值。

有什么想法吗？

以下是问题的一个例子。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>SVG.js - Draggable foreignobject </title>
    <script type="text/javascript" src="//svgDiscovery.com/SVG.js/svg.js"></script>
    <script type="text/javascript" src="//svgDiscovery.com/SVG.js/Plugins/svg.foreignobject.js"></script>
    <script type="text/javascript" src="//svgDiscovery.com/SVG.js/Plugins/svg.draggable.js"></script>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width">
</head>
<body style='padding:10px;font-family:arial;'>
<center>
<h4>SVG.js - Draggable foreignobject </h4>
<table>
<tr>
<td>
<div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'></div>
</td>
</tr></table>
<script id=myScript>
var mySVG = SVG('svgDiv').size(400, 400);

var fobj = mySVG.foreignObject().attr({id: 'fobj'})
fobj.move(30,30)
fobj.draggable()

var txt = "some text that is quite long.  and it goes on and on.  and it's pointless really.  and the grammar is terrible.  blah. blah. blah"
fobj.appendChild("div", {id: 'myDiv', innerHTML: txt})

myDiv.style.cursor = 'move'
myDiv.style.width = '200px'
myDiv.style.padding = '10px'
myDiv.style.background = 'white'
myDiv.style.height = myDiv.scollHeight+'px'
myDiv.style.border = "solid black 1px"

</script>
</body>
</html>

SVG.js：Draggable DIV foreignobject

0 个答案: