HTML SVG Ders_11 Çizim Biçimleri (Strokes)

HTML5 SVG Çizim Biçimleri (Strokes)

SVG, farklı çizim biçimlerine sahiptir. Bu derste, aşağıdaki çizim biçimlerinden bahsedeceğiz:

• stroke
• stroke-width
• stroke-linecap
• stroke-dasharray

Bütün bu çizim biçimleri, svg elemanındaki bütün çizgilere uygulanabilir. Bunlar bir düz çizgi, daire çizgisi veya diğer şekillerin çizgileri olabilir.

SVG stroke Özelliği (stroke property)

stroke özelliği, bir çizginin, textin ya da bir geometrik şeklin çizgi rengini belirler. Örneğe dikkat edelim:

<svg height="80" width="300">
  <g fill="none">
    <path stroke="red" d="M5 20 l215 0" />
    <path stroke="blue" d="M5 40 l215 0" />
    <path stroke="black" d="M5 60 l215 0" />
  </g>
</svg>

Bu kodlar şu çizgileri çizer:

SVG stroke-width Özelliği

stroke-width özelliği, bir çizginin, bir textin kalınlığını belirler. Örneğe dikkat edelim:

<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>

Bu kodlar şu çizgileri çizer:

SVG stroke-linecap Özelliği

stroke-linecap özelliği, ucu açık bir çizginin ucuna şekil vermek için kullanılır. Örneğe dikkat edelim:

<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>

Bu kodlar şu çizgileri çizer:

SVG stroke-dasharray Özelliği

stroke-dasharray özelliği, kesikli çizgi çizmemizi sağlar. Örneğe dikkat edelim:

<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>

Bu kodlar şu çizgileri çizer:

sonraki ders için tıklayınız

HTML SVG Ders_4 Daire (Circle )

HTML5 SVG Elemanı ile Daire (Circle) Çizimi

<circle> elemanı, svg ile bir daire çizmek için kullanılır. Aşağıda bir daire ve bu dairenin kodları verilmiştir:



Bu dairenin kodları şöyledir:

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Bu kodlarda:

cx="50" cy="50" özellikleri, dairenin merkez noktasının, svg elemanına göre koordinatlarıdır. Eğer svg elemanına göre dairemizin merkezi (0,0) noktası olacaksa, bu iki özellik belirtilmeyebilir.

r="40" özelliği, dairenin yarıçapının kaç pixel olacağını ilan eder.

stroke="black" özelliği, dairenin dış çizgisinin rengidir.

stroke-width="3" özelliği, dış çizginin kalınlığıdır. (pixel olarak)

fill="red" özelliği ise dairenin iç dolgusunun rengini belirler.

sonraki ders için tıklayınız

HTML SVG Ders_3 SVG Dikdörtgen (Rectangle)

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: 

• 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>

Bu kodda farklı olarak rx="20" ry="20" özelliklerini görüyoruz. Köşelere ovallik katan özellikler bu ikisidir. 

sonraki ders için tıklayınız