3

I've created a component that renders SVG, which works fine. However, I'd like to contain part of that SVG in a separate component. When I do this, however, the inner SVG doesn't get rendered - which I'm guessing (not knowing that much about SVG) is due to the component's tag not being a valid SVG element.

An example can be seen in this Plnkr. The text inside the inner-svg-example isn't displayed. However, when you edit the page in your developer tools and remove the inner-svg-example directive, it is shown.

Since Angular 2 deprecated the replace option on directives, what would be the best way to fix this?

Alexander Abakumov
  • 13,617
  • 16
  • 88
  • 129
Vincent
  • 4,876
  • 3
  • 44
  • 55
  • Note: I'm using Angular 2 because I want to play with that, so not using that is not an option. I'm also not using D3, since the generated SVG is not a rendition of data. I'd like to be able to declaratively declare the structure of the SVG, so Raphael.js isn't an option either. – Vincent Aug 25 '15 at 18:04
  • I'm not sure of this, but it might be relevant https://github.com/angular/angular/issues/1632. If that doesn't answer your question you should create an issue. – Eric Martinez Aug 25 '15 at 20:54
  • Thanks Eric, that does appear to be my use-case. I suppose "not actionable" means they're not going to support it. – Vincent Aug 26 '15 at 08:35
  • @Vincent [This blog post](http://blog.500tech.com/svg-in-angular-2/) might help you – Bhavik Jun 09 '16 at 15:31

1 Answers1

3

Instead of using element selector 

<inner-svg-example></inner-svg-example>

using it as an attribute selector on some valid svg tag like g solves it 

<g inner-svg-example></g>

More over it is required to specify svg: in front of the svg element which is supposed to be added, in your case it is 

<text>...</text>

to 

<svg:text>...</svg:text>

Based on this blog post
With help from @John's answer on another similar question
Demo Plnkr

Your plnkr was using earlier versions of angular2, change log for support of svg

Community
  • 1
  • 1
Bhavik
  • 4,836
  • 3
  • 30
  • 45
  • Note that the namespace "svg:" might be required, because otherwise Angular won't recognize the element as an SVG element and throw the error Only void and foreign elements can be self closed "xy" (e.g. path) at you. – moritz.vieli Jul 18 '21 at 10:42