通过以下链接后
我明白我们不应该直接操作 DOM。于是我开始探索使用angular 4的Renderer2。
所以我开始编写一些代码来将 svg 添加到 DOM 中。以下是我的代码片段。
HTML代码
<div class="row">
<div class="col-12">
<div #myBarGraph id="host"></div>
</div>
</div>
Component.ts
export class BarGraphComponent implements OnInit {
host:any;
svg:any;
@ViewChild('myBarGraph') myBarGraph:ElementRef;
constructor(private renderer:Renderer2) { }
ngOnInit() {
//some logic
}
// called on some drop down selection
teamSelection(){
//some logic
this.host = this.mybarGraph.nativeElement;
buildSVG();
}
buildSVG():void {
this.svg = this.renderer.createElement('svg');
this.renderer.setAttribute(this.svg,'width','600');
this.renderer.setAttribute(this.svg,'height','400');
this.renderer.setAttribute(this.svg,'background-color','blue');
this.renderer.appendChild(this.host,this.svg);
}
}
上面的代码能够将 svg 元素添加到 DOM 中。但令我惊讶的是,它实际上没有显示 svg 元素!
我确实引用了以下问题
- Angular2 Renderer: Svg rect is rendered but not showing in page
- Angular2 does not render SVG in runtime
但到目前为止我找不到合适的答案。
正如你在上面看到的,svg存在于DOM中,但它没有显示在网页中。 任何帮助将不胜感激。
最佳答案
this.renderer.createElement('svg')
创建 HTML 元素而不是 SVGElement 因为 Angular 不知道你想要 svg:svg。
尝试使用 this.renderer.createElement('svg', 'svg')
,其中第二个参数是命名空间。每个 svg 元素都必须以相同的方式创建,例如:
let rect = this.renderer.createElement('rect', 'svg')
this.renderer.appendChild(svg, rect)
关于javascript - Renderer2 在使用 d3 js 时不呈现 SVG 元素 - Angular 4,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47479528/