foreignObject, SVG and well VML
John Mettraux
This is related to
http://groups.google.com/group/raphaeljs/browse_thread/thread/614e4132083b18a3
I have a naive implementation of foreignObject for Raphael. It works as well with VML, though it gets me wondering : should I really name that foreignObject ?
My use case is stealing divs and placing them in Raphael papers.
Here is a tiny demo :
http://lambda.io/raphael/test3.html
OK, with all the major browsers.
Animating those divs works well on Firefox (3.6.12 snoleo), works not that great on Webkit-based browsers. Not tested on IEs.
My repo is at :
https://github.com/jmettraux/raphael
Maybe this could inspire further work.
Many thanks for Raphael,
--
John Mettraux - http://jmettraux.wordpress.com
Clifford Heath
> I have a naive implementation of foreignObject for Raphael. It works
> as well with VML, though it gets me wondering : should I really name
> that foreignObject ?
> My use case is stealing divs and placing them in Raphael papers.
John,
I'm pretty keen to be able to do something like this.
Is your code limited to "stealing divs" or can you expose
a handle or callback where DOM objects can be created
inside the foreignObject?
I want to be able to position ordinary text input fields within
some Raphael shapes, such that the text boxes move when
the shapes move (or I move them manually), and when focus
is on a text object, and it's running on an iPad, the iPad keyboard
appears.
> works not that great on Webkit-based browsers. Not tested on IEs.
I don't see any problem in Chrome 8.0 or Safari 5.03.
What do you mean by "not that great"?
Clifford Heath.
John Mettraux
On Mon, Jan 10, 2011 at 05:19:17PM +1100, Clifford Heath wrote:
> On 18/11/2010, at 4:50 PM, John Mettraux wrote:
> >I have a naive implementation of foreignObject for Raphael. It
> >works as well with VML, though it gets me wondering : should I
> >really name that foreignObject ?
> >My use case is stealing divs and placing them in Raphael papers.
> >Animating those divs works well on Firefox (3.6.12 snoleo),
>
> Is your code limited to "stealing divs" or can you expose
> a handle or callback where DOM objects can be created
> inside the foreignObject?
Hello Clifford,
it's limited to "stealing", but nothing [should] prevent(s) you from doing
---8<---
// ...
var elt = document.getElementById('x');
var fo = paper.foreignObject(200 + dx, 200 + dy, 100, 45, elt);
// ...
$(elt).append($('<span>hello</span>'));
--->8---
> I want to be able to position ordinary text input fields within
> some Raphael shapes, such that the text boxes move when
> the shapes move (or I move them manually), and when focus
> is on a text object, and it's running on an iPad, the iPad keyboard
> appears.
>
> >works not that great on Webkit-based browsers. Not tested on IEs.
>
> I don't see any problem in Chrome 8.0 or Safari 5.03.
> What do you mean by "not that great"?
Sorry, I should have been more precise.
For static display it's OK, when animations are involved, it's OK on Firefox but on Webkit-based browsers it's not that clean. I haven't had a look at such animations on IE.
Best regards,
Clifford Heath
> On Mon, Jan 10, 2011 at 05:19:17PM +1100, Clifford Heath wrote:
>> Is your code limited to "stealing divs" or can you expose
>> a handle or callback where DOM objects can be created
>> inside the foreignObject?
> doing
Well, with respect, that doesn't work well when I want to dynamically
create an arbitrary number of foreign objects, one to embed inside
each Raphael shape. I mean, I can append an object somewhere in
the DOM then ask foreignObject to steal it, but why not just make it
possible to create them directly?
It should be simple to change foreignObject to survive being called with
no element, and to return an empty parent object I can append to.
Does that request make sense to you?
>>> works not that great on Webkit-based browsers. Not tested on IEs.
>> I don't see any problem in Chrome 8.0 or Safari 5.03.
>> What do you mean by "not that great"?
> For static display it's OK, when animations are involved, it's OK on
> Firefox but on Webkit-based browsers it's not that clean. I haven't
> had a look at such animations on IE.
Ahh, I see. I'll have to try it.
Clifford Heath.
John Mettraux
On Mon, Jan 10, 2011 at 05:47:32PM +1100, Clifford Heath wrote:
> On 10/01/2011, at 5:29 PM, John Mettraux wrote:
> >On Mon, Jan 10, 2011 at 05:19:17PM +1100, Clifford Heath wrote:
> >>Is your code limited to "stealing divs" or can you expose
> >>a handle or callback where DOM objects can be created
> >>inside the foreignObject?
> >it's limited to "stealing", but nothing [should] prevent(s) you
> >from doing
>
> Well, with respect, that doesn't work well when I want to dynamically
> create an arbitrary number of foreign objects, one to embed inside
> each Raphael shape. I mean, I can append an object somewhere in
> the DOM then ask foreignObject to steal it, but why not just make it
> possible to create them directly?
>
> It should be simple to change foreignObject to survive being called with
> no element, and to return an empty parent object I can append to.
> Does that request make sense to you?
It does. For when do you need that ?
Cheers,
Clifford Heath
>> It should be simple to change foreignObject to survive being called
>> with
>> no element, and to return an empty parent object I can append to.
>> Does that request make sense to you?
> It does. For when do you need that ?
Well, I'm not working on APRIMO right now <http://dataconstellation.com/aprimo/
>,
and I'm quite capable of making the changes myself anyhow, but I
thought that
it was a good idea to re-open the discussion here in case Dmitry had
an opinion on it.
If we can come up with a simple proposal that he approves, it might
get incorporated,
and that would be much more convenient than having to maintain a fork.
Clifford Heath.
Clifford Heath
When you said "It does", I thought you meant "it does make sense". :)
Just to follow up, I walked through your code and found it already
handles being called with no element. You can call foreignObject
and appendChild a new node afterward, or you can create a new
unattached node to pass to foreignObject. You probably knew that,
but it wasn't obvious to me.
Dmitry, can I ask that John Mettraux' patch be incorporated into R2.0?
Clifford Heath.
Dmitry Baranovskiy
two major issues:
1. In Opera scaling works really bad: scales text like bitmap, not
like vector.
2. In VML you can’t apply transformations at all.
Without transformations I found foreignObject on the edge of useless.
You can always overlay Raphaël surface with <div>.
Clifford Heath
> Not in 2.0. I was about to include foreignObject support, but found
> two major issues:
Ok. Neither of those issues would affect my application, and perhaps
many others, but it's your decision to make.
Will there at least be a decent plugin architecture, so I don't have
to maintain a fork?
> Without transformations I found foreignObject on the edge of useless.
> You can always overlay Raphaël surface with <div>.
Yes, but I need to move the divs together with graphic shapes and
that's easier if Raphael does it internally.
Clifford Heath.
Daniel Friesen
the matrix math in Raphael, it's possible to do transformations with
ie's filters.
There was one library that managed to do it.
http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/
~Daniel Friesen (Dantman, Nadir-Seen-Fire) [http://daniel.friesen.name]
On 11-01-11 02:39 AM, Dmitry Baranovskiy wrote:
> Not in 2.0. I was about to include foreignObject support, but found
> two major issues:
> 1. In Opera scaling works really bad: scales text like bitmap, not
> like vector.
> 2. In VML you can�t apply transformations at all.
>
> Without transformations I found foreignObject on the edge of useless.
> You can always overlay Rapha�l surface with<div>.