SVG child element does not render without svg namespace

[SteveVanOpstal]

#1632 describes that it is possible to have SVG child elements via an attribute selector.
So I expected the following to work. However, it does not render the circle:

// Issue

@Component({
    selector: 'g[issue-child]',
    template: `<circle cx="50" cy="50" r="40" fill="blue"></circle>`
})
class IssueChildComponent {
  constructor() {}
}

@Component({
    selector: 'issue',
    directives: [IssueChildComponent]
    template: `
    <svg xlink="http://www.w3.org/1999/xlink" style="border: 1px solid">
        <g issue-child/>
    </svg>`
})
class IssueComponent {
  constructor() {}
}

I get it working by adding the SVG namespace but this works counter-intuitive in my opinion:

@Component({
    selector: 'g[fix-child]',
    template: `<svg:circle cx="50" cy="50" r="40" fill="red"></svg:circle>`
})
class FixChildComponent {
  constructor() {}
}

@Component({
    selector: 'fix',
    directives: [FixChildComponent]
    template: `
    <svg xlink="http://www.w3.org/1999/xlink" style="border: 1px solid">
         <g fix-child/>
    </svg>`
})
class FixComponent {
  constructor() {}
}

plnkr

[klinki]

I have the same problem. I would also expect non-prefixed elements to work.

[tomwanzek]

I experienced the same issue, when writing reusable D3 components to handle data visualizations that are nestable within parent components, which already contain an <svg>.

A couple of comments to add on though.

When writing the D3 reusable as an Angular 2 attribute directive, the described issue does not occur, i.e. the namespace prefixing is not necessary. In this scenario, I can accomplish all the DOM rendering with D3 after grabbing the injected elementRef.nativeElement. However, the major limitation is that it is not possible to add styles to an Angular 2 Directive.

So back to trying the same with an Angular 2 component. When considering styles for the component, something peculiar happens. The styles are ignored within the DOM inserted with the attribute selector component. However, "forcing them down" works.

I.e. having the following in the component stylesheet unexpectedly fails to apply:

.d3chart-background {
  fill: rgba(250, 250, 250, 0.8);
  border-radius: 3px;
}

Forcing it down with a deep selector works:

>>> .d3chart-background {
  fill: rgba(250, 250, 250, 0.8);
  border-radius: 3px;
}

Oddly enough, applying the host selector also works??? In an awkward way it seems

:host .d3chart-background {
  fill: rgba(250, 250, 250, 0.8);
  border-radius: 3px;
}

[vicb]

The prefix is the only way we can know if it is an svg element when there is no parent.
Closing as working as expected.

[angular-automatic-lock-bot]

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.}