Html 尝试以角度显示后端发送的SVG

我试图显示我从API接收到的SVG图像，它是一个巨大的数组，充满了各种数据，其中之一就是SVG属性

它看起来像是原始形式的：

"svg": "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->\n<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\t viewBox=\"0 0 500 500\" style=\"enable-background:new 0 0 500 500;\" xml:space=\"preserve\">\n<style type=\"text/css\">\n\t.st0{fill:#8C3A2D;}\n</style>\n<rect class=\"st0\" width=\"500\" height=\"500\"/>\n</svg>"

“svg”：“\n\n\n\t.st0{fill:#8C3A2D；}\n\n\n”

我尝试对此数据使用以下HTML格式：

<div (click)="clickItem(item)" *ngIf="item" class="smallSquare" [innerHTML]="item.svg | safeHtml"></div>

正如您所看到的，我甚至添加了safeHtml管道以通过安全限制，但我得到的只是一个空白方块，仅此而已。我似乎不知道我在这里错过了什么

如果我在控制台中检查元素，我会看到以下形式的文件：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#462928;}
</style>
<rect class="st0" width="500" height="500"></rect>
</svg>

.st0{fill:#462928；}

看起来一切都很好，但遗憾的是我没有看到任何预览，取而代之的是，我有一个没有任何颜色的空白方块

---

该问题是由使用SVG图标堆叠样式引起的。多个SVG使用相同的样式class=“st0”返回，因此，颜色相互叠加。

看起来像。st0{fill:#5B4085；}，由于某种原因，此部分不起作用