SVG components don't work in alpha.47

I have created Plunkers to demonstrate several issues.

First, selectors don't work correctly. My components use g.some-class as selector and those don't match anymore against a <g class="some-class">. When it's just a class selector .some-class it matches correctly. Fixed in 2.0.0-alpha.53

Second, when the selector doesn't work and there is a data binding defined, the error message is an InvalidCharacterError, because the parser tries to instantiate an @svg:g element with createElement to find the unknown property there. (Fixed in 2.0.0-alpha.49)

Third, even when everything is setup correctly and the component is instantiated, the actual child component's SVG isn't rendered (tested in Firefox, Chrome and Edge). There should be a black circle covering the red circle in the Plunker, it's there in the DOM, but wouldn't render. Fixed with a svg: prefix in the template

Fourth :)
ng-content doesn't work anymore when mixing HTML and SVG.

Parent: <child-component><g class="inner"></g></child-component>
Child: <svg><ng-content></ng-content></svg>
The ng-content remains empty. Fixed in 2.0.0-alpha.53.

~~Another Plunker~~

~~The <template> syntax for NgSwitch doesn't work in SVGs and fails with No provider for TemplateRef!.~~

~~Luckily, the asterisk-based one does.~~

Works in 2.0.0-alpha.50

+1 - SVG must work flawlessly with Angular 2, at least for me. I want to develop complex SVG-based apps, and I wish to be able to do it without hindrance with Angular 2. Considering growing popularity of SVG there should be ever more people like me.
Question: If I uderstand correctly, Angular 2 abstracts away rendering, so that different rendering engines could be used with it, right? Maybe switching to a different rendering library for SVG would solve some of the problems? What about using Rect.js to render SVG with Angular? Would React Virtual Dom and diffing offer the same or even better rendering performance improvement for SVG rendering as it does with the HTML DOM?

@jared83

@jared83 +1

fix(compiler): support properties on SVG elements

Sixth, that's new in 2.0.0-alpha.50.

Stand-alone, self-closing SVG elements are not supported as templates.

template: '<circle cx="50" cy="50" r="40" fill="black"/>'
results in

EXCEPTION: Template parse errors:
Only void and foreign elements can be self closed "circle" ("
  [ERROR ->]<circle cx="50" cy="50" r="40" fill="black"/>
  "): MyComponent@1:2

Also, I have updated the other plunkers to alpha.50 where applicable

probably because of #5591

<circle cx="50" cy="50" r="40" fill="black"/> without a <svg> parent does not work because the compiler has no way to know that this is a svg element.

Changing circle for svg:circle should solve this

fix(HtmlParser): allow ng-content elements regardless the namespace

Is the svg:-prefix required on the first element of the template, or on every (SVG-)element?

In either case, I'd appreciate a design where a designer's template can be integrated without changes to the code.

The svg: prefix is only ever required on the first element of your template when there is no <svg> parent. In all other cases it is optional (the namespace is inherited).

// not required (inherited)
<svg>
  <circle> 

// not required (inherited)
<svg>
  <template>
    <circle> 

// required (to differentiate a <circle> component from am svg element)
<svg:circle>

fix(HtmlParser): allow ng-content elements regardless the namespace

@vicb

Everything I had identified so far is resolved in 2.0.0-alpha.53.
If it's ok, I'll keep this issue open until I have made another attempt to port my current application beyond 2.0.0-alpha.46.

For others reading this, because it's not very obvious, let me stress what @vicb pointed out in his last comment: When you write an SVG template, you either need an <svg> element or an svg: prefix to switch the parser into SVG mode. Otherwise the elements (for example a bare g) are interpreted as HTML components and not SVG elements. The former won't render in browsers.

@Tragetaschen

@Tragetaschen thanks for having reported the different issues with SVG. I'm closing this issue for now as there does not seem to be any more identified issues. Feel free to re-open or create a new issue should you encounter more pb.

I have successfully ported my application to beta.0. Thanks for fixing everything!

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Navigation Menu

Repository navigation

SVG components don't work in alpha.47 #5547

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

SVG components don't work in alpha.47 #5547

Description

Activity

Tragetaschen commented on Dec 2, 2015

Tragetaschen commented on Dec 2, 2015

jared83 commented on Dec 2, 2015

drew-moore commented on Dec 4, 2015

Tragetaschen commented on Dec 9, 2015

Tragetaschen commented on Dec 9, 2015

zoechi commented on Dec 9, 2015

vicb commented on Dec 9, 2015

Tragetaschen commented on Dec 10, 2015

vicb commented on Dec 10, 2015

Tragetaschen commented on Dec 14, 2015

vicb commented on Dec 14, 2015

Tragetaschen commented on Dec 17, 2015

angular-automatic-lock-bot commented on Sep 7, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions