我的 <svg> 标签没有在 Angular 中使用 *ngFor 在 DOM 中呈现答案

【问题标题】：My <svg> tag is not getting rendered in DOM using *ngFor in Angular我的 <svg> 标签没有在 Angular 中使用 *ngFor 在 DOM 中呈现
【发布时间】：2022-01-10 09:25:21
【问题描述】：

我想改变悬停时的图标颜色

我无法通过将图标添加为图像来做到这一点

我可以通过在 css 中使用带有 svg:hover{fill: red;} 的 svg 标签来做到这一点，但我的 svg 标签没有使用 *ngFor 循环在 dom 中呈现

我不能渲染 <path d="{{element.path}}" /> s 一些 svg 有多个路径元素

side-panel.component.html

<div class="side-panel mt-2">
  <div
    class="elements d-flex justify-content-start"
    *ngFor="let element of elements"
  >
<!-- <div class="icon p-2"><img src="{{ element.icon }}" alt="" /></div> -->
    <div>{{ element.svg }}</div>
    <div class="description p-2">{{ element.description }}</div>
  </div>
</div>

side-panel.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-side-panel',
  templateUrl: './side-panel.component.html',
  styleUrls: ['./side-panel.component.css'],
})
export class SidePanelComponent implements OnInit {
  constructor() {}

  elements = [
    {
      icon: '../../../assets/sidebar-icons/1.svg',
      description: 'Tableau de bord',
      svg: `<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3186 2.6664C11.2439 1.77787 9.7561 1.77787 8.68145 2.6664L3.29539 7.11964C2.80425 7.52572 2.5 8.16727 2.5 8.8663V15.8109C2.5 17.0784 3.45214 18 4.5 18H6.5V14.7478C6.5 12.4927 8.23415 10.5587 10.5 10.5587C12.7659 10.5587 14.5 12.4927 14.5 14.7478V18H16.5C17.5479 18 18.5 17.0784 18.5 15.8109V8.8663C18.5 8.16727 18.1958 7.52572 17.7046 7.11965L12.3186 2.6664ZM13.593 1.12502L18.979 5.57827C19.9494 6.38059 20.5 7.59705 20.5 8.8663V15.8109C20.5 18.066 18.7659 20 16.5 20H14.5C13.3954 20 12.5 19.1046 12.5 18V14.7478C12.5 13.4803 11.5479 12.5587 10.5 12.5587C9.45214 12.5587 8.5 13.4803 8.5 14.7478V18C8.5 19.1046 7.60457 20 6.5 20H4.5C2.23415 20 0.5 18.066 0.5 15.8109V8.8663C0.5 7.59705 1.05059 6.38059 2.02097 5.57827L7.40703 1.12502C9.22126 -0.375008 11.7787 -0.375006 13.593 1.12502Z" fill="#020A26"/>
</svg>`,
    },
    {
      icon: '../../../assets/sidebar-icons/2.svg',
      description: 'Dossiers',
      svg: `<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 2C3.39543 2 2.5 2.89543 2.5 4V16C2.5 17.1046 3.39543 18 4.5 18H16.5C17.6046 18 18.5 17.1046 18.5 16V7.375C18.5 6.27043 17.6046 5.375 16.5 5.375H11.5704C10.5673 5.375 9.63061 4.8737 9.07422 4.0391L8.01168 2.4453C7.82622 2.1671 7.51399 2 7.17963 2H4.5ZM0.5 4C0.5 1.79086 2.29086 0 4.5 0H7.17963C8.18269 0 9.11939 0.501303 9.67578 1.3359L10.7383 2.9297C10.9238 3.2079 11.236 3.375 11.5704 3.375H16.5C18.7091 3.375 20.5 5.16586 20.5 7.375V16C20.5 18.2091 18.7091 20 16.5 20H4.5C2.29086 20 0.5 18.2091 0.5 16V4Z" fill="#020A26"/>
</svg>`,
    },
    {
      icon: '../../../assets/sidebar-icons/3.svg',
      description: 'Session',
      svg: `<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 6C0.5 3.23858 2.73858 1 5.5 1H15.5C18.2614 1 20.5 3.23858 20.5 6V15C20.5 17.7614 18.2614 20 15.5 20H5.5C2.73858 20 0.5 17.7614 0.5 15V6ZM5.5 3C3.84315 3 2.5 4.34315 2.5 6V15C2.5 16.6569 3.84315 18 5.5 18H15.5C17.1569 18 18.5 16.6569 18.5 15V6C18.5 4.34315 17.1569 3 15.5 3H5.5Z" fill="#020A26"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 0C7.05228 0 7.5 0.447715 7.5 1V4C7.5 4.55228 7.05228 5 6.5 5C5.94772 5 5.5 4.55228 5.5 4V1C5.5 0.447715 5.94772 0 6.5 0Z" fill="#020A26"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 8C4.5 7.44772 4.94772 7 5.5 7H15.5C16.0523 7 16.5 7.44772 16.5 8C16.5 8.55228 16.0523 9 15.5 9H5.5C4.94772 9 4.5 8.55228 4.5 8Z" fill="#020A26"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 15C13.5 14.4477 13.9477 14 14.5 14H15.5C16.0523 14 16.5 14.4477 16.5 15C16.5 15.5523 16.0523 16 15.5 16H14.5C13.9477 16 13.5 15.5523 13.5 15Z" fill="#020A26"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5 0C15.0523 0 15.5 0.447715 15.5 1V4C15.5 4.55228 15.0523 5 14.5 5C13.9477 5 13.5 4.55228 13.5 4V1C13.5 0.447715 13.9477 0 14.5 0Z" fill="#020A26"/>
</svg>`,
    },
  ];
  ngOnInit(): void {}
}

【问题讨论】：

在普通 HTML 中尝试相同的 SVG，它会被渲染吗？
@kiner_shah 是的，已经尝试过了...当我复制粘贴相同的标签而不是 *ngFor 时，它会正确呈现
@Rohan 您需要像这样<div [innerHTML] = " element.svg " > 对 div 标签使用 [innerHTML] 属性绑定

标签： angular svg ngfor

【解决方案1】：

如果你想在dom中渲染整个svg标签，你应该把它放在另一个父元素的innerHtml和sanitize渲染之前的svg内容：

<div class="path" [innerHtml]="element.svg"></div>

在你的组件类中：

  constructor(private sanitizer: DomSanitizer) {
    this.elements.forEach(
      (e) => (e.svg = this.sanitizer.bypassSecurityTrustHtml(e.svg))
    );
  }

现在要更改悬停时 svg 的颜色，您应该：

从路径和 svg 中删除填充属性
在你的父 div 上应用一个类
为您的 svg 设置填充样式：

.path { 填充：绿色； } .path:hover { 填充：红色； }

【讨论】：

【解决方案2】：

在 Angular 项目中使用 svg 图标存在问题：

1.为所有svg图标创建一个文件[例如这个项目在svg-icons目录中存在一个文件=> svg-icons-repo.component.ts]

2.使用本站 [https://svgsprit.es/] 可以将 svg 图标转换为标准模型

3.然后在需要使用 svg 图标的项目中使用 [id] 调用它

I create this project with your svg icons

【讨论】：