W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
你可以在 Angular 應(yīng)用程序中將 SVG 文件用作模板。當(dāng)你使用 SVG 作為模板時,就可以像 HTML 模板一樣使用指令和綁定。使用這些功能,你可以動態(tài)生成交互式圖形。
包含本章代碼片段的工作實例參閱現(xiàn)場演練 / 下載范例。
以下示例展示了將 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}, $)`;
}
}
要想查看屬性和事件綁定的實際效果,請把以下代碼添加到你的 ?svg.component.svg
? 文件中:
<svg>
<g>
<rect x="0" y="0" width="100" height="100" [attr.fill]="fillColor" (click)="changeColor()" />
<text x="120" y="50">click the rectangle to change the fill color</text>
</g>
</svg>
這個例子使用了事件綁定語法 ?click()
? 和屬性綁定語法(?[attr.fill]="fillColor"
?)。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: