How to create an SVG component dynamically in Angular2?

Question

I am creating a web application which uses SVG. I have created components consist of SVG element, and they are put into a root svg element. They have attribute

Answer 1

You're right about the namespacing issues keeping the g element from rendering as svg. Unfortunately, attaching the node as an svg element is the only way to feasibly get the component to namespace properly.

However, this doesn't mean this won't work. If you add the drag functionality as a directive on the g element in the template, it will be compiled with your component, and you can offset your logic into that directive. The top level svg will be namespaced correctly, and the template will inherit this accordingly.

import {Component, Input} from '@angular/core';

@Component({
  selector: 'svg:svg[customName]', // prevent this from hijacking other svg
  template: '...', // note the directive added here
  style: []
})
export class GComponent {

  constructor() { }

}

This may not be ideal, but until https://github.com/angular/angular/issues/10404 is resolved, there's not much of an alternative.