SVG dönüşüm sırası: Çizimi ölçekleyip konumlandırın

SVG'nin transform="translate(60 25) scale(2)" özniteliğinde bir kaynak nokta, üst öğenin koordinat sistemine eşlenirken önce iki katına ölçeklenir, ardından yatayda 60, dikeyde 25 birim taşınır. Listeyi scale(2) translate(60 25) şeklinde tersine çevirdiğinizde bu öteleme de iki katına çıkar. Çizimin boyutu aynı, konumu farklı olur.

Yeniden boyutlandırdığınız bir logo yer değiştiriyorsa yollarını düzenlemeden önce dönüşüm listesini kontrol edin. Kullanışlı bir düzen, yerleştirme için dış grup ve ölçekleme için iç grup kullanmaktır. İki işlemin sorumluluğu görünür kalır ve özgün çizim koordinatları daha sonraki düzenlemeler için korunur.

Sırayı tahmin etmek yerine tek bir noktayı izleyin

Kaynak nokta (10, 10) olsun. Ölçek 2 ve öteleme (60, 25) olduğunda iki liste şu sonuçları üretir:

Her iki nokta da aynı kaynak koordinattan gelir. İkinci liste, çizimle birlikte ötelemeyi de ölçekler. Son konumu ilkine göre (60, 25) kadar farklıdır.

Sıraya ilişkin birbiriyle çelişiyor gibi görünen açıklamalarla karşılaşabilirsiniz. SVG belirtimi, bir listeyi yazıldığı sıraya göre iç içe koordinat sistemleri olarak tanımlar: en soldaki dönüşüm dış grup olur. Bir kaynak noktayı bu gruplardan dışarı doğru izlediğinizde, ona önce en içteki işlem uygulanır. W3C'nin transform özniteliği tanımı, eşdeğer iç içe yapıyı açıkça gösterir.

Nokta hesabında en sağdaki fonksiyondan sola doğru ilerleyin. Grup yapısını ise dıştan içe okuyun. Hesap boyunca seçtiğiniz yorumlama biçimini tutarlı kullanın.

Aynı iki parçalı işareti karşılaştırın

Bu eksiksiz örneği transform-order.svg olarak kaydedip bir tarayıcıda açın. Çizim, ayrı bir üçgen vurgu detayı bulunan özgün bir kare halkadır. İçindeki açıklık, çift-tek dolgu kuralıyla tanımlanmış gerçek bir boşluktur.

<svg xmlns="http://www.w3.org/2000/svg" width="700" height="400"
     viewBox="0 0 350 200">
  <g id="art" transform="translate(60 25) scale(2)">
    <path fill="#147d78" fill-rule="evenodd"
      d="M10 10H50V50H10Z M20 20H40V40H20Z"/>
    <path fill="#e5a340" d="M65 40L85 10L105 40Z"/>
  </g>
</svg>

Yalnızca grup özniteliğini transform="scale(2) translate(60 25)" olarak değiştirin. İşaret daha sağa ve aşağıya taşınır; boyutu ve parçaları arasındaki boşluk aynı kalır.

İki listeyi ve iç içe gruplarla oluşturulmuş eşdeğerini bir tarayıcıda görüntüledik. Karşılaştırma panelleri aynı koordinat alanlarını kullanır; soluk işaret özgün geometriyi gösterir. Her kırmızı nokta, kaynak nokta (10, 10)'un ulaştığı yeri işaretler.

Özgün çizimin yerel sınır kutusu x=10, y=10, width=95, height=40 değerlerine sahiptir. İlk düzen, kök koordinat sisteminde x=80, y=45, width=190, height=80 sınırlarını üretir. Ters çevrilmiş liste, aynı 190 × 80 boyutuyla x=140, y=70 konumunu üretir.

Bu ölçümler, konturu olmayan bu basit test örneğini tanımlar. Örnekte animasyon veya CSS dönüşümü yoktur. PerfectVector dönüştürme kalitesini ya da her SVG düzenleyicisiyle uyumluluğu değil, koordinat dönüşümlerinin birleşimini gösterir.

İç içe gruplarla konumu boyuttan ayırın

Yollarını değiştirmeden özgün grubu şu yapıyla değiştirin:

<g transform="translate(60 25)">
  <g id="art" transform="scale(2)">
    <path fill="#147d78" fill-rule="evenodd"
      d="M10 10H50V50H10Z M20 20H40V40H20Z"/>
    <path fill="#e5a340" d="M65 40L85 10L105 40Z"/>
  </g>
</g>

Bu yapı, tek bir gruptaki translate(60 25) scale(2) ile eşdeğerdir. Dış öteleme, ölçeklenmiş koordinat sistemini konumlandırır. İç ölçeği değiştirmek, dış öteleme değerlerini (60, 25) olarak bırakır.

Bu, ölçeği değiştirirken görünür her noktanın sabit kalacağı anlamına gelmez. Yerel başlangıç noktasından uzaktaki bir nokta, koordinatları çarpıldığı için yine yer değiştirir. Ötelemeyi seçmeden önce çizimi hangi kaynak noktanın sabitlemesi gerektiğine karar verin.

Örneğin, halkanın kaynak köşesinin (10, 10), 2 ile ölçeklendikten sonra (120, 80) konumuna gelmesi gerektiğini varsayalım. Hesaplayın:

tx = targetX - scale × anchorX = 120 - 2 × 10 = 100
ty = targetY - scale × anchorY =  80 - 2 × 10 =  60

translate(100 60) scale(2) kullanın. Köşe artık (120, 80) noktasına eşlenir. Doğrudan (120, 80) kadar ötelemek, yerel başlangıç noktasını oraya yerleştirir ve köşeyi daha sağda ve aşağıda bırakır.

Bu hesap, döndürme veya eğme olmadan eşit oranlı ölçekleme varsayar. Bilinçli olarak seçilmiş bir dönme merkezi için SVG transform-origin rehberini kullanın. İlgisiz düzeltmeleri deneme yanılmayla birleştirmek yerine her dönüşümü o işlemi üstlenen grupta tutun.

Dosya iç içe olduğunda görüntülenen eşlemeyi okuyun

İçe aktarılan bir SVG'nin birkaç üst öğesinde zaten dönüşümler bulunabilir. Yalnızca en yakın grubun özniteliğine bakmak, bunların birleşik etkisini gözden kaçırır. MDN transform referansı, CSS özelliği ve sunum özniteliği aynı öğeyi hedeflediğinde CSS dönüşümünün öncelikli olduğunu da belirtir. Özniteliği değiştirmek hiçbir şey yapmıyor gibi görünüyorsa hesaplanan stilleri kontrol edin.

Görüntülenen bir satır içi SVG için bu kod parçası, seçilen grubun noktasını kök SVG'nin kullanıcı koordinatlarına eşler:

const root = document.querySelector('svg');
const art = document.querySelector('#art');
const rootMatrix = root.getScreenCTM();
const artMatrix = art.getScreenCTM();
if (!rootMatrix || !artMatrix) throw new Error('SVG is not measurable');
 
const toRoot = rootMatrix.inverse().multiply(artMatrix);
const point = new DOMPoint(10, 10).matrixTransform(toRoot);
const result = { x: point.x, y: point.y };

Ters kök matrisi, kökün ortak ekran eşlemesini kaldırır. Bu önemlidir; çünkü örneğin 700 × 400 görüntüleme boyutu, 350 × 200 viewBox boyutunun iki katıdır. Burada ekran pikselleri ve SVG koordinatları farklı birimlerdir. MDN, getScreenCTM() tarafından döndürülen eşlemeyi belgeler.

Tarayıcı karşılaştırmamız, ilk liste ve iç içe sürüm için matrix(2 0 0 2 60 25) üretti. Ters çevrilmiş liste matrix(2 0 0 2 120 50) üretti. Bu ölçekleme ve öteleme örneğinde, son iki sayı farklı ötelemeyi açıkça gösterir.

Kod parçası, tersi alınabilen iki boyutlu dönüşümleri varsayar. Sıfır ölçek, bu ters matris kontrolüne uygun değildir. Üst üste yerleştirilen öğeler, içeriğe uydurulmuş çıktılar, konturlar veya döndürülmüş kutular için daha ayrıntılı SVG sınırları iş akışını kullanın.

Çizim grubundaki getBBox() çağrısının dönüştürülmüş kök konumunu bildirmesini beklemeyin. getBBox referansının açıkladığı gibi, yerel sonucu o öğenin kendi dönüşümünü ve üst öğelerinin dönüşümlerini içermez. İşaret gözle görülür şekilde taşınırken yerel kutu değişmeden kalabilir.

Çizimi yeniden oluşturmadan önce dönüşümü düzeltin

SVG'nin bir kopyası üzerinde çalışın. Birlikte hareket etmesi gereken yolları belirleyin, ardından gruplarını ve üst öğelerini inceleyin. Kolayca tanınabilir bir sabitleme noktasını ve bu noktanın amaçlanan hedef konumunu kaydedin.

Her seferinde tek bir dönüşümü değiştirin. Boyut doğru, konum yanlışsa iki sıranın ürettiği ötelemeyi karşılaştırın. Parçalar birbirinden bağımsız hareket ediyorsa ortak yerleştirme dönüşümlerini onları içeren bir gruba uygulayın. Dönme merkezi konusunu ölçek sırası konusundan ayrı tutun.

Kaydedilen dosyayı hedef ortamında yeniden açın ve işaretin kapladığı alanın tamamını inceleyin. Doğru bir dönüşüm bile çizimi viewBox dışına veya kırpma bölgesine taşıyabilir. SVG düzenleme rehberi, daha geniş kapsamlı temizleme ve dışa aktarma sürecini ele alır.

İşaret yalnızca PNG veya JPG olarak mevcutsa ve düzenlenebilir konturlara ihtiyacınız varsa PerfectVector'ın logo vektörleştirme aracı bir SVG adayı hazırlayabilir. Siluetini, iç açıklığını ve ayrık şekillerini inceleyin; ardından geri kazanılan çizimi gruplandırın ve düzenleyicinizde veya kodunuzda yerleştirme dönüşümlerini uygulayın.

Bir raster görüntü, vektörleştirme yapılmadan taşınabilir ve ölçeklenebilir. Düzenlenebilir şekiller gerektiğinde vektörleştirme kullanın; elinizde varsa mevcut vektör aslını koruyun. Logonun geometrisinin veya yazılarının birebir olması için yine de elle yeniden oluşturma gerekebilir; logo vektörleştirme rehberi, başlangıç yöntemini nasıl seçeceğinizi açıklar.

Sık sorulan sorular

SVG dönüşümleri soldan sağa mı, sağdan sola mı uygular? Liste, yazıldığı sıraya göre dıştan içe uzanan iç içe koordinat sistemlerine karşılık gelir. Bir kaynak noktanın nereye ulaşacağını hesaplarken önce en sağdaki fonksiyonu uygulayın ve sola doğru dışarı ilerleyin.

translate ve scale sırasını tersine çevirmek logoyu neden taşır? Öznitelik listesinde scale ardından translate geldiğinde ölçek, ötelemeyi de çarpar. translate ardından scale geldiğinde ise öteleme bu ölçeğin dışında kalır. Dolayısıyla aynı değerler, farklı konumlarda eşit boyutlar üretebilir.

İç grubu yeniden boyutlandırdığımda dış öteleme her noktayı sabit tutar mı? Hayır. Dış öteleme değerlerini iç ölçekten ayrı tutar. Yerel başlangıç noktasından uzaktaki noktalar, ölçeklendikçe yine hareket eder. Bir sabitleme noktası seçin ve onu yerleştirmek için gereken ötelemeyi hesaplayın.

Kaynaklar

1. W3C — SVG transform attribute — Dönüşüm listeleri ile iç içe koordinat sistemleri arasındaki ilişkiyi tanımlar.
2. MDN — SVG transform — Dönüşüm sözdizimini, matris eşlemesini ve CSS önceliğini belgeler.
3. MDN — getScreenCTM — SVG koordinatlarını belgenin görüntü alanına eşlemek için kullanılan matrisi açıklar.
4. MDN — getBBox — Yerel sınırları ve ölçülen öğenin dönüşümlerinin hesaba katılmamasını açıklar.

Kaynak logonuz düzenlenebilir geometriye ihtiyaç duyuyorsa PerfectVector ile bir SVG adayı hazırlayın, konturlarını ve ayrı parçalarını inceleyin; ardından bir sabitleme noktası seçip ölçekleme sonrasındaki nihai konumunu doğrulayın.