尝试在 Angular 中显示后端发送的 SVG答案

【问题标题】：Trying to display backend sent SVG in Angular尝试在 Angular 中显示后端发送的 SVG
【发布时间】：2021-08-17 13:08:07
【问题描述】：

我正在尝试显示从 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>"

我尝试对这些数据使用以下 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>

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

enter image description here

【问题讨论】：

看起来像 .st0{fill:#5B4085;}，这部分由于某种原因无法正常工作

标签： html angular xml svg

【解决方案1】：

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

【讨论】：