SVG dosyalarını Angular uygulamalarınızda şablon olarak kullanabilirsiniz. Şablon olarak bir SVG kullandığınızda, tıpkı HTML şablonlarında olduğu gibi yönergeleri ve bağlamaları kullanabilirsiniz. Etkileşimli grafikleri dinamik olarak oluşturmak için bu özellikleri kullanın.
SVG sözdizimi örneği #
Aşağıdaki örnekte bir SVG’nin şablon olarak kullanılmasına ilişkin sözdizimi gösterilmektedir.
import {Component} from '@angular/core';
@Component({
standalone: true,
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})`;
}
}Özellik ve olay bağlamayı çalışırken görmek için aşağıdaki kodu svg.component.svg dosyanıza ekleyin:
<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>Verilen örnekte click() olay bağlaması ve özellik bağlama sözdizimi ([attr.fill]=”fillColor”) kullanılmıştır.
