我想在懸停時更改圖示顏色
我不能通過添加圖示作為影像來做到這一點
我可以通過svg:hover{fill: red;}在 css 中使用 svg 標簽來實作，但我的 svg 標簽沒有使用 *ngFor 回圈在 dom 中呈現
我不能渲染<path d="{{element.path}}" />一些 svg 有多個路徑元素
側面板.component.html
<div class="side-panel mt-2">
<div
class="elements d-flex justify-content-start"
*ngFor="let element of elements"
>
<!-- <div ><img src="{{ element.icon }}" alt="我的
<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 {}
}
uj5u.com熱心網友回復：
如果你想在 dom 中渲染整個 svg 標簽，你應該把它放在另一個父元素的 innerHtml 中，并在渲染之前清理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 { 填充：紅色；}
uj5u.com熱心網友回復：
在 angular 專案中使用 svg 圖示存在一個問題：
1.為所有svg圖示創建一個檔案[例如這個專案在svg-icons目錄中存在一個檔案=> svg-icons-repo.component.ts]
2.使用本站【https://svgsprit.es/】可以將svg圖示轉換為標準模型
3.然后在需要使用 svg 圖示的專案的任何地方使用 [id] 呼叫它
我用你的 svg 圖示創建了這個專案
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/385013.html
下一篇：org.eclipse.jface.preference.FileFieldEditor.setFileExtensions(String[])是否只在檔案瀏覽器中作業？