Support for foreignobject #59

memloom-development · 2013-07-09T23:51:52Z

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.

wout · 2013-07-10T06:42:10Z

Excellent! I've been thinking about writing it myself. :)
Why don't you put this plugin (svg.foreignobject.js) in a repo? I'll add it in the plugin section...

memloom-development · 2013-07-10T18:15:50Z

Done: https://github.com/john-memloom/svg.foreignobject.js

wout · 2013-07-10T18:56:23Z

And done: https://github.com/wout/svg.js#plugins
:)

wout closed this as completed Jul 10, 2013

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support for foreignobject #59

Support for foreignobject #59

memloom-development commented Jul 9, 2013

wout commented Jul 10, 2013

memloom-development commented Jul 10, 2013

wout commented Jul 10, 2013

Support for foreignobject #59

Support for foreignobject #59

Comments

memloom-development commented Jul 9, 2013

wout commented Jul 10, 2013

memloom-development commented Jul 10, 2013

wout commented Jul 10, 2013