SVG clipPath birimleri: özel şekli hedefe sığdırın

Kırpma şeklinin hedefin sınırlarıyla birlikte esnemesi gerektiğinde clipPathUnits="objectBoundingBox" kullanın. Önce şeklin koordinatlarını normalize edin. Açıkça belirlenmiş bir yerleşim veya şeklin oranlarını koruyan eşit ölçekleme gerektiğinde userSpaceOnUse kullanın.

Yalnızca özniteliği değiştirmek, yüzlerce birimle çizilmiş bir yolu sıfır ile bir arasında bir şekle dönüştürmez. Kırpma alanının neredeyse tamamını hedefin dışına taşıyabilir. Bu kılavuz, koordinat değişimini, ortaya çıkan deformasyonu ve eşkenar dörtgen boşluğu kare biçiminde koruyan ortalanmış bir sığdırmayı göstermek için özgün bir kitap ayracı silüeti kullanır.

Kırpma, görünürlüğü kontrol eder. Alttaki yolları keserek yeni ve düzenlenebilir geometri oluşturmaz. Zaten temiz bir SVG silüetiniz varsa doğrudan kullanın; vektörleştirme, yalnızca silüeti bir raster görüntüden elde etmeniz gerektiğinde anlamlıdır.

Yeniden boyutlandırmadan önce koordinat sistemini seçin

Varsayılan değer userSpaceOnUse olur. Kırpma koordinatları, kırpmaya başvuran öğenin kullanıcı koordinat sistemine aittir. objectBoundingBox ile hedefin sol üst sınırı (0, 0), sağ alt sınırı ise (1, 1) noktasına eşlenir. MDN — clipPathUnits belgesine bakın.

Hedefin sınırlayıcı kutusu, dış SVG'nin viewBox alanıyla aynı olmak zorunda değildir. Bir grubu kırpmak, o grubun sınırlarını kullanır; bunlar grubun içindeki bir dikdörtgenden farklı olabilir. Öngörülebilir bir ilk test için kırpmayı, boyutları bilinen bir dikdörtgene doğrudan uygulayın.

Geniş bir hedefi uzun bir hedefle karşılaştırın

Kitap ayracımızın dış sınırları x=20, y=10, width=100, height=100 değerleridir. Eşkenar dörtgeni, aynı yolun içinde ikinci bir alt yoldur. Test, bu silüeti yerel SVG birimleriyle 200 × 120 ve 120 × 200 boyutlarında dikdörtgenlere uygular.

Orta sütun her hedefin sınırlarını doldurur, ancak eşkenar dörtgeni genişler veya uzar. Sağ sütun, eşkenar dörtgeni ve alt çentiği korur; hedefin uzun ekseni boyunca boşluk bırakır. Altı boşluğun tamamı şeffaf kalır.

Aşağıdaki eksiksiz örneği clippath-comparison.svg olarak kaydedip tarayıcıda açın. Sütunlar görseldeki sırayı izler. Üst satır geniş dikdörtgenler, alt satır ise uzun dikdörtgenler kullanır. Görüntüleme için yapılan ötelemeler örnekleri yerleştirir ve yerel hedef boyutlarını değiştirmez.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 470">
  <defs>
    <path id="silhouette" d="M20 10H120V110L70 85L20 110Z M70 30L85 45L70 60L55 45Z"/>
    <clipPath id="fixed" clipPathUnits="userSpaceOnUse">
      <use href="#silhouette" clip-rule="evenodd"/>
    </clipPath>
    <clipPath id="box" clipPathUnits="objectBoundingBox">
      <use href="#silhouette" clip-rule="evenodd"
        transform="matrix(.01 0 0 .01 -.2 -.1)"/>
    </clipPath>
    <clipPath id="wide-fit" clipPathUnits="userSpaceOnUse">
      <use href="#silhouette" clip-rule="evenodd"
        transform="matrix(1.2 0 0 1.2 16 -12)"/>
    </clipPath>
    <clipPath id="tall-fit" clipPathUnits="userSpaceOnUse">
      <use href="#silhouette" clip-rule="evenodd"
        transform="matrix(1.2 0 0 1.2 -24 28)"/>
    </clipPath>
  </defs>
  <g fill="#107c86">
    <rect x="0" y="0" width="200" height="120"
      transform="translate(20 30)" clip-path="url(#fixed)"/>
    <rect x="0" y="0" width="200" height="120"
      transform="translate(260 30)" clip-path="url(#box)"/>
    <rect x="0" y="0" width="200" height="120"
      transform="translate(500 30)" clip-path="url(#wide-fit)"/>
    <rect x="0" y="0" width="120" height="200"
      transform="translate(60 230)" clip-path="url(#fixed)"/>
    <rect x="0" y="0" width="120" height="200"
      transform="translate(300 230)" clip-path="url(#box)"/>
    <rect x="0" y="0" width="120" height="200"
      transform="translate(540 230)" clip-path="url(#tall-fit)"/>
  </g>
</svg>

Petrol yeşili boya dikdörtgenlere aittir. Kırpma yolu, görünür konturlarını sağlar. Ekran görüntüsü, aynı SVG'nin çevresine etiketler ve bir dama deseni ekler; bağımsız dosyanın kendisi şeffaf arka plana sahiptir.

Kaynak sınırlarını başlangıç noktalarıyla birlikte normalize edin

Sınırları (minX, minY, width, height) olan bir kaynaktaki (x, y) noktası için şunu hesaplayın:

normalizedX = (x - minX) / width
normalizedY = (y - minY) / height

Burada bu, (x - 20) / 100 ve (y - 10) / 100 olur. box tanımındaki matris, yol verisini yeniden yazmadan her iki işlemi gerçekleştirir:

matrix(0.01 0 0 0.01 -0.2 -0.1)

(20, 10) noktasını (0, 0) noktasına, (120, 110) noktasını ise (1, 1) noktasına eşler. Başlangıç noktasını çıkarmadan 100'e bölmek, şeklin hedefin içinde kaymış kalmasına neden olur. Sınırlayıcı kutu eşlemesi daha sonra normalize edilmiş sonucu, hedefin genişliği ve yüksekliği boyunca bağımsız olarak ölçekler.

Normalize etmek istediğiniz geometrinin gerçek sınırlarını kullanın. Bir viewBox, bilinçli olarak bırakılmış boşluklar içerebilir; bu nedenle boyutlarının silüetin sınırlarıyla aynı olması gerekmez. Bu boşluğu korumak istiyorsanız iki ölçümü yanlışlıkla karıştırmak yerine viewBox dikdörtgenini bilinçli olarak kullanın.

İç içe dönüşümler içeren içe aktarılmış çizimlerde, tek ve tutarlı bir koordinat sisteminde ölçüp normalize edin. Bu dönüşümleri güvenle hesaba katamıyorsanız ham yol verisini kopyalamadan önce bir düzenleyicide çözümleyin. SVG düzenleme iş akışı, teslimden önce yolların ve grupların incelenmesini ele alır.

Tek bir ölçek katsayısıyla oranları koruyun

Yerel (0, 0) konumunda, genişliği W ve yüksekliği H olan bir hedef dikdörtgen için şunu kullanın:

s  = min(W / width, H / height)
tx = (W - s * width) / 2 - s * minX
ty = (H - s * height) / 2 - s * minY
matrix(s 0 0 s tx ty)

Geniş hedefte s=1.2, tx=16 ve ty=-12 elde edilir. Kırpma alanı x=40..160 ve y=0..120 aralıklarını kaplar. Uzun hedefte s=1.2, tx=-24 ve ty=28 elde edilir; kırpma alanı x=0..120 ve y=40..160 aralıklarına yerleşir.

Bunlar userSpaceOnUse içinde açıkça belirtilmiş matrislerdir; dolayısıyla hedefin yerel boyutları değiştiğinde yeniden hesaplayın. SVG'nin tamamını farklı bir CSS boyutunda görüntülemek, kompozisyonu birlikte ölçekler. İçindeki bir dikdörtgeni genişten uzuna değiştirmek ise farklı bir işlemdir.

Bu hesaplama, kaynak genişliğinin ve yüksekliğinin sıfırdan farklı olduğunu ve hesaba katılmamış bir döndürme veya eğme bulunmadığını varsayar. Bu bir içeriye sığdırma işlemidir; boşluk kalması beklenir. Hedefi doldurmak motifin oranlarını korumaktan daha önemliyse sınırlayıcı kutu birimleriyle esnetme uygundur.

Boşluğu kırpma geometrisinin içinde tutun

Örnek, clipPath içindeki her use öğesine clip-rule="evenodd" yerleştirir. Başvurulan yol hem kitap ayracının dışını hem de eşkenar dörtgen alt yolunu içerir. Kural, bu bileşik şeklin hangi bölgelerinin kırpma alanı içinde olduğunu belirler.

Petrol yeşili dikdörtgene clip-rule koymak, kırpma şeklinin kuralını ayarlamaz. Benzer şekilde, kaynağı boyamak için kullanılan bir fill-rule, kırpma kuralının yerine geçmez. MDN — clip-rule, bu kuralın clipPath içindeki kapsamını açıklar.

Ayrı bir beyaz eşkenar dörtgen ekleyip kırpma alanından çıkarılmasını beklemeyin. Bir kırpma yolundaki alt öğe silüetleri görünür bir bölge oluşturmak üzere birleştirilir; boya renkleri siyah beyaz maske değerleri gibi davranmaz. Bunun gibi bir delik için bileşik yolu ve amaçlanan sarım kuralını kullanın. Dolan SVG delikleri kılavuzu, temel yol yapısını açıklar.

Tasarımınız kısmen şeffaf kenarlar veya parlaklığa dayalı görünürlük gerektiriyorsa aynı görüntüde clipPath ile SVG maskesini karşılaştırın. Kırpma geometrik bir sınır için kullanışlıdır; maske ise farklı bir görünürlük modeli sunar. CSS üzerinden boyanan tek renkli bir simge için SVG CSS maske kılavuzuna bakın.

Sınırları ve dışa aktarılan sonucu kontrol edin

Yatay veya dikey bir çizginin konturu görünür olsa bile geometrik sınırlayıcı kutusunun yüksekliği ya da genişliği sıfır olabilir. Bu tür hedeflerde objectBoundingBox kullanmayın ve normalize ederken sıfır olan bir kaynak boyutuna bölmeyin. SVG coordinate systems belirtimi, kontur genişliğini bu sınırlayıcı kutu hesabına dâhil etmez ve bu dejenere durumlara karşı uyarır.

Teslimden önce:

1. Başvurulan kırpma kimliğinin belgede mevcut ve benzersiz olduğunu doğrulayın.
2. En küçük boşluk dâhil olmak üzere geniş ve uzun hedefleri karşılaştırın.
3. Kaynak sınırlarını ve hedef sınırlarını, amaçlanan koordinat sistemlerinde kontrol edin.
4. Dışa aktarılan SVG'yi kaydedip onu kullanacak uygulamada yeniden açın.
5. Kırpmanın düzenlenebilir kalması gerekiyorsa özgün geometriyi saklayın.

CSS Masking belirtimi, kırpmanın öğenin kendi geometrisini değil, ekrana çizilmesini değiştirdiğini belirtir. Bu nedenle bir kesici veya geometri işleme uygulaması gerçek bir yol kesişimine ya da başka bir düzenleyici işlemine ihtiyaç duyabilir. Ortaya çıkan yolları o uygulamada doğrulayın; yalnızca doğru bir tarayıcı önizlemesi, dosyanın kesime hazır olduğunu kanıtlamaz.

Gerektiğinde raster bir silüeti elde edin

Özel bir motif yalnızca PNG veya JPG olarak kaldığında ve kırpma için düzenlenebilir konturlara ihtiyaç duyduğunuzda PerfectVector uygundur. Bu görüntüyü SVG'ye dönüştürün; ardından silüeti ayırmadan önce dış kenarı, iç boşlukları ve istenmeyen arka plan şekillerini inceleyin. Hangi konturların kırpma alanına ait olduğuna karar verin; kaynağın renkleri farklı kırpma güçleri tanımlamaz.

Varsa vektör biçimindeki mevcut asıl dosyayı saklayın. Bu örnekte olduğu gibi, basit bir geometrik kitap ayracı doğrudan çizilebilir. Vektörleştirme kırpma birimlerini seçmez, sınırları normalize etmez veya kalıcı bir Boolean kırpma işlemi gerçekleştirmez. Daha kapsamlı kaynak seçimi önerileri için görüntü vektörleştirmeye genel bakış yazısını okuyun.

Sık sorulan sorular

objectBoundingBox şeklin oranlarını korur mu? Hayır. Normalize edilmiş kırpma alanını, hedefin genişliğine ve yüksekliğine bağımsız olarak eşler. Silüetin oranlarının korunması gerektiğinde userSpaceOnUse içinde eşit ölçekleme kullanın.

clipPathUnits'i değiştirmek şeklimi neden gizliyor? Yol koordinatları hâlâ kaynağın özgün birimlerinde olabilir. Kaynağın başlangıç noktasını da hesaba katarak bunları hedefe göre tanımlanan koordinat sistemine normalize edin veya userSpaceOnUse değerini koruyup açıkça konumlandırın.

Kırpma, SVG'min gizli kısımlarını siler mi? Hayır. Kırpma, alttaki geometriyi korurken neyin ekrana çizildiğini değiştirir. Teslim edilen dosyada kalıcı olarak kesilmiş konturlar gerekiyorsa uygun bir yol düzenleme işlemi kullanın.

Kaynaklar

1. MDN — clipPathUnits — Koordinat seçenekleri ve varsayılan kullanıcı koordinat sistemi yorumu.
2. MDN — clip-rule — Kırpma yolları içinde sarım kuralının yerleştirilmesi.
3. W3C — SVG coordinate systems — Sınırlayıcı kutu eşlemesi, konturun hariç tutulması ve sıfır boyut sınırlamaları.
4. W3C — CSS Masking — Kırpma geometrisi, birleştirilmiş silüetler ve değişmeden kalan temel yollar.

Kırpmanız bir raster motifle başlıyorsa SVG'sini PerfectVector ile hazırlayın, silüeti ve boşlukları inceleyin; ardından esnetme veya eşit ölçekli sığdırma arasında seçim yapmadan önce her iki hedef oranını da test edin.