Question

我使用angular-cli创建了一个Angular 6项目。我安装了svg.js以及svg.drggable.js。我另外创建了一个名为“ draw”的新组件。

我想使用svg.js创建一个简单的矩形。为了在Javascript中执行此操作，HTML文件需要具有div属性的div元素，例如“画画”。但是，当我将div元素放入html文件中时，不会创建矩形。在app-component中添加div-element即可解决此问题。

我不确定这是否与dom元素的层次结构有关。但是如果是这样，甚至可以将svg.js与新组件一起使用吗？

draw.component.html如下所示：
<div id="drawing"></div>

draw.component.ts

import { Component, OnInit } from '@angular/core';
import * as SVG from 'svg.js';
import * as drag from 'svg.draggable.js';


@Component({
  selector: 'app-draw',
  templateUrl: './draw.component.html',
  styleUrls: ['./draw.component.css']
})



export class DrawComponent implements OnInit {
  
  

   rect = SVG("drawing").size(500,500).rect(300,30).fill('FFBbAA').move(20,20)
  
   
  
  
  constructor() { }

  ngOnInit() {
  }
  
  
}

app.component.ts

<app-draw> </app-draw>

Answer 1

您可以使用ngx-svg库，它将完全满足您的需求。请查看svg-rect文档。

如何在angular 6项目中使用svg.js和插件

1 个答案: