foreignObject / html support

[alecf]

so I've hacked together some foreignObject support via SVG but I
really have no idea how to deal with this in VML/IE (and I'm on a mac,
so its kind of hard to test)

If I were to submit a patch for foreignObject support, how likely is
it to be integrated?

Also, I've found a bug that on Firefox (3.6.3 at least)
foreignObject.getBBox() is giving the wrong value (it always returns
0,0 for x,y, but the height/width are correct) - I have a workaround
for that though.

Anyway, just curious to get people's feedback...

[dmitry.ba...@gmail.com]

> If I were to submit a patch for foreignObject support, how likely is
> it to be integrated?

Unless you make it work for VML, not likely.

[alecf]

That's too bad... one option is of course a plugin but one of the
challenges I've had in just making this a plugin was hooking into the
node-creation mechanism.

I had to write this (which also has support for svg's g tag) but
obviously I've cribbed a lot from raphael proper. (this has elements
of the $() function, among other things) - perhaps there's a way to
expose this function from raphael proper? (and see below for
Raphael.fn.html())

function createSVG(svg, container, type, x, y, w, h, r) {
// svg is the main Raphael paper instance
// container is the containing element, usuall also the paper
instance
// but alternatively the 'g'

// thank you for leaking :)
var Element = svg.constructor.el.constructor;

var el = document.createElementNS(paper.svgns, type);
el.style.webkitTapHighlightColor = "rgba(0,0,0,0)";
container.canvas && container.canvas.appendChild(el);

var res = new Element(el, svg);
res.attrs = {x: x, y: y, width: w, height: h, r: r || 0, rx: r || 0,
ry: r || 0, fill: "none", stroke: "#000"};
res.type = type;
if (type == "g")
res.canvas = res.node;
var has = "hasOwnProperty";
for (var key in res.attrs) {
if (res.attrs[has](key)) {
if (res.attrs[key] !== undefined)
el.setAttribute(key, res.attrs[key] + "");
}
}

return res;
}

Then I'm able to do this:

Raphael.fn.html = function(html, x, y, width, height) {
var f = createSVG(this, this, "foreignObject",
x, y, width, height);
var b = document.createElement("body");
b.innerHTML = html;
f.node.appendChild(b);

// fix the height to match the newly created html
f.node.setAttribute("height", Math.max(b.clientHeight, height));
f.node.setAttribute("width", Math.max(b.clientWidth, width));
return f;
}


On Jun 24, 4:27 pm, "dmitry.baranovs...@gmail.com"