SVG dönüşüm merkezi: Görseli merkezinden döndürün

SVG görselini CSS ile kendi merkezi etrafında döndürmek için ilgili yolları tek bir gruba koyun ve bu gruba transform-box: fill-box ile transform-origin: center uygulayın. Ardından döndürmeyi de gruba uygulayın. Bu iki özellik farklı soruları yanıtlar: referansı hangi dikdörtgenin sağladığını ve dönme noktasının bu dikdörtgenin neresinde bulunduğunu.

İçe aktardığınız simge tuval boyunca savruluyorsa yol koordinatlarını değiştirmeden önce bu referansı inceleyin. Parçaları ayrı ayrı dönüyorsa dönüşümün hangi öğelere uygulandığını kontrol edin. Mevcut vektör görsellerinde genellikle gruplama veya dönüşüm düzeltmesi gerekir; vektörleştirme yalnızca önce bir raster görüntüden düzenlenebilir yollar elde etmeniz gerektiğinde faydalıdır.

Tek başına center neden görseli yine de taşıyabilir?

Yol veya grup gibi sıradan bir SVG alt öğesi için varsayılan dönüşüm başlangıç noktası 0 0 değeridir. Kök SVG öğelerinin varsayılanı farklıdır. Varsayılan transform-box: view-box ayarında başlangıç noktasını center yapmak, görselin kendi sınırları yerine SVG’nin referans görüntüleme alanını esas alır. MDN’nin SVG transform-origin başvuru kaynağı belgesi hem varsayılanları hem de bu istisnaları açıklar.

Bu nedenle logonun çevresindeki boşluk önemlidir. Büyük bir çizim alanının bir köşesine yakın yerleştirilen küçük bir sembolün merkezi, çizim alanının merkezinden farklıdır. transform-box: fill-box, referansı öğenin nesne sınırlayıcı kutusuna geçirir. SVG’yi kırpmaz veya boşluğu kaldırmaz. transform-box başvuru kaynağı belgesi, konturu da kapsayan bir referans gerektiğinde kullanılabilecek stroke-box dahil mevcut kutuları tanımlar.

İki yolu tek bir işaret olarak döndürün

Bu eksiksiz örneği rotation.svg olarak kaydedin ve tarayıcıda açın. Özgün bir kare ve ondan ayrı duran üçgen bir vurgu kullanır; ikisi de koordinat başlangıcından uzakta konumlandırılmıştır. Bağımsız dosyanın kendi döndürme kuralını taşıması için CSS, SVG’nin içinde yer alır.

<svg xmlns="http://www.w3.org/2000/svg"
  width="480" height="360" viewBox="0 0 280 210"
  role="img" aria-label="Two-piece artwork rotated around its shared center">
  <style>
    .artwork {
      transform-box: fill-box;
      transform-origin: center;
      transform: rotate(35deg);
    }
  </style>
  <g class="artwork">
    <path fill="#147d78" d="M80 50H160V130H80Z" />
    <path fill="#ed9750" d="M170 70L220 90L170 110Z" />
  </g>
</svg>

Döndürmeden önce birleşik görsel x = 80 ile 220 ve y = 50 ile 130 arasında uzanır. Kutusu 140 birim genişliğinde ve 80 birim yüksekliğindedir; dolayısıyla merkezi (150, 90) noktasıdır. Grup döndüğünde kare ve vurgu birbirlerine göre konumlarını korur.

Aynı yolların dört sabit açılı durumunu tarayıcıda çizdirdik, geometrilerini okuduk ve yukarıdaki eksiksiz SVG’yi ayrıca yeniden açtık. Karşılaştırmada, varsayılan başlangıç noktasıyla elde edilen sonuca yer bırakmak için daha geniş görüntüleme alanları kullanılır. Bunlar elle yazılmış gösterim yollarıdır; PerfectVector dönüşüm çıktısı veya tüm tarayıcı ve düzenleyicilerin testi değildir.

Varsayılan başlangıç noktasını kullanan sürüm, işareti (0, 0) etrafında hareket ettirir. Ortalanmış iki grup sürümü eşleşir. Son panelde kare (120, 90) etrafında dönerken üçgen vurgu (195, 90) etrafında döner. Her parça kendi başlangıç konumuna yakın kalır, ancak işaret artık tek bir nesne olarak dönmez.

Kendi dosyanızda yalnızca birlikte hareket etmesi gereken parçaları seçin. Arka plan dikdörtgenleri, baskı hizalama işaretleri veya uzakta kalmış gereksiz yollar, bir grubun sınırlarını büyütebilir. SVG düzenleme iş akışı, davranış eklemeden önce dosyayı incelemeyi ve temizlemeyi ele alır.

Dönme noktası bir tasarım tercihi olduğunda açık koordinatlar kullanın

Bir SVG dönüşüm özniteliği, açıyı ve dönme noktasını doğrudan belirtebilir. Örnekte <g class="artwork"> yerine <g transform="rotate(35 150 90)"> kullanın. İki yolu içinde bırakın. Sınıfı kaldırmak, CSS dönüşümünün özniteliğin önüne geçmesini de engeller.

Özniteliğin rotate(angle cx cy) biçimi, derece cinsinden açının ardından geçerli kullanıcı koordinat sistemindeki dönme noktasını kullanır. CSS rotate(35deg) farklı bir sözdizimine sahiptir ve başlangıç noktasını ayrı özellikten alır. Hem CSS dönüşümü hem de SVG dönüşüm özniteliği aynı öğeyi hedefliyorsa CSS önceliklidir. MDN’nin transform özniteliği başvuru kaynağı belgesine bakın.

Açık koordinatlar bir menteşe, ibre veya bilerek merkezden kaydırılmış logo dönme noktası için faydalıdır. Bunları döndürdüğünüz grupla aynı yerel koordinat sisteminde tutun. Ekranda ölçülen bir koordinat, otomatik olarak iç içe bir SVG grubuna yapıştırabileceğiniz bir koordinat değildir.

Mevcut grupta zaten bir yerleşim dönüşümü varsa bunu koruyun ve döndürmeyi, görseli içeren yeni bir iç gruba uygulayın. Ardından dışa aktarılan dosyayı test edin. Mevcut bir dönüşümü değiştirmek, işareti konumlandıran ötelemeyi veya ölçeği ortadan kaldırabilir. Ölçeği değiştirmek işareti de kaydırıyorsa SVG dönüşüm sırası örneği, öteleme ile ölçeklendirmenin nasıl birleştiğini gösterir.

Merkezi hesaplamadan önce sınırları okuyun

Bu örnekteki gibi basit bir grup için merkez hesabı şöyledir:

cx = x + width / 2
cy = y + height / 2

Tarayıcı ölçümümüzde grupta çağrılan getBBox(), x: 80, y: 50, width: 140 ve height: 80 değerlerini döndürdü. Grubun kendi dönüşü bu yerel kutu değerlerini değiştirmedi. getBBox belgesi, kullanıcı uzayındaki bu değerleri, dikdörtgeni tarayıcı görüntüleme alanına göre tanımlanan getBoundingClientRect() değerlerinden ayırır.

Seçim çerçeveleri veya sığdırılmış bir viewBox için SVG sınırlayıcı kutu iş akışı, bu koordinat sistemleri arasında nasıl dönüşüm yapılacağını ve kontur paylarının nasıl kontrol edileceğini gösterir.

Döndürmek istediğiniz öğeyi ölçün. Alt öğe dönüşümleri, kapsayıcı grubun sınırlarını etkileyebilir: alt öğeleri ayrı ayrı döndürülen grubumuzun sınırları, özgün ikiliden farklıydı. Yukarıdaki basit sayıları yeniden kullanmadan önce bir sarmalayıcı, iç içe bir ölçeklendirme veya gereksiz bir şekil incelenmelidir.

Kutu merkezi her zaman görsel merkez değildir

Bu örnekteki kare, üçgen vurgusundan çok daha fazla alan kaplar. Birleşik kutularının orta noktası yine de en soldaki ve en sağdaki kenarların tam ortasındadır. Bu geometrik bir kuraldır; tasarımın dönerken dengeli görünüp görünmediğini değerlendirmez.

Kutu merkeziyle başlayın, işareti birkaç açıda inceleyin ve tasarım gerektiriyorsa açıkça belirtilmiş bir dönme noktasına geçin. Saat ibresinin genellikle bağlandığı noktadan dönmesi gerekir. Merkezden uzakta bir vurgu içeren logonun, tasarımcı tarafından seçilmiş bir merkeze ihtiyacı olabilir. Bu kararı, yanlışlıkla görüntüleme alanına dayandırılmış bir başlangıç noktasını düzeltmekten ayrı tutun.

Döndürme için alan da gerekir. Döndürülmemiş görsele sıkı oturan bir dışa aktarım, görsel döndüğünde köşeleri kesebilir. Görüntüleme alanında yeterli yer bırakın ve üst öğelerdeki kırpmaları inceleyin. Dosyanın tamamı yanlış ölçekte içe aktarılıyorsa tek tek parçaları değiştirmeden önce SVG boyutu tanılama rehberini kullanın.

Bu iş akışı, mevcut bir şekli konturunu yeniden yazmadan döndürür. Amacınız bir konturu başka bir kontura dönüştürmekse SVG morph rehberi, yol geometrisini eşleştirmeye ilişkin bu ayrı sorunu ele alır.

Dönme noktasını ayarlamadan önce kaynağı hazırlayın

Simgeniz yalnızca PNG veya JPG olarak mevcutsa ve ayrı şekillerini düzenlemeniz gerekiyorsa PerfectVector bir SVG adayı hazırlamanıza yardımcı olabilir. Görseli vektöre dönüştürün, silüetini ve ayrı duran ayrıntılarını inceleyin, ardından birlikte dönmesi gereken parçaları gruplayın. Grubu ölçmeden önce istenmeyen arka plan şekillerini kontrol edin.

Bir raster görüntü, vektörleştirme yapılmadan bütün olarak dönebilir. Düzenlenebilir geometri işin bir parçasıysa vektörleştirmeyi kullanın. Elinizde zaten kullanılabilir bir vektör ana dosyası varsa onu koruyun; dönüşüm başlangıç noktasını değiştirmek, bozulmuş bir konturu onarmaz ve raster görüntü kopyasını vektörleştirmek gereksiz bir yeniden oluşturma adımı ekler.

Dosyayı teslim etmeden önce aynı SVG’yi hedef uygulamasında yeniden açın. Amaçlanan parçaların birlikte döndüğünü, dönme noktasının seçtiğiniz yerde kaldığını ve döndürülmüş görsele yeterli alan olduğunu doğrulayın. Daha sonra düzenlemek için değiştirilmemiş bir ana dosya saklayın. Blogdaki SVG iş akışı yazıları, ilgili hazırlık ve dışa aktarma kontrollerini ele alır.

Sık sorulan sorular

transform-origin: center, SVG’mi neden tuvalin etrafında döndürüyor? Varsayılan view-box referansını kullanan bir SVG alt öğesinde center, SVG’nin referans görüntüleme alanını esas alır. Bunun yerine nesne sınırlayıcı kutusunu kullanmak istiyorsanız döndüreceğiniz öğede transform-box değerini fill-box olarak ayarlayın.

Grubu mu, her yolu ayrı ayrı mı döndürmeliyim? Parçaların tek bir işaret olarak hareket etmesi gerekiyorsa grubu döndürün. Her yola fill-box ve center uygulamak, her parçaya kendi dönme noktasını verir ve birleşik düzenlerini değiştirir.

fill-box merkezi, asimetrik bir logoyu dengeli gösterir mi? Nesnenin sınırlayıcı kutusunun merkezini seçer. Görsel denge farklı bir dönme noktası gerektirebilir; bu nedenle logoyu birkaç açıda inceleyin ve gerektiğinde açık koordinatlar seçin.

Kaynaklar

1. MDN — SVG transform-origin — SVG başlangıç noktasının varsayılanlarını, kök öğe istisnalarını ve referans kutusuyla ilişkisini tanımlar.
2. MDN — transform-box — Nesne, kontur ve görüntüleme alanı referans kutularını tanımlar.
3. MDN — SVG transform — Açık döndürme koordinatlarını, grup dönüşümlerini ve CSS önceliğini belgeler.
4. MDN — getBBox — Yerel geometri ölçümlerini ve bunların görüntüleme alanı dikdörtgenlerinden farkını açıklar.

Bir raster görüntüden düzenlenebilir şekillere mi ihtiyacınız var? PerfectVector ile bir SVG hazırlayın, geri kazanılan parçaları inceleyin, ardından gruplayın ve son dışa aktarılan dosyada seçtiğiniz dönme noktasını kontrol edin.