Not an issue. Here's a very simple addition to add support to svg foreignbject:
SVG.ForiegnObject = function() {
this.constructor.call(this, SVG.create('foreignObject'))
/* store type */
this.type = 'foreignObject'
}
SVG.ForiegnObject.prototype = new SVG.Shape
SVG.extend(SVG.ForiegnObject, {
appendChild: function (child, attrs) {
var newChild = typeof(child)=='string' ? document.createElement(child) : child
if (typeof(attrs)=='object'){
for(a in attrs) newChild[a] = attrs[a]
}
this.node.appendChild(newChild)
return this
},
getChild: function (index) {
return this.node.childNodes[index]
}
})
SVG.extend(SVG.Container, {
foreignObject: function(width, height) {
return this.put(new SVG.ForiegnObject).size(width == null ? 100 : width, height == null ? 100 : height)
}
})
And a simple example of use (assuming you put the above code in a file called svg.foreignobject.js:
<html>
<head>
<script src='svg.js'></script>
<script src='svg.foreignobject.js'></script>
</head>
<body onload="doit()">
<h1>Foreign Objects</h1>
<div id='canvas'></div>
<script>
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"
var canvas = SVG('canvas').size(1024, 550)
canvas.rect(1024, 550).attr({ fill: '#eee' })
var fobj = canvas.foreignObject(100,100).attr({id: 'fobj'})
function doit() {
fobj.appendChild("div", {id: 'mydiv', innerText: txt})
var n = fobj.getChild(0)
fobj.attr({width: 200, height: 100}).rotate(45).move(100,0)
n.style.height = '50px'
n.style.overflow = 'hidden'
n.style.border = "solid black 1px"
}
</script>
</body>
</html>
This is an alternative way to do text flowing and/or integrating a WYSWIG editor into a primarily SVG web page.