在 HTML 页面上从 SVG 文件渲染图标
Posted
技术标签:
【中文标题】在 HTML 页面上从 SVG 文件渲染图标【英文标题】:Render icons from an SVG file on HTML page 【发布时间】:2022-01-17 06:36:52 【问题描述】:我有一个 icons.svg
文件,其中似乎包含我需要在 Angular 应用程序中使用的资产。
文件看起来像这样(注意,...
表示由于安全原因省略了数据):
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs>
<path d="..." id="o"/></defs>
<symbol id="icon-add-member-contain-heavy" viewBox="0 0 64 64">
<path d="B0 ... 4A3q"/>
</symbol>
<symbol id="icon-add-member-contain-light" viewBox="0 0 64 64">
<path d="A5 ... 2i5m"
...
...
.../></symbol></svg>
我试图在我的组件 html 中引用该文件(如下面的代码所示),但我不知道如何呈现图标。我猜我需要使用上面 svg 代码中显示的id
,比如id="icon-add-member-contain-heavy"
?
<div>
<img src="../../src/assets/icons.svg">
</div>
【问题讨论】:
你只有符号吗?是否允许更改代码?请阅读How SVG Fragment Identifiers Work 【参考方案1】:在 Angular 中,您应该能够将 svg 渲染为组件。来自角度文档:
import Component from '@angular/core';
@Component(
selector: 'app-svg',
templateUrl: './svg.component.svg',
styleUrls: ['./svg.component.css']
)
export class SvgComponent
fillColor = 'rgb(255, 0, 0)';
changeColor()
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
this.fillColor = `rgb($r, $g, $b)`;
【讨论】:
以上是关于在 HTML 页面上从 SVG 文件渲染图标的主要内容,如果未能解决你的问题,请参考以下文章