SVG Desen Dönüşümü: Dolguyu Döndürün, Dış Hattı Koruyun

Sabit şeklin içinde SVG deseni döndürmek için pattern öğesine patternTransform="rotate(...)" koyun. Şeklin kendi dönüşümünü değiştirmeyin. Yinelenen çizimin denk geldiği yeri kaydırmak için aynı desende öteleme kullanın.

Bu düzenlemeler boyama koordinat sistemini taşır. Şekli içeren grubu döndürmek gösterilen geometrisini de taşır. Özgün delikli amblemimiz farkı görünür kılar: boyama dönerken dış hat dik kalır; ayrı tüm nesne kontrolü ise amblemi ve açıklığını yatırır.

Hareket etmesi gereken öğeyi seçin

Güncel patternTransform başvurusu, desen karosuna uygulanan dönüşüm listesini açıklar. SVG2 desen tanımı, karonun koordinat sistemlerini ve boyama dönüşümünü açıklar.

Bu örnekte motif, 24 birimlik karoda yinelenen küçük asimetrik bükülmüş işarettir. Boyamayı alan şekil farklı bir yoldur: dikdörtgen açıklığı olan asimetrik rozet. Bu rolleri ayrı tutmak düzenleme kararını netleştirir.

SVG özniteliğini doğrudan kullanıyoruz. MDN'nin CSS transform uygulaması hakkındaki notu, pattern-transform adlı CSS özelliğinin hedefinizde çalışacağı vaadi değildir.

Boyamayı dış hattın içinde döndürün

Eksiksiz boyama döndürme başlangıcını açın

Bu SVG'yi pattern-emblem.svg olarak kaydedip tarayıcıda açın. Harici görsel veya kütüphane içermeyen bağımsız dosyadır. Desen, kaynak noktası (100,80) çevresinde 30 derece döner; boyamayı alan grupta dönüşüm yoktur.

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">
  <defs>
    <pattern id="motif" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse" width="24" height="24" patternTransform="rotate(30 100 80)">
      <rect width="24" height="24" fill="#f4f0e4"/>
      <path d="M3 4 H15 V8 H9 V17 H3 Z" fill="#c15a38"/>
    </pattern>
  </defs>
  <g>
    <path id="emblem" d="M30 25 H130 L170 65 L140 135 H30 Z M65 60 H110 V100 H65 Z" fill="url(#motif)" fill-rule="evenodd"/>
  </g>
</svg>

evenodd dolgu kuralı iç dikdörtgeni açık bırakır. Kesişim tabanlı kural için fill-rule başvurusuna bakın. Açıklık amblem yoluna aittir; dolayısıyla yinelenen boyamayı döndürmek açıklığı döndürmez.

Bu kaynakta hem patternUnits hem patternContentUnits açıktır. patternUnits başvurusu, karo koordinat sistemini tanımlar. Desen birimleri kılavuzumuz, karo boyutlarını ve motif koordinatlarını ayrıntılı ele alır. Burada dönüşümü yalıtmak için bunları sabit tutuyoruz; bu kesintisiz tekrar tasarlama tarifi değildir.

Döndürmeyi, ötelemeyi ve geometri kontrolünü karşılaştırın

Başlangıcın üç kopyasını oluşturup yalnızca belirtilen özniteliği değiştirin:

1. Özgün boyama için desenden patternTransform özniteliğini kaldırın.
2. Kaydırılmış boyama için patternTransform="translate(7 5)" ile değiştirin.
3. Tüm nesne kontrolü için desen dönüşümünü kaldırıp boyamayı alan g öğesine transform="rotate(20 100 80)" ekleyin.

Ötelenmiş kopya motifin yönünü korur, ancak rozet içinde denk geldiği yeri değiştirir. Sınırdaki işaret boyalı şekle girebilir veya dışarı çıkabilir. Döndürme kopyası motifi ve tekrar örgüsünü birlikte döndürür; yalnızca her motifi kendi merkezi çevresinde çevirmez.

Nesne kontrolü için transform özniteliği başvurusu, seçilen nokta etrafında döndürmeyi belgeler. Bu dönüşüm grubun geometrisinin nasıl gösterildiğini değiştirir. Normal desen boyaması onunla birlikte taşınır; kullanıcı uzayı desen birimleri bu örneğin boyamasını küresel olarak sabit yapmaz.

Sonucu tanılarken tek dönüşümle başlayın. Daha sonra döndürme, öteleme ve ölçeklendirmeyi birleştirirseniz sıralarını SVG dönüşüm sırası kılavuzunda kontrol edin. Dönüşümleri birleştirmek, bu kontrollü karşılaştırmanın kaçındığı ayrı koordinat sorusunu getirir.

Geometriyi ve pikselleri ayrı doğrulayın

Dört özgün varyantı Chrome'da 200×160 ve 400×320 CSS pikselinde işledik. Tarayıcının cihaz piksel oranı 2 idi. Her kaynak ayrıca çözülüp arka tampon boyutları belirtilen test boyutuyla eşleşen tuvale çizildi; böylece piksellerini ekran görüntüsünden bağımsız okuyabildik.

Her dosya aynı amblem d dizgesini ve aynı motif yolunu içerir: iki path öğesi ve sıfır image öğesi. Dönüşümleri farklı olduğundan dosya karmaları farklıdır. Amblemin yerel geometri kutusu her durumda (30,25,140,110) değerindedir.

Yalnızca yerel kutu tüm nesne değişikliğini kaçırırdı. Bu çokgen amblemde beş dış köşeyi gerçek tarayıcı matrisinden de geçirdik ve gösterilen kapsamlarını ölçtük. Tablo, büyük görüntü alanını kaynak birimlerine geri normalleştirir:

Normalleştirilmiş kapsamlar iki test boyutunda eşleşti. Nesne kontrolü aynı d dizgesini korur, ancak gösterilen geometrisi değişir. Dolayısıyla kaynak verisi eşitliği, yol yapısının korunduğuna yararlı kanıttır; görünür dış hattın yerinde kaldığına yeterli kanıt değildir.

Yalnızca boyama varyantlarında tam tuval piksel tamponları her boyutta özgünden farklıydı. Kaynak noktası (45,45) konumunda özgün örnek karo arka planı (244,240,228), döndürülmüş boyama örneği kiremit rengi motif (193,90,56) idi; ikisinde de alfa 255'ti. Genel tamponu farklı olsa da öteleme o belirli örneği değiştirmedi. Tek örneklenmiş nokta boyama kaymasını kaçırabilir.

Kaynak (85,80) konumunda açıklık sekiz durumda da sıfır alfaya sahipti. Tam opak piksel sınırları da her boyutta üç dik varyantta değişmedi; eşiklenmiş piksel sınırları, tam kontur köşesi kapsamlarıyla aynı ölçüm değildir. Bu gözlemler özgün kaynağımız ve tarayıcımızla sınırlıdır; işleyici uyumluluk belgesi değildir.

Teslimden önce kaydedilmiş hedefi kontrol edin

Özgün amblemi geometri referansı olarak tutun, boyama efektini ayrı kopyada koruyun. Yinelenen boyama sunucusu, her görünür motifi sonraki kesici veya düzenleyicinin seçebileceği bağımsız şekle dönüştürmez. Hedef genişletilmiş geometri gerektiriyorsa bu genişletmeyi ayrı hazırlayıp inceleyin. SVG düzenleme kılavuzu, daha geniş kaynak değişikliklerini ele alır.

Dış hat beklenmedik dönüyorsa deseni ayarlamadan önce kendi grubunu ve üst öğe dönüşümlerini inceleyin. Birkaç satır içi kopya beklenmedik biçimde aynı boyama efektini paylaşıyorsa desen kimliklerine ve eşleşen dolgu başvurularına benzersiz adlar verin. Karşılaştırma testimiz bu kimlikleri yalıtır; ayrı bağımsız SVG dosyaları belge düzeyindeki bu kaynak ad alanını paylaşmaz.

Özel motifiniz veya ambleminiz yalnızca PNG veya JPG olarak mevcutsa ve düzenlenebilir konturlar gerekiyorsa PerfectVector ile SVG hazırlayın, dış hattı ve açıklığı inceleyin, temiz ana dosyayı koruyun. Ardından SVG kodunuzda tekrarı oluşturup boyama dönüşümünü seçin. Vektörleştirme çizimi hazırlar; tekrarı tasarlamaz, fazını seçmez veya hedefin desen işlemesini garanti etmez. Mevcut temiz yollar doğrudan desen düzenlemeye geçebilir; vektörleştirme kılavuzu, raster dönüşümünün ne zaman yararlı olduğunu açıklar.

Sık sorulan sorular

patternTransform amblemimin yol verilerini değiştirir mi? Bu örnekte desen boyamasını dönüştürür. Amblemin d dizgesi değişmez. Gösterilen geometri d değişmeden hareket edebildiğinden boyamayı alan grubun ve üst öğelerin dönüşümlerini de inceleyin.

Deseni döndürmeden kaydırabilir miyim? Evet. translate(7 5) varyantı motif yönünü korurken boyama yerleşimini kaydırır. Etkiyi sınarken karo boyutlarını ve boyamayı alan geometriyi sabit tutun.

Grubun tamamını döndürünce desen neden dönüyor? Grup dönüşümü, boyamayı alan gösterilmiş geometriyi ve boyamasını değiştirir. Bu, yalnızca pattern öğesine dönüşüm koymaktan farklı işlemdir.

Yinelenen motifler ayrı düzenlenebilir yollar mı? Kaynağımızda boyama sunucusu içinde tek motif yolu ve boyamayı alan tek amblem yolu vardır. Görünür tekrarlar ayrı oluşturulmuş path öğeleri değildir; hedefiniz bu biçimi gerektiriyorsa bunları ayrı genişletip inceleyin.

Kaynaklar

1. MDN — patternTransform — Desen dönüşüm listeleri ve öznitelik uygulama notu.
2. W3C — SVG2 desenleri — Karo koordinat sistemleri ve boyama dönüşümü.
3. MDN — fill-rule — Boyamayı alan yoldaki çift-tek açıklık.
4. MDN — transform — Gösterilen grup geometrisine uygulanan döndürme.
5. MDN — patternUnits — Bu karşılaştırmada sabit tutulan açık karo koordinat sistemi.