SVG Geometrik Şekil Elemanları
<rect> elemanı ile bir dikdörtgen çizilir. Fakat HTML, başka geometrik şekiller için de svg tagları içerir. Aşağıda bu tagların listesini görüyorsunuz:
- Dikdörtgen (Rectangle) <rect>
- Daire (Circle) <circle>
- Elips (Ellipse) <ellipse>
- Çizgi (Line) <line>
- Kırık Doğru (Polyline) <polyline>
- Çokgen (Polygon) <polygon>
- Yörünge (Path) <path>
Dikdörtgenden başlayarak, bu elemanların her biri için bir ders yapacağız.
SVG Dikdörtgen (<rect>) Elemanı
Aşağıda <rect> elemanı ile çizilmiş bir dikdörtgen görüyoruz:
Bu dairenin kodları şunlardır:
<svg width="400" height="110">
<rect width="300" height="100" x="3" y="3" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
Bu kodların anlamı şudur:
<svg width="400" height="110"> kodu ile 400 pixel'e 110 pixel ebatlarında bir svg çizim bölgesi (tuval) oluşturduk.
<rect width="300" height="100" kodu ile 300 pixel'e 100 pixel ebatlarında bir dikdörtgen tanımladık.
x="3" y="3" kodları ile de, dikdörtgenin sol üst köşesinin koordinatlarını (dikdörtgenin başlangıç noktasını) belirledik.
style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" kodlarında:
Bu dikdörtgenin kodları şöyledir:
<svg width="400" height="180">
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>
Bu kodlarda farklı olan özellikler ve anlamları şöyledir:
Bu dikdörtgenin kodları şöyledir:
<svg width="400" height="180">
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>
Diğer dikdörtgen kodlarından farklı olarak bu dikdörtgende, opacity:0.5 stil özelliğini görüyoruz. Bu özellik, bütün şeklin şeffaflığını yüzde 50 olarak ayarlar.
Bu dikdörtgenin kodları şöyledir:
Bu kodda farklı olarak rx="20" ry="20" özelliklerini görüyoruz. Köşelere ovallik katan özellikler bu ikisidir.
Bu dairenin kodları şunlardır:
<svg width="400" height="110">
<rect width="300" height="100" x="3" y="3" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
Bu kodların anlamı şudur:
<svg width="400" height="110"> kodu ile 400 pixel'e 110 pixel ebatlarında bir svg çizim bölgesi (tuval) oluşturduk.
<rect width="300" height="100" kodu ile 300 pixel'e 100 pixel ebatlarında bir dikdörtgen tanımladık.
x="3" y="3" kodları ile de, dikdörtgenin sol üst köşesinin koordinatlarını (dikdörtgenin başlangıç noktasını) belirledik.
style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" kodlarında:
- fill:rgb(0,0,255) kısmı ile dikdörtgenin dolgu rengini ayarladık,
- stroke-width:3 kısmı ile dikdörtgenin kenarlık kalınlığını ayarladık,
- stroke:rgb(0,0,0) kısmı ile de, dikdörtgenin kenarlık rengini ayarladık.
Aşağıda başka özellikler taşıyan bir dikdörtgen (kare) verilmiştir:
Bu dikdörtgenin kodları şöyledir:
<svg width="400" height="180">
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>
Bu kodlarda farklı olan özellikler ve anlamları şöyledir:
- x="50" y="20" kodları, dikdörgenin sol üst köşesinin koordinatlarıdır.
- fill-opacity:0.1 kodu dolgu şeffaflığını yüzde 90 olarak ayarlar. (0.1 geçirmezlik)
- stroke-opacity:0.9 kodu, kenarlık çizgisinin şeffaflığını yüzde 10 olarak ayarlar. (0.9 geçirmezlik)
Aşağıda başka özellikler taşıyan bir dikdörtgen daha verilmiştir:
Bu dikdörtgenin kodları şöyledir:
<svg width="400" height="180">
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>
Diğer dikdörtgen kodlarından farklı olarak bu dikdörtgende, opacity:0.5 stil özelliğini görüyoruz. Bu özellik, bütün şeklin şeffaflığını yüzde 50 olarak ayarlar.
Aşağıda köşeleri oval bir dikdörtgen daha verilmiştirrr:
Bu dikdörtgenin kodları şöyledir:
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
Bu kodda farklı olarak rx="20" ry="20" özelliklerini görüyoruz. Köşelere ovallik katan özellikler bu ikisidir.
Hiç yorum yok:
Yorum Gönder