如何将 svg 文本渲染到 angular 8 中的 dom 元素

Question

我有一个 fusionchart 图，当用户单击获取 svg 字符串按钮时，我想从中获取图像并显示在同一 html 页面中。

我正在从 this.chart.getSVGString() 获取 svg 文本，但我如何在 dom.

中呈现它

    import { Component } from "@angular/core";
`  `import { dataSource } from "./dataSource";
    @Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
export class AppComponent {
  chart: any;
  svgPath:any;
  dataSource: dataSource = {
    chart: {
      caption: "Countries With Most Oil Reserves [2017-18]",
      subCaption: "In MMbbl = One Million barrels",
      xAxisName: "Country",
      yAxisName: "Reserves (MMbbl)",
      numberSuffix: "K",
      theme: "fusion"
    },
    data: [
      { label: "Venezuela", value: "290" },
      { label: "Saudi", value: "260" },
      { label: "Canada", value: "180" },
      { label: "Iran", value: "140" },
      { label: "Russia", value: "115" },
      { label: "UAE", value: "100" },
      { label: "US", value: "30" },
      { label: "China", value: "30" }
    ]
  };
  initialized($event) {
    this.chart = $event.chart; // Storing the chart instance
  }

  getSVG() {
    console.log(this.chart.getSVGString());
    this.svgPath = this.chart.getSVGString()
  }
}

这是app.component

 <fusioncharts
  width="500"
  height="400"
  type="column2d"
  dataFormat="json"
  [dataSource]="dataSource"
  (initialized)="initialized($event)"
>
  >
</fusioncharts>
<div [innerHTML] = "svgPath"></div>
<button (click)="getSVG()">Get SVG String</button>

这是app.html

https://codesandbox.io/s/angular-forked-b27eg?file=/src/app/app.component.html:0-256

Answer 1

您需要绕过默认的 DOM 清理才能使其正常工作，请参考以下代码

const data = this.chart.getSVGString();
this.svgPath = this.domSanitizer.bypassSecurityTrustHtml(data);

像这样导入 DomSanitizer：

import { DomSanitizer } from "@angular/platform-browser";

如何将 svg 文本渲染到 angular 8 中的 dom 元素

how to render svg text to the dom element in angular 8

javascript

fusioncharts

angular