Imgsrc不會在Angular中渲染SVG

我有來自后端的 SVG 檔案，當我嘗試在前端 angular(v11) 應用程式中顯示它時，它不會呈現并且看起來很損壞

這是我的代碼..

 <div fxLayout="column" *ngFor="let svgFile of activePageDataChunk">
<img src="data:image/svg xml,svgFile">

這就是它的樣子

這是svg里面的內容

<svg xmlns="http://www.w3.org/2000/svg" width="420mm" height="297mm">
  <rect width="100%" height="100%" id="paperBorder" fill="#FFF"/>
  <svg id="margins" x="5mm" y="5mm">
    <svg x="38.200050592422485mm" overflow="visible">
      <svg class="level_marker" x="0mm" y="28.509538173675537mm" overflow="visible">
        <text class="level_marker_text" font-size="12" y="-6" x="6mm" text-anchor="start"> 0.000</text>
        <line x1="0" y1="0" x2="20mm" y2="0" fill="none" stroke="#231f20" stroke-miterlimit="10"/>
        <line x1="0" y1="0" x2="2.5mm" y2="2.5mm" fill="none" stroke="#231f20" stroke-miterlimit="10"/>
        <line x1="2.5mm" y1="2.5mm" x2="5mm" y2="0mm" fill="none" stroke="#231f20" stroke-miterlimit="10"/>
      </svg>
      <svg class="level_marker" x="0mm" y="-2.490461826324463mm" overflow="visible">
        <text class="level_marker_text" font-size="12" y="-6" x="6mm" text-anchor="start"> 3.100</text>
        <line x1="0" y1="0" x2="20mm" y2="0" fill="none" stroke="#231f20" stroke-miterlimit="10"/>
        <line x1="0" y1="0" x2="2.5mm" y2="2.5mm" fill="none" stroke="#231f20" stroke-miterlimit="10"/>
        <line x1="2.5mm" y1="2.5mm" x2="5mm" y2="0mm" fill="none" stroke="#231f20" stroke-miterlimit="10"/>
      </svg>
    </svg>
  </svg>
  <svg x="0mm" y="195mm" width="83mm" height="22mm">
    <rect width="100%" height="100%" fill="none" stroke="#666"/>
    <text x="1mm" y="2.5mm" font-size="2mm" font-family="DINPro-Light, DIN Pro" font-weight="300" style="isolation:isolate"/>
    <text x="1mm" y="7.5mm" font-size="4.5mm" font-family="DINPro, DIN Pro" style="isolation:isolate"/>
  </svg>
  <svg x="0mm" y="247mm" width="27.5mm" height="10mm">
    <rect width="100%" height="100%" fill="none" stroke="#666"/>
    <text x="1mm" y="2.5mm" font-size="2mm" font-family="DINPro-Light, DIN Pro" font-weight="300" style="isolation:isolate">DATE</text>
    <text x="1mm" y="7.5mm" font-size="4.5mm" font-family="DINPro, DIN Pro" style="isolation:isolate">2.6.2022</text>
  </svg>
  <svg x="0mm" y="257mm" width="83mm" height="10mm">
    <rect width="100%" height="100%" fill="none" stroke="#666"/>
    <text x="1mm" y="2.5mm" font-size="2mm" font-family="DINPro-Light, DIN Pro" font-weight="300" style="isolation:isolate">SCALE</text>
    <text x="50%" y="50%" alignment-baseline="central" text-anchor="middle" font-size="4.5mm" font-family="DINPro, DIN Pro" style="isolation:isolate">1:100</text>
  </svg>
  <svg x="0mm" y="277mm" width="83mm" height="10mm">
    <rect width="100%" height="100%" fill="none" stroke="#666"/>
    <text x="1mm" y="2.5mm" font-size="2mm" font-family="DINPro-Light, DIN Pro" font-weight="300" style="isolation:isolate">DRAWN BY</text>
    <text x="1mm" y="7.5mm" font-size="4.5mm" font-family="DINPro, DIN Pro" style="isolation:isolate"/>
  </svg>
</svg>

uj5u.com熱心網友回復：

正如評論中所討論的，提供的資料是一個 SVG 元素，因此您不能將值系結到<img>元素的 src。

有兩種方法可以做到：

1. 將 SVG 元素轉換為 base64 字串，以便您可以使用<img>元素。
2. 使用 .將 SVG 元素系結到 HTML DOMSanitizer。

答案 1

要將 SVG 檔案轉換為 base64 字串，請將此問題歸功于：Convert inline SVG to Base64 string

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

constructor(private _sanitizer: DomSanitizer) {}

getSVGImageUrl(image) {
  let base64string = btoa(image);
  return this._sanitizer.bypassSecurityTrustResourceUrl(
    `data:image/svg xml;base64,${base64string}`
  );
}

<div *ngFor="let svgFile of activePageDataChunk">
  <img [src]="getSVGImageUrl(svgFile)" />
</div>

示例 StackBlitz 演示（答案 1）

答案 2：

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

constructor(private _sanitizer: DomSanitizer) {}

getSVGImage(image) {
  return this._sanitizer.bypassSecurityTrustHtml(`${image}`);
}

<div *ngFor="let svgFile of activePageDataChunk">
  <div [innerHTML]="getSVGImage(svgFile)"></div>
</div>

示例 StackBlitz 演示（答案 2）

參考

警告：清理不安全的樣式值網址（類似問題）

DomSanitizerbypassSecurityTrustResourceUrl()

DomSanitizerbypassSecurityTrustHtml()

標籤：有角度的 svg

上一篇：隨著str長度的變化，重新居中文本位置

下一篇：在地圖中使用SVG作為React組件