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