Angular-CDK SVG未显示
Angular-CDK SVG未显示
提问于 2018-07-25 21:28:06
我不能让SVG图标显示在CDK层中。我有以下代码：
app-menu.html
<mat-card #appMenuPortal class="app-menu" *cdkPortal>
<div class="menu-grid">
<a title="NPW" class='appMenuButton'>
<mat-icon id="app-menu-NPW-icon" svgIcon="joomla"></mat-icon>
</a>
...
</div>
</mat-card>app-menu.component.ts
...
constructor(
private readonly overlay: Overlay,
private readonly notificationService: NotificationService,
private matIconRegistry: MatIconRegistry,
private domSanitizer: DomSanitizer
) {
this.matIconRegistry.addSvgIcon(
'joomla',
this.domSanitizer.bypassSecurityTrustResourceUrl('../assets/SVGicons/joomla.svg')
);
}
...joomla.svg
<svg aria-hidden="true" style="position: absolute; width: 36px; height: 36px; fill: white; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-joomla" viewBox="0 0 36 36">
<title>joomla</title>
<path d="M8.313 8.646c1.026-1.026 2.688-1.026 3.713-0.001l0.245 0.246 3.159-3.161-0.246-0.246c-1.801-1.803-4.329-2.434-6.638-1.891-0.331-2.037-2.096-3.591-4.224-3.592-2.364 0-4.28 1.92-4.28 4.286 0 2.042 1.425 3.75 3.333 4.182-0.723 2.42-0.133 5.151 1.776 7.062l7.12 7.122 3.156-3.163-7.119-7.121c-1.021-1.023-1.023-2.691 0.006-3.722zM31.96 4.286c0-2.368-1.916-4.286-4.281-4.286-2.164 0-3.952 1.608-4.24 3.695-2.409-0.708-5.118-0.109-7.020 1.794l-7.12 7.122 3.159 3.162 7.118-7.12c1.029-1.030 2.687-1.028 3.709-0.006 1.025 1.026 1.025 2.691-0.001 3.717l-0.244 0.245 3.157 3.164 0.246-0.248c1.889-1.893 2.49-4.586 1.8-6.989 2.098-0.276 3.717-2.074 3.717-4.25zM28.321 23.471c0.566-2.327-0.062-4.885-1.878-6.703l-7.109-7.125-3.159 3.16 7.11 7.125c1.029 1.031 1.027 2.691 0.006 3.714-1.025 1.025-2.688 1.025-3.714-0.001l-0.243-0.243-3.156 3.164 0.242 0.241c1.922 1.925 4.676 2.514 7.105 1.765 0.395 1.959 2.123 3.431 4.196 3.431 2.363 0 4.28-1.917 4.28-4.285 0-2.163-1.599-3.952-3.679-4.244zM19.136 16.521l-7.111 7.125c-1.022 1.024-2.689 1.026-3.717-0.004-1.026-1.028-1.026-2.691-0.001-3.718l0.244-0.243-3.159-3.16-0.242 0.241c-1.836 1.838-2.455 4.432-1.858 6.781-1.887 0.446-3.292 2.145-3.292 4.172-0.001 2.367 1.917 4.285 4.281 4.285 2.034-0.001 3.737-1.419 4.173-3.324 2.334 0.58 4.906-0.041 6.729-1.867l7.109-7.124-3.157-3.163z" stroke="white" fill="white"/>
</symbol>
</defs>
</svg>我得到的HTML输出如下所示：
<mat-card _ngcontent-c8="" class="app-menu mat-card ng-star-inserted">
<div _ngcontent-c8="" class="menu-grid">
<a _ngcontent-c8="" class="appMenuButton" title="NPW">
<mat-icon _ngcontent-c8="" class="mat-icon" id="app-menu-NPW-icon" role="img" svgicon="joomla" aria-hidden="true" ng-reflect-svg-icon="joomla">
<svg aria-hidden="true" style="position: absolute; width: 36px; height: 36px; fill: white; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fit="" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" focusable="false">
<defs>
<symbol id="icon-joomla" viewBox="0 0 36 36">
<title>joomla</title>
<path d="M8.313 8.646c1.026-1.026 2.688-1.026 3.713-0.001l0.245 0.246 3.159-3.161-0.246-0.246c-1.801-1.803-4.329-2.434-6.638-1.891-0.331-2.037-2.096-3.591-4.224-3.592-2.364 0-4.28 1.92-4.28 4.286 0 2.042 1.425 3.75 3.333 4.182-0.723 2.42-0.133 5.151 1.776 7.062l7.12 7.122 3.156-3.163-7.119-7.121c-1.021-1.023-1.023-2.691 0.006-3.722zM31.96 4.286c0-2.368-1.916-4.286-4.281-4.286-2.164 0-3.952 1.608-4.24 3.695-2.409-0.708-5.118-0.109-7.020 1.794l-7.12 7.122 3.159 3.162 7.118-7.12c1.029-1.030 2.687-1.028 3.709-0.006 1.025 1.026 1.025 2.691-0.001 3.717l-0.244 0.245 3.157 3.164 0.246-0.248c1.889-1.893 2.49-4.586 1.8-6.989 2.098-0.276 3.717-2.074 3.717-4.25zM28.321 23.471c0.566-2.327-0.062-4.885-1.878-6.703l-7.109-7.125-3.159 3.16 7.11 7.125c1.029 1.031 1.027 2.691 0.006 3.714-1.025 1.025-2.688 1.025-3.714-0.001l-0.243-0.243-3.156 3.164 0.242 0.241c1.922 1.925 4.676 2.514 7.105 1.765 0.395 1.959 2.123 3.431 4.196 3.431 2.363 0 4.28-1.917 4.28-4.285 0-2.163-1.599-3.952-3.679-4.244zM19.136 16.521l-7.111 7.125c-1.022 1.024-2.689 1.026-3.717-0.004-1.026-1.028-1.026-2.691-0.001-3.718l0.244-0.243-3.159-3.16-0.242 0.241c-1.836 1.838-2.455 4.432-1.858 6.781-1.887 0.446-3.292 2.145-3.292 4.172-0.001 2.367 1.917 4.285 4.281 4.285 2.034-0.001 3.737-1.419 4.173-3.324 2.334 0.58 4.906-0.041 6.729-1.867l7.109-7.124-3.157-3.163z" stroke="white" fill="white"></path>
</symbol>
</defs>
</svg>
</mat-icon>
</a>
<a _ngcontent-c8="" title="Upload">
<i _ngcontent-c8="" class="material-icons" id="app-menu-upload-icon">file_upload</i>
</a>
....
</div>
</mat-card>看起来HTML输出似乎很好。我需要它显示在菜单网格中。使用Chrome进行检查后，它显示HTML，看起来是正确的，但没有显示任何内容。注:图标所在的背景不是白色的。所有其他图标都会显示，但它们只是材料图标。为什么没有显示SVG图标？
回答 1
Stack Overflow用户
发布于 2018-07-27 04:30:59
抱歉的,
我的代码都很好。我只是有一个坏的SVG文件/代码，因此它不能正确呈现。
首先要确保你的SVG是好的。:D
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51520121
复制相关文章
相似问题