[FlexJS][SVG] foreignObject

[Harbs <ha...@gmail.com>]

I’d like to be able to enable adding HTML elements to SVG in FlexJS.

There is a mechanism for doing so, namely foreignObject.[1]

There’s two ways we can do this:

1. We can explicitly create a foreignElement class and only allow SVG containers to accept SVG GraphicShapes or ForeignElements.
2. We can implicitly wrap standard HTML elements in foreignElement when it’s added to an SVG container.

The other piece of this question is how to create the API in a way that it’ll work with canvas as well.

Canvas can not truly accept a DOM element, but it can accept an image with SVG as a data URL.[2]

I’m not sure how approach #1 will work for canvas. Maybe we can have a “DOMWrapper” class which would be a foreignObject in SVG and an Image which implicitly wraps everything in foreignObject and SVG for canvas.

I’m not sure how #2 will work with the rest of FlexJS.

Thoughts?

[1]https://developer.mozilla.org/en/docs/Web/SVG/Element/foreignObject
[2]https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

Re: [FlexJS][SVG] foreignObject

[Alex Harui <ah...@adobe.com>]

On 7/24/16, 12:38 AM, "Harbs" <ha...@gmail.com> wrote:

>I’d like to be able to enable adding HTML elements to SVG in FlexJS.
>
>There is a mechanism for doing so, namely foreignObject.[1]
>
>There’s two ways we can do this:
>
>1. We can explicitly create a foreignElement class and only allow SVG
>containers to accept SVG GraphicShapes or ForeignElements.
>2. We can implicitly wrap standard HTML elements in foreignElement when
>it’s added to an SVG container.
>
>The other piece of this question is how to create the API in a way that
>it’ll work with canvas as well.
>
>Canvas can not truly accept a DOM element, but it can accept an image
>with SVG as a data URL.[2]
>
>I’m not sure how approach #1 will work for canvas. Maybe we can have a
>“DOMWrapper” class which would be a foreignObject in SVG and an Image
>which implicitly wraps everything in foreignObject and SVG for canvas.
>
>I’m not sure how #2 will work with the rest of FlexJS.
>
>Thoughts?

Can we work from code examples first?  IMO, the goal is replaceable
libraries at compile-time, not necessarily runtime, and that doesn't
always mean the APIs have to have the same parameter types.  You might
have to tweak import statements or MXML manifest URIs when replacing
libraries.  It might be worth it to get better type-safety within the
implementation, and not carry around extra wrappings.

-Alex