Ember doesn't support SVG #5021

Closed
blesh opened this Issue Jun 13, 2014 · 11 comments

Projects

None yet

6 participants

@blesh
Contributor
blesh commented Jun 13, 2014

The problem(s)

  1. Ember creates DOM elements from HTML partials by wrapping them in a <div></div>, and getting the firstChildElement. The problem with this is all SVG nodes must be created in an <svg></svg> to function properly, as they are from a different name space.
  2. Ember relies on JQuery for class name changes and binding. JQuery uses className to set classes internally. This doesn't work for SVG elements, because the className property is an SVGAnimationString and behaves differently.

Proposed solution

  1. Expose wrapMap in main.js to allow external scripts to add all of the appropriate mappings for SVG elements.
  2. Create a third or second party script that then adds the appropriate mappings and patches JQuery to properly support SVG.

Current workarounds

Manually updating ember.js wrapMap to support the proper SVG element mappings, using jquery.svg.js and jquery.svgdom.js plugins to support SVG in jquery.

NOTE: jquery.svg.js and jquery.svgdom.js seemed to break when jquery was updated recently. So it seems to be a sub-optimal fix.

@machty
Member
machty commented Jun 13, 2014

paging @mixonic

@stefanpenner
Member

I believe this is something we wont consider supporting until HTMLBars lands..

@blesh
Contributor
blesh commented Jun 13, 2014

@stefanpenner you won't consider supporting SVG in HTMLBars?

Either way, I need to do this, because Netflix needs reusable Ember components that rely on SVG. So if we must maintain forks, we must, I guess.

@rwjblue
Member
rwjblue commented Jun 13, 2014

I believe he meant until.

@stefanpenner
Member

@blesh bug erik to get HTMLBars to land: https://github.com/ebryn?tab=contributions&period=weekly <-- lots of availability i see :trollface:

@blesh
Contributor
blesh commented Jun 13, 2014

Well, until then, the world keeps turning. :) I don't want to add all of the svg nodes to the wrapMap in Ember directly, I think that's invasive bloat. I'd like to just have a way to extend the wrapMappings somehow.

Either by exposing the wrapMap on a global like Ember.wrapMappings, or having Metamorph look for a configuration object on the window to mixin to the existing wrapMap.

@stefanpenner
Member

@blesh i believe that path will result in improvements, I would hate to see duplicate efforts hence my above stance. If a community member has time/energy and isn't interested in helping push htmlbars over the finish line. They are welcome to persue it.

@mixonic
Member
mixonic commented Jun 13, 2014

@blesh I've got SVG working in HTMLBars with this PR tildeio/htmlbars#41 but we're holding off on a merge until I take a stab at some issues to support compile("{{{someSVGElements}}}");. Similar to some of the same issues covered by wrapMap.

I can confidently say we will support SVG in HTMLBars. I don't see how you can have great, flexible support for SVG with just Handlebars, but there is surely a way to hack it. I do not think it is worth turning wrapMap into a public API to support it in the interim.

@stefanpenner
Member

@mixonic we can make it a private api, but expose it for hacking. This will provide an interim solution for those who are adventurous and need the feature.

we can throw many underscores at it.

@wagenet
Member
wagenet commented Aug 1, 2014

Closing since this will be fixed with HTMLBars.

@wagenet wagenet closed this Aug 1, 2014
@blesh
Contributor
blesh commented Aug 1, 2014

"HTMLBars"

html bars

@CNDW CNDW referenced this issue in machty/emblem.js Jan 24, 2015
Closed

Inline svg with emblem.js #153

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment