Question

我有一个坐标列表。我想以角度4动态渲染SVG图像。请帮助我解决。

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错误错误：未捕获（承诺中）：错误：模板解析错误：无法绑定到'cx'，因为它不是'：svg：circle'的已知属性。（“ click）=” addTag（$ event）“ * ngFor =”让drawLineList的drawLine“> ] [cx] =“ drawLine.x1” [cy] =“ drawLine.y1” r =“ 5” stroke =“ black” stroke-width =“ 3” fill =“ red”（dragStart）=“ o”）： ng：///GlobalSettingsModule/ImageCaptureComponent.html@251：36 无法绑定到'cy'，因为它不是'：svg：circle'的已知属性。（“ nt）” * ngFor =“让drawLineList的drawLine”> ] [cy] =“ drawLine.y1” r =“ 5” stroke =“ black” stroke-width =“ 3” fill =“ red”（dragStart）=“ onCricleDragStart（$ e”）：ng：/// GlobalSettingsModule /ImageCaptureComponent.html@251:55 无法绑定到'x1'，因为它不是'：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 无法绑定到'y1'，因为它不是'：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 无法绑定到“ x2”，因为它不是“：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 无法绑定到“ y2”，因为它不是“：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 无法绑定到'cx'，因为它不是'：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 无法绑定到'cy'，因为它不是'：svg：circle'的已知属性。（“ 0）;描边宽度：2；描边破折号：5,3” /> ] [cy] =“ drawLine.y1” r =“ 5” stroke =“ black” stroke-width =“ 3” fill =“ red”（dragStart）=“ onCricleDragStart（$ e”）：ng：/// GlobalSettingsModule /ImageCaptureComponent.html@253:55 错误：模板解析错误：无法绑定到'cx'，因为它不是'：svg：circle'的已知属性。（“ click）=” addTag（$ event）“ * ngFor =”让drawLineList的drawLine“> ] [cx] =“ drawLine.x1” [cy] =“ drawLine.y1” r =“ 5” stroke =“ black” stroke-width =“ 3” fill =“ red”（dragStart）=“ o”）： ng：///GlobalSettingsModule/ImageCaptureComponent.html@251：36 无法绑定到'cy'，因为它不是'：svg：circle'的已知属性。（“ nt）” * ngFor =“让drawLineList的drawLine”> ] [cy] =“ drawLine.y1” r =“ 5” stroke =“ black” stroke-width =“ 3” fill =“ red”（dragStart）=“ onCricleDragStart（$ e”）：ng：/// GlobalSettingsModule /ImageCaptureComponent.html@251:55 无法绑定到'x1'，因为它不是'：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 无法绑定到'y1'，因为它不是'：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 无法绑定到“ x2”，因为它不是“：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 无法绑定到“ y2”，因为它不是“：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 无法绑定到'cx'，因为它不是'：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 无法绑定到'cy'，因为它不是'：svg：circle'的已知属性。（“ 0）;描边宽度：2；描边破折号：5,3” /> ] [cy] =“ drawLine.y1” r =“ 5” stroke =“ black” stroke-width =“ 3” fill =“ red”（dragStart）=“ onCricleDragStart（$ e”）：ng：/// GlobalSettingsModule /ImageCaptureComponent.html@253:55 在语法错误（compiler.js：486）在TemplateParser.parse（compiler.js：24674）在JitCompiler._parseTemplate（compiler.js：34629）在JitCompiler._compileTemplate（compiler.js：34604）在eval（compiler.js：34505）在Set.forEach（）在JitCompiler._compileComponents（compiler.js：34505）在eval（compiler.js：34375）在Object.then（compiler.js：475）在JitCompiler._compileModuleAndComponents（compiler.js：34374）在resolvePromise（zone.js：814）在resolvePromise（zone.js：771）在评估时（zone.js：873）在ZoneDelegate.invokeTask（zone.js：421）在Object.onInvokeTask（core.js：4751）在ZoneDelegate.invokeTask（zone.js：420）在Zone.runTask（zone.js：188）在排水微任务队列（zone.js：595）

Answer 1

您可以通过为动态SVG创建组件来清理此问题。使用@Inputs发送数据。

您的圈子是否在使用指令？确保它们具有与@Inputs和[cx]匹配的[cy]。

Answer 2

一种方法是使用Elementref并修改其属性。

您的元素（在您的模板html中）：

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

修改您的元素：

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

请在此处查看示例实现：https://codesandbox.io/s/angular-juzdl?fontsize=14

如何在Angular 4

2 个答案: