How to dynamically render svg using ngFor in angular 4

Question

I have a coordinate list. I want to dynamically render the SVG image in angular 4. I am Getting below error. please help me to resolve.

HTML

 <svg height="100%" width="100%" (click)="addTag($event)" *ngFor="let drawLine of drawLineList">
        <circle appTagDraggable [cx]="drawLine.x1" [cy]="drawLine.y1" r="5" stroke="black" stroke-width="3" fill="red" (dragStart)="onCricleDragStart($event)" (dragMove)="onCricleDragMove($event)" (dragEnd)="onCricleDragEnd($event)" />
        <line [x1]="drawLine.x1" [y1]="drawLine.y1" [x2]="drawLine.x2" [y2]="drawLine.y2" style="stroke:rgb(255,0,0);stroke-width:2;stroke-dasharray: 5,3" />
        <circle appTagDraggable [cx]="drawLine.x1" [cy]="drawLine.y1" r="5" stroke="black" stroke-width="3" fill="red" (dragStart)="onCricleDragStart($event)" (dragMove)="onCricleDragMove($event)" (dragEnd)="onCricleDragEnd($event)" />
 </svg>

core.js:1449 ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'cx' since it isn't a known property of ':svg:circle'. ("click)="addTag($event)" *ngFor="let drawLine of drawLineList"> ][cx]="drawLine.x1" [cy]="drawLine.y1" r="5" stroke="black" stroke-width="3" fill="red" (dragStart)="o"): ng:///GlobalSettingsModule/ImageCaptureComponent.html@251:36 Can't bind to 'cy' since it isn't a known property of ':svg:circle'. ("nt)" *ngFor="let drawLine of drawLineList"> ][cy]="drawLine.y1" r="5" stroke="black" stroke-width="3" fill="red" (dragStart)="onCricleDragStart($e"): ng:///GlobalSettingsModule/ImageCaptureComponent.html@251:55 Can't bind to 'x1' since it isn't a known property of ':svg:line'. ("t)" (dragMove)="onCricleDragMove($event)" (dragEnd)="onCricleDragEnd($event)" /> ][x1]="drawLine.x1" [y1]="drawLine.y1" [x2]="drawLine.x2" [y2]="drawLine.y2" style="stroke:rgb(255,0,0"): ng:///GlobalSettingsModule/ImageCaptureComponent.html@252:18 Can't bind to 'y1' since it isn't a known property of ':svg:line'. ("ricleDragMove($event)" (dragEnd)="onCricleDragEnd($event)" /> ][y1]="drawLine.y1" [x2]="drawLine.x2" [y2]="drawLine.y2" style="stroke:rgb(255,0,0);stroke-width:2;st"): ng:///GlobalSettingsModule/ImageCaptureComponent.html@252:37 Can't bind to 'x2' since it isn't a known property of ':svg:line'. ("t)" (dragEnd)="onCricleDragEnd($event)" /> ][x2]="drawLine.x2" [y2]="drawLine.y2" style="stroke:rgb(255,0,0);stroke-width:2;stroke-dasharray: 5,3"): ng:///GlobalSettingsModule/ImageCaptureComponent.html@252:56 Can't bind to 'y2' since it isn't a known property of ':svg:line'. ("icleDragEnd($event)" /> ][y2]="drawLine.y2" style="stroke:rgb(255,0,0);stroke-width:2;stroke-dasharray: 5,3" /> <"): ng:///GlobalSettingsModule/ImageCaptureComponent.html@252:75 Can't bind to 'cx' since it isn't a known property of ':svg:circle'. ("="stroke:rgb(255,0,0);stroke-width:2;stroke-dasharray: 5,3" /> ][cx]="drawLine.x1" [cy]="drawLine.y1" r="5" stroke="black" stroke-width="3" fill="red" (dragStart)="o"): ng:///GlobalSettingsModule/ImageCaptureComponent.html@253:36 Can't bind to 'cy' since it isn't a known property of ':svg:circle'. ("0);stroke-width:2;stroke-dasharray: 5,3" /> ][cy]="drawLine.y1" r="5" stroke="black" stroke-width="3" fill="red" (dragStart)="onCricleDragStart($e"): ng:///GlobalSettingsModule/ImageCaptureComponent.html@253:55 Error: Template parse errors: Can't bind to 'cx' since it isn't a known property of ':svg:circle'. ("click)="addTag($event)" *ngFor="let drawLine of drawLineList"> ][cx]="drawLine.x1" [cy]="drawLine.y1" r="5" stroke="black" stroke-width="3" fill="red" (dragStart)="o"): ng:///GlobalSettingsModule/ImageCaptureComponent.html@251:36 Can't bind to 'cy' since it isn't a known property of ':svg:circle'. ("nt)" *ngFor="let drawLine of drawLineList"> ][cy]="drawLine.y1" r="5" stroke="black" stroke-width="3" fill="red" (dragStart)="onCricleDragStart($e"): ng:///GlobalSettingsModule/ImageCaptureComponent.html@251:55 Can't bind to 'x1' since it isn't a known property of ':svg:line'. ("t)" (dragMove)="onCricleDragMove($event)" (dragEnd)="onCricleDragEnd($event)" /> ][x1]="drawLine.x1" [y1]="drawLine.y1" [x2]="drawLine.x2" [y2]="drawLine.y2" style="stroke:rgb(255,0,0"): ng:///GlobalSettingsModule/ImageCaptureComponent.html@252:18 Can't bind to 'y1' since it isn't a known property of ':svg:line'. ("ricleDragMove($event)" (dragEnd)="onCricleDragEnd($event)" /> ][y1]="drawLine.y1" [x2]="drawLine.x2" [y2]="drawLine.y2" style="stroke:rgb(255,0,0);stroke-width:2;st"): ng:///GlobalSettingsModule/ImageCaptureComponent.html@252:37 Can't bind to 'x2' since it isn't a known property of ':svg:line'. ("t)" (dragEnd)="onCricleDragEnd($event)" /> ][x2]="drawLine.x2" [y2]="drawLine.y2" style="stroke:rgb(255,0,0);stroke-width:2;stroke-dasharray: 5,3"): ng:///GlobalSettingsModule/ImageCaptureComponent.html@252:56 Can't bind to 'y2' since it isn't a known property of ':svg:line'. ("icleDragEnd($event)" /> ][y2]="drawLine.y2" style="stroke:rgb(255,0,0);stroke-width:2;stroke-dasharray: 5,3" /> <"): ng:///GlobalSettingsModule/ImageCaptureComponent.html@252:75 Can't bind to 'cx' since it isn't a known property of ':svg:circle'. ("="stroke:rgb(255,0,0);stroke-width:2;stroke-dasharray: 5,3" /> ][cx]="drawLine.x1" [cy]="drawLine.y1" r="5" stroke="black" stroke-width="3" fill="red" (dragStart)="o"): ng:///GlobalSettingsModule/ImageCaptureComponent.html@253:36 Can't bind to 'cy' since it isn't a known property of ':svg:circle'. ("0);stroke-width:2;stroke-dasharray: 5,3" /> ][cy]="drawLine.y1" r="5" stroke="black" stroke-width="3" fill="red" (dragStart)="onCricleDragStart($e"): ng:///GlobalSettingsModule/ImageCaptureComponent.html@253:55 at syntaxError (compiler.js:486) at TemplateParser.parse (compiler.js:24674) at JitCompiler._parseTemplate (compiler.js:34629) at JitCompiler._compileTemplate (compiler.js:34604) at eval (compiler.js:34505) at Set.forEach () at JitCompiler._compileComponents (compiler.js:34505) at eval (compiler.js:34375) at Object.then (compiler.js:475) at JitCompiler._compileModuleAndComponents (compiler.js:34374) at resolvePromise (zone.js:814) at resolvePromise (zone.js:771) at eval (zone.js:873) at ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4751) at ZoneDelegate.invokeTask (zone.js:420) at Zone.runTask (zone.js:188) at drainMicroTaskQueue (zone.js:595)

Answer 1

You could clean this up by creating a component for your dynamic SVG. Use @Inputs to send in the data.

Are your circles using a directive? Make sure they have matching @Inputs to [cx] and [cy] .

Answer 2

One way of doing would be using Elementref and modifying its attributes.

Your element (in your template html):

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle id="circle" #circle r="20" fill="red" />
</svg>

Modify your element:

@ViewChild("circle") circle: ElementRef;
ngAfterViewInit(): void {
   this.circle.nativeElement.setAttribute("cx", this.draw.circle.cx);
   this.circle.nativeElement.setAttribute("cy", this.draw.circle.cy);
}

Please view example implementation here: https://codesandbox.io/s/angular-juzdl?fontsize=14