SVG- beroerte-eienskappe
SVG-beroerte-eienskappe
SVG bied 'n wye reeks beroerte-eienskappe. In hierdie hoofstuk gaan ons na die volgende kyk:
- beroerte
- slagwydte
- slag-lynkap
- beroerte-dasharray
Al die slag eienskappe kan toegepas word op enige soort lyne, teks en buitelyne van elemente soos 'n sirkel.
SVG beroerte Eiendom
Die stroke eienskap definieer die kleur van 'n lyn, teks of buitelyn van 'n element:
Hier is die SVG-kode:
Voorbeeld
<svg height="80" width="300">
<g fill="none">
<path stroke="red" d="M5 20 l215 0" />
<path stroke="black" d="M5 40 l215 0" />
<path stroke="blue" d="M5 60 l215 0" />
</g>
</svg>
SVG-slagwydte-eienskap
Die slagwydte-eienskap definieer die dikte van 'n lyn, teks of buitelyn van 'n element:
Hier is die SVG-kode:
Voorbeeld
<svg height="80" width="300">
<g fill="none" stroke="black">
<path stroke-width="2" d="M5 20 l215 0" />
<path stroke-width="4" d="M5 40 l215 0" />
<path stroke-width="6" d="M5 60 l215 0" />
</g>
</svg>
SVG stroke-lynkap Eiendom
Die stroke-linecap-eienskap definieer verskillende tipes eindes aan 'n oop pad:
Hier is die SVG-kode:
Voorbeeld
<svg height="80" width="300">
<g fill="none" stroke="black" stroke-width="6">
<path stroke-linecap="butt" d="M5 20 l215 0" />
<path stroke-linecap="round" d="M5 40 l215 0" />
<path stroke-linecap="square" d="M5 60 l215 0" />
</g>
</svg>
SVG stroke-dasharray Eiendom
Die stroke-dasharray-eienskap word gebruik om stippellyne te skep:
Hier is die SVG-kode:
Voorbeeld
<svg height="80" width="300">
<g fill="none" stroke="black" stroke-width="4">
<path stroke-dasharray="5,5" d="M5 20 l215 0" />
<path stroke-dasharray="10,10" d="M5 40 l215 0" />
<path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
</g>
</svg>