HTML SVG Ders_10 Text Çizimi

HTML5 SVG ile Text Çizimi

<text> elemanı, bir text çizmek için kullanılır.

Örnek 1

Bu yazıyı yazmak için şu kodları kullanıyoruz:

<svg height="30" width="200">
  <text x="0" y="15" fill="red">SVG'yi çok sevdim!</text>
</svg>

Örnek 2

Bu yazının kodları şöyledir:

<svg height="60" width="200">
  <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
</svg>

Bu kodlardaki rotate(30 20,40) kodu, yazıyı 20,40 noktasından itibaren yazmaya başlar ve yataya göre 30 derece açı verir.


Örnek 3

Svg text elemanı, çoklu satırlar da oluşturabilir. Bunun için <tspan> elemanını kullanırız. Her bir <tspan> elemanına, farklı pozisyonlar ve biçimler verilebilir. Aşağıda bir örnek verilmiştir:



Bu çizimin kodu şöyledir:

<svg height="90" width="200">
  <text x="10" y="20" style="fill:red;">Çoklu satırlar:
    <tspan x="10" y="45">İlk satır.</tspan>
    <tspan x="10" y="70">İkinci satır.</tspan>
  </text>
</svg>

Örnek 4

Bir svg text çizimine, link atanabilir. Aşağıda bunun örneğini görüyorsunuz:

Bu linkin kodu şöyledir:

<svg height="30" width="200" xmlns:xlink="#">
  <a xlink:href="#" target="_blank">
    <text x="0" y="15" fill="red">SVG'yi sevdim!</text>
  </a>
</svg>

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