如何将 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()
  }
}

这是应用程序组件

 <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";

Answer 2

您可以使用 getSVGString 方法轻松获取任何图表的 SVG 字符串：

revenueChart.getSVGString()

要了解更多信息，请参阅 - https://www.fusioncharts.com/dev/common-use-cases/get-svg-representation-of-a-chart