SVG Teks - <text>
<text> elemen digunakan untuk mendefinisikan teks.
Contoh 1
Menulis Teks:
<svg width="200" height="30">
<text x="0" y="15" fill="red">Belajar SVG HTML</text>
</svg>
Contoh 2
Memutar Teks:
<svg width="200" height="80">
<text x="0" y="15" fill="red" transform="rotate(30 20,40)">Belajar SVG HTML</text>
</svg>
Contoh 3
<text> elemen dapat diatur dalam sejumlah sub-kelompok dengan <tspan> elemen. Setiap <tspan> elemen dapat berisi format dan posisi yang berbeda.
Teks pada beberapa baris (dengan <tspan> elemen):
<svg width="200" height="90">
<text x="10" y="20" STYLE="FILL:RED;">Saveral Lines:
<tspan x="10" y="45">First Line.</tspan>
<tspan x="10" y="70">Second Line.</tspan>
</text>
</svg>
Contoh 3
Teks sebagai link (dengan elemen <a>):
<svg width="200" height="90">
<a xlink:href="http://duniakomputer007.blogspot.sg/2015/04/svg-tutorial.html" target="_blank">
<text x="0" y="15" fill="red">SVG Tutorial</text>
</a>
</svg>
SVG Stroke
SVG Stroke Properti
SVG menawarkan berbagai sifat stroke. Dalam bab ini kita akan melihat hal-hal berikut:
- stroke
- stroke-width
- stroke-linecap
- stroke-dasharray
Semua sifat stroke dapat diterapkan untuk setiap jenis garis.
SVG Stroke Properti
Properti Stroke mendefinisikan warna garis, teks atau garis besar unsur:
<svg width="300" height="80">
<g fill="none">
<path stroke="red" d="M5 20 l215 0"/>
<path stroke="yellow" d="M5 40 l215 0"/>
<path stroke="black" d="M5 60 l215 0"/>
</g>
</svg>
SVG stroke-width Properti
Properti stroke-width mendefinisikan ketebalan garis, teks atau garis besar unsur:
<svg width="300" height="80">
<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-linecap Properti
Properti stroke-linecap mendefinisikan berbagai jenis ujung pada garis:
<svg width="300" height="80">
<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 Properti
Properti stroke dasharray digunakan untuk membuat garis putus-putus:
<svg width="300" height="80">
<g fill="none" stroke="black" stroke-width="6">
<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>
0 komentar:
Posting Komentar