SVG Kullanımı ve Animasyonlarla Etkileşimli Grafikler

Bir simgenin her ekranda keskin görünmesi ile kullanıcı etkileşimine tepki vermesi farklı ihtiyaçlardır. SVG ilkini vektör geometrisiyle karşılar; ikincisi için grafiğin sayfaya nasıl yerleştirildiği, olayların nerede dinlendiği ve hareketin nasıl sınırlandığı önemlidir.

Önce çizim alanını tanımlayın

viewBox="0 0 240 120", çizimin koordinat sistemini belirler. Ekrandaki genişlik CSS ile değişse bile içerideki daire aynı koordinatlarla çizilir. Aşağıdaki örnekte cx ve cy merkez, r yarıçaptır. rect dikdörtgen, line çizgi, path ise daha karmaşık şekiller için kullanılır.

<svg viewBox="0 0 240 120" width="240" height="120"
     role="img" aria-labelledby="demo-title">
  <title id="demo-title">Mavi daire</title>
  <circle cx="120" cy="60" r="32" fill="#1769aa" />
</svg>

Grafik bilgi taşıyorsa erişilebilir bir adı olmalıdır. Yanındaki metnin aynısını tekrarlayan süsleme için aria-hidden="true" daha uygundur. Birden fazla SVG kullanırken başlık kimliklerini tekrar etmeyin. Fotoğrafı SVG içine koymak, fotoğrafı vektöre dönüştürmez.

Tıklanabilir şekil yerine gerçek düğme

Yalnızca daireye click dinleyicisi eklemek klavyeyle kullanım sağlamaz. Bu küçük örnekte işlemi bir HTML düğmesi yürütür; SVG dekoratiftir. Düğmenin metni sabit kalır, açık/kapalı bilgisi aria-pressed ile bildirilir. JavaScript çalışmazsa düğme devre dışı kalır ve başlangıç durumu görünür.

<div class="svg-demo">
  <svg viewBox="0 0 240 120" aria-hidden="true">
    <circle cx="120" cy="60" r="32" />
  </svg>
  <button id="highlight-toggle" type="button"
          aria-pressed="false" disabled>Vurguyu aç/kapat</button>
  <p id="highlight-state">Vurgu kapalı.</p>
</div>
<style>
  .svg-demo svg { display: block; width: 100%; max-width: 24rem; }
  .svg-demo circle { fill: #1769aa; transition: fill 180ms ease; }
  .svg-demo.is-active circle { fill: #a23b00; }
  .svg-demo button:focus-visible { outline: 3px solid #1769aa; }
  @media (prefers-reduced-motion: reduce) {
    .svg-demo circle { transition: none; }
  }
</style>
<script>
  const demo = document.querySelector('.svg-demo');
  const toggle = demo.querySelector('button');
  const state = demo.querySelector('#highlight-state');
  toggle.disabled = false;
  toggle.addEventListener('click', () => {
    const active = toggle.getAttribute('aria-pressed') !== 'true';
    toggle.setAttribute('aria-pressed', String(active));
    demo.classList.toggle('is-active', active);
    state.textContent = active ? 'Vurgu açık.' : 'Vurgu kapalı.';
  });
</script>

Kodu bağımsız bir HTML dosyasında deneyin. Örneğin betiği işaretlemeden sonra gelir; başa taşınırsa DOM hazır olmadan çalıştırılmamalıdır. Birden fazla bileşen üretirken kimlikleri ve seçicileri bileşene göre düzenleyin. Site güvenlik politikası satır içi betikleri engelliyorsa CSS ve JavaScript'i izin verilen ayrı dosyalara taşıyın; politikayı devre dışı bırakmayın.

Harici SVG ile satır içi SVG aynı değildir

<img src="grafik.svg" alt="..."> bir görüntü öğesidir. Sayfanın querySelector çağrısıyla bu dosyanın içindeki daireye ulaşılamaz. Şekilleri doğrudan değiştirmek gerekiyorsa güvenilir SVG işaretlemesini sayfa içinde kullanın. Kullanıcı yüklemesini temizlemeden innerHTML içine aktarmayın; SVG yalnızca zararsız çizim komutlarından oluşmak zorunda değildir.

Animasyonun çalışması tek başına yeterli değil

Tab tuşuyla düğmeye ulaşın; Enter ve boşlukla durumu değiştirin. Tarayıcıda azaltılmış hareket tercihini taklit ederek geçişin kapandığını kontrol edin. Dar ekranda taşma, yakınlaştırmada kesilme ve JavaScript kapalıyken yanlış durum gösterimi olup olmadığına bakın. Sürekli hareket ekleyecekseniz durdurma olanağını da tasarlayın; bu örnekte kısa renk geçişi dışında sürekli animasyon yoktur.

Başvuru: SVG viewBox ve azaltılmış hareket tercihi.