Skip to content
This repository was archived by the owner on Feb 22, 2018. It is now read-only.

Components doesn't work in SVG #987

Open
Pajn opened this issue May 1, 2014 · 3 comments
Open

Components doesn't work in SVG #987

Pajn opened this issue May 1, 2014 · 3 comments

Comments

@Pajn
Copy link

Pajn commented May 1, 2014

Components doesn't work in SVG. This will become quite a problem for apps that makes heavy usage of SVG if #959 is completed and merged before this is fixed. The template is added to the dom but never rendered to the screen.

SVG doesn't support shadow dom so the example uses master to support the useShadowDom flag.

Example:

@Component(
    selector: 'svgcomponent',
    template: '<circle ng-attr-cx="{{ cmp.x }}" ng-attr-cy="{{ cmp.y }}" r="20" fill="black" />',
    publishAs: 'cmp',
    useShadowDom: false
)
class SvgComponent {
    @NgAttr('x')
    int x;
    @NgAttr('y')
    int y;
}

Resulting dom:

<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg" class="ng-binding">
  <svgcomponent x="50" y="50" class="ng-binding">
    <circle ng-attr-cx="50" ng-attr-cy="50" r="20" fill="black" class="ng-binding" cx="50" cy="50" />
  </svgcomponent>
</svg>

This does work in AngularJS. Similar example (not mine): http://plnkr.co/edit/ORXN3I?p=preview

One thing that differs between AngularJS and AngularDart output is that
AngularJS replaces the custom element with the template where AngularDart
places the template inside the custom element and thus leaves a unknown
element for the SVG parser. I don't know if this is the issue or not, but it may
be worth looking into.

Here is a Stackoverflow question discussing the problem that previously were
in AngularJS with regards of custom elements and SVG
https://stackoverflow.com/questions/13641105/including-svg-template-in-angularjs-directive

@Pajn
Copy link
Author

Pajn commented May 1, 2014

I thought I should try with an attribute selector on a "real" svg element as well, giving the resulting dom:

<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg" class="ng-binding">
  <g svgcomponent="" x="50" y="50" class="ng-binding">
    <circle ng-attr-cx="50" ng-attr-cy="50" r="20" fill="black" class="ng-binding" cx="50" cy="50"></circle>
  </g>
</svg>

This have the same problem (not rendering to the screen). So my guess at the issue above
is not correct (or at least, not the only issue). Here I guess that the namespace problem
discussed on the above stackoverflow question may be to blame.

@Pajn
Copy link
Author

Pajn commented Aug 8, 2014

I thought I should try to fix this. I'm leaning against the namespace hypotheses.
My idea for API change were to add a namespaceUri parameter on Component decorator, however I can't find where Elements are actually created so that I can pass that parameter on.
Could anyone give me a hint or something?

@vicb
Copy link
Contributor

vicb commented Aug 8, 2014

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Development

Successfully merging a pull request may close this issue.

2 participants