Skip to content

FlorianLoch/svg.foreignobject.js

 
 

Repository files navigation

svg.js.plugin.foreignobject

svg.foreignobject.js plugin that you can require

This package was forked from svg.foreignobject.js in order to be able to import it with a require and plug into svg.js.extend to get an extended svg.js.

Minor fixes were applyed to make it work with svg.js 2.0 version.

Follows original svg.js.foreignobject README.md content.

svg.foreignobject.js

A plugin for the svgjs.com library to create foreign object elements in svg.

See SVG Documentation on the foreignObject element for more details.

Svg.foreignobject.js is licensed under the terms of the MIT License.

Usage

Include this plugin after including the svg.js library in your html document.

To add a foreignobject

var canvas = SVG('canvas').size(1024, 550)
var fobj = canvas.foreignObject(100,100).attr({id: 'fobj'})

To add a child note

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', innerText: txt})

The first argument to appendChild is either a node or a string describing the type of element to create. The second argument is a list of attributes to set on the element.

Note that the foreignObject element can be manipulated with the standard svg.js methods (move(), rotate(), scale() etc.), whereas the contained node can be manipulated separately. For example if you embed a HTML element you can use jQuery (or whaever you choose) to manipulate the embedded object.

Example

See the provided sample.html

Dependencies

This plugin requires svg.js v0.12.

About

SVG Foreign Object support for the svg.js library

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 80.8%
  • HTML 19.2%