İstemci tarafındaki HTML elementlerine hükmetmenin en iyi yolu DOM üzerinden JavaScript programlama dilini kullanmaktır. Benzer şekilde istemci taraflı SVG diline de hükmedebiliriz. Bu blog yazısında bir daire üzerine tıklandığında kenar kalınlıklarını ve rengini değiştirip elementin boyutu büyüten ve küçülten bir örnek anlatılacaktır.
SVG giriş yaptığımız blog yazısında Hover özelliğini anlatmıştık. Hover CSS bölümü içinde bulunan bir olaydır. Ancak fareye tıklama (click) gibi olayları işlemek için Javascript kullanmamız gerekmektedir. HTML içindeki SVG bölümünde iki dikdörtgen çizip iki tane olay (onclick) tanımladık. Birinci olay myrect1’in y değerini 20 yaparken myrect2’nin değerini 10 yapıyor ve ikinci olay tam tersi çalışıyor.
Javascrit bölümünde getElementById fonksiyonu sayesinde ID parametresi üzerinden değerlere ulaştık ve ….baseVal.value üzerinden y değişkeni değiştirdik. (Aynı işlemi setAttribute(“y”,”20px”) gibi bir fonksiyon üzerinden de yapabiliriz. Kullanım size kalmış:)) Çok basitçe ID üzerinden özelliklere ulaşıp değiştirdik, benzer işlemleri diğer tüm özellikler içinde yapabilirsiniz. Şimdi gelelim ID yoksa veya tek fonksiyonla birden fazla elementi nasıl yönetebileceğimize… Şu ana kadar hep dikdörtgen çizdik, şimdi iki tane daire (circle) çizelim ve onclick olayını doCircle olayına bağlayalım.
HTML bölümünde SVG etiketi içindeki CIRCLE etiketi özellik bölümünde cx ve cy ile iki boyutlu düzlemde dairenin orta noktası ve r yarıçapı tanımlanmıştır. Fill ile daire içi boyanmış, stroke ve stroke-width kenarlık ayarları yapılmıştır. Ayrıca, olay tetiklemek için onclick olayı doCircle(evt) javascript fonksiyonuna bağlanmıştır. Burada evt değişkeni önem kazanmaktadır. Javascript kodunda evt.target üzerinden daireye ulaşılmıştır. evt sayesinde eğer ekranda birden fazla daire varsa hangi daireden isteğin geldiği bu şekilde çözülebilir. theCircle.getAttribute(…) ile daire etiketi içindeki tüm özelliklere ulaşılabilir. Burada yarıçap r, kenar rengi stroke ve daire doldurma rengi fill özellikleri çekilmiş durumları if ile kontrol edilip şartlara göre değişiklikler yapılmıştır. Değişikliklerin HTML’e yansıması için theCircle.setAttribute(…, ….) komutu ile özelliklerin yeni değerleri ayarlanmıştır.
Bu blog yazısında hem ID üzerinden hem de evt değişkeni üzerinden elementlere nasıl ulaşabileceğimizi gördük. JQuery bilen arkadaşlar aynı işlemleri JQuery üzerinden de yapabilirler. Bu yazımızda SVG’yi Javascript dünyası ile konuşturduk. Öğrencilerime de her zaman dediğim gibi günümüzde birden fazla programlama dilini kullanabilmeliyiz ve ezberden kaçmalıyız. SVG daire, dörtgen, çokgen, yamuk (var mı bilmiyorum 🙂 ) gibi birçok çizimi SVG konusunu araştırıp (İngilizce karşılıklarını google’a yazıp) bulabiliriz. SVG’nin mantığını anlamak ve doğru kelimelerle Googlelamak yeterlidir. Diğer taraftan Javascript tarafında yaptığımız DOM, ID üzerinden erişim ve evt değişkeni üzerinden erişimin mantığını çözüp yine ezberlemeden bunları aklımızın bir köşesinde bulundurmalıyız. Ezber yok ama çok çalışmak, uygulamak, denemek ve anahtar kelimeleri yakalamak, işte tüm mesele bu 🙂
Bol kodlu günler…