Running crop…
``` Bunu `crop.js` olarak kaydedin. Klasörü yerel HTTP sunucusuyla sunup `index.html` dosyasını açın; betik yanındaki SVG dosyasını alır. ```js (async () => { paper.setup(document.getElementById('work')); const source = await (await fetch('source.svg')).text(); const imported = paper.project.importSVG(source, { insert: false, expandShapes: true }); const crop = new paper.Path.Rectangle({ rectangle: new paper.Rectangle(60, 40, 160, 120), insert: false }); const delivery = new paper.Group({ insert: false }); const rows = []; for (const name of ['frame', 'triangle', 'leaf', 'outside']) { const operand = imported.getItem({ name }); if (!(operand instanceof paper.Path || operand instanceof paper.CompoundPath)) { throw new Error('Expected filled path: ' + name); } const result = operand.intersect(crop, { insert: false, trace: true }); if (Math.abs(result.area) < 1e-8) { rows.push({ name, removed: true }); result.remove(); continue; } result.fillColor = operand.fillColor.clone(); result.fillRule = operand.fillRule; result.strokeColor = null; result.opacity = 1; result.name = 'cropped-' + name; delivery.addChild(result); rows.push({ name, result: result.className, fill: result.fillColor.toCSS(true), area: result.area }); } delivery.translate(new paper.Point(-60, -40)); paper.project.activeLayer.addChild(delivery); const output = paper.project.exportSVG({ asString: true, precision: 6, bounds: new paper.Rectangle(0, 0, 160, 120) }); document.getElementById('svg-output').textContent = output; document.getElementById('receipt').textContent = JSON.stringify({ paper: paper.version, rows, export_precision: 6, viewport: [0, 0, 160, 120] }, null, 2); document.getElementById('status').textContent = 'Intersection/export executed. Save the exact visible SVG output as cropped.svg and open that saved file independently.'; })().catch(e => { document.getElementById('status').textContent = 'FAIL: ' + e.message; }); ``` Açık ad listesi bu kaynağın boyama sırasını izler. Tutulan her sonuç kendi düz dolgusunu alır ve o sırada eklenir. Tüm çizimi önce tek siluette birleştirmek, korumak istediğimiz ayrı renk bölgelerini kaybettirirdi. [Paper.js Boolean kılavuzumuz](https://perfectvector.com/tr/blog/paperjs-svg-booleans) farklı birleşim ve çıkarma görevini ele alır. Tamamen dışarıda kalan sarı nesne boş kesişim verir ve eklenmez. Küçük alan eşiği yalnızca bu örnek için bir korumadır; rastgele çizimlerden ince ayrıntıları silme izni değildir. Tutulan geometriyi `(-60, -40)` kadar taşır ve sıfırdan başlayan `160 × 120` görüntü alanına aktarırız. Bu taşıma çıktının koordinat başlangıcını değiştirir. İstenmeyen dış geometriyi kaldıran kesişim işlemidir; yalnızca başlangıcı veya görüntü alanını değiştirmek bunu yapmaz. Paper.js'nin [proje dışa aktarma başvurusu](https://paperjs.org/reference/project/), burada kullanılan açık sınırları ve sayısal hassasiyeti belgeler. ## Gerçek SVG'yi kaydedin, yeniden açın ve inceleyin Görüntülenen SVG işaretlemesini aynen `cropped.svg` içine kopyalayın. Yalnızca programın bellekteki önizlemesine güvenmek yerine kaydedilmiş dosyayı bağımsız açın. Örneğimizde ayrı bir sayfa kaydedilmiş dosyayı yükledi, yeni Paper.js kapsamına aktardı ve tarayıcının SVG görüntü render motoruyla gösterdi.  *Özgün hazırlanmış çokgensel çizim ve gerçek kaydedilmiş dosya kontrolleri. Kesme özgün nesnelerini tutar; kesişim çıktısı yalnızca tutulan geometriyi içerir. Bu, her SVG veya kesiciyle uyumluluğu göstermez.* Kontroller dosya yapısını, geometriyi ve görünümü ayırır: * Dışa aktarılan SVG üç sonuç yol öğesi içerir; çerçeve açıklığını koruduğundan dört kapalı kontur vardır. * Bu kontrollü çıktıda kırpma yardımcısı, özgün nesne kimlikleri, kesme yolları, maskeler, raster görüntüler ve efekt öğeleri yoktur. * Yeniden açılan her kontur kapalıdır ve düz parçalardan oluşur. Tüm köşeleri, `0.00001` kullanıcı birimi toleransıyla çıktının `0…160` ve `0…120` bölgesinde kalır. * Amaçlanan açıklık dolgulu geometrinin dışında ve render edilen dosyada saydam kalır. Turuncu bölge, kontrol edilen örtüşme noktasında yine turkuazın üzerinde görünür. * Tarayıcı render karşılaştırması, yalnızca kesilmiş önizlemeyi kırpılmış dosyayla aynı boyutta, geometri incelemesinden ayrı karşılaştırır. Bu dikdörtgen bölge ve düz parçalı örnekte her köşeyi ve kapanış kenarlarını kontrol etmek, saklanan konturların bölge içinde kaldığını kanıtlar. Tutamaçlı eğri veya içbükey kırpma farklı bir içerilme kontrolü gerektirir; birkaç örnek nokta aynı sonucu kanıtlamaz. Görüntü karşılaştırmamız `640 × 480` raster kullanır ve bir kanal birden fazla farklıysa değişen pikseller için %0,5'lik açık tolerans tanımlar. Kaydedilmiş dosya renderı 307.200 pikselin 77'sinde, yaklaşık %0,0251 oranında farklıydı; dolayısıyla ölçütü geçti. Piksel olarak birebir aynı değildi: Tek kanaldaki en büyük fark 255'ti. Bu görsel karşılaştırma toleransıdır, geometri toleransı değildir. Kenara yakın yumuşatma ve gerçekten korunmuş dış yol farklı sorunlardır. Bu işlem kırpmanın dışındaki geometriyi kaldırır. Tutulan renkli nesneler arasındaki her örtüşmeyi kaldırmaz. İç örtüşmeler boyama sırasında kalır; test edilen örtüşme noktası amaçlanan üst rengi doğrular. Boyanmış tüm gizli örtüşmeleri düzleştirmek ayrı bir görevdir. ## Çizim farklı gösterim gerektiriyorsa durun Bu örnek açık merkez çizgilerini, konturları, eğri işlenenleri, degradeleri, yumuşak maskeleri, raster görüntüleri, filtreleri, iç içe rastgele kesme yığınlarını veya yarı saydam örtüşen boyaları desteklediğini kanıtlamaz. Bu özellikleri kaldırıp görünümün korunduğunu varsaymayın. Konturlu rota ve o konturun dolgulu dış hattı farklı geometridir. İş, görünür kontur alanını dolgulu şekil olarak gerektiriyorsa Boolean iş akışını seçmeden önce uygun düzenleyicide konturu dış hatta çevrilmiş kopya hazırlayıp inceleyin. Düzenlenebilirlik önemliyse özgün konturu tutun. Yumuşak maske, tüm solan kenarları korunarak sert kesişimle değiştirilemez. Tek seferlik düzenlemede gerekli nesneleri seçip incelemek vektör düzenleyicide daha kolay olabilir. Hangi aracı seçerseniz seçin kaydedilmiş sonucun deliklerini, renklerini ve sınırlarını kontrol edin. Dışa aktarma hassasiyeti ve çok küçük ayrıntılar sonraki kullanımdan önce özellikle dikkat gerektirir. ## Eksik vektör çizimini yalnızca gerektiğinde kurtarın Kaynak mevcut düzenlenebilir SVG ise o geometriyi doğrudan kırpın. Yalnızca uygun raster küçük resim kaldıysa ve düzenlenebilir şekiller gerekiyorsa [PerfectVector'ın küçük resim iş akışı](https://perfectvector.com/tr/clipart-to-svg) önce SVG adayı oluşturabilir. Kırpmadan önce kurtarılan konturları, açıklıkları ve ayrı dolguları inceleyin. Vektörleştirme piksellerden yollar oluşturur; istenen kırpma sınırını belirlemez veya Boolean sonucunu doğrulamaz. Özgün örneğimiz doğrudan hazırlanmış, izlenmemiştir. Dokusu gerekiyorsa ve teslim biçimi amaçlanan raster kırpmayı destekliyorsa raster çizimi koruyun. Vektör kırpma, her görüntünün SVG olması gerektiğinden değil, sonraki adımın geometri gerektirmesinden dolayı yararlıdır. ## Ana dosyayı kaybetmeden kırpmayı tamamlayın 1. Kırpılmamış ana dosyayı koruyup amaçlanan kapalı dolgulu nesneleri belirleyin. 2. Kırpmayı bu nesnelerle aynı koordinat bağlamında tanımlayın. 3. Her nesnenin kesişimini alın, test edilmiş stilini ve boyama sırasını koruyun; yardımcıları ve özgünleri teslim sahnesinden çıkarın. 4. Yalnızca tutulan geometriyi bilinçli sınırlar ve hassasiyetle dışa aktarın. 5. Kaydedilmiş dosyayı yeniden açıp gerçek yollarını, açıklıklarını, görünümünü ve amaçlanan hedefini ayrı kontrol edin. Kaydedilmiş dosya bölge içinde amaçlanan geometriyi içerip gerekli delik ve renk ilişkilerini koruduğunda sınırlı kırpma tamamlanır. Dış geometri kalırsa özgün proje içeriğini dışa aktarıp aktarmadığınızı veya yalnızca kesmeyi ya da görüntü alanını değiştirip değiştirmediğinizi inceleyin. Açıklık dolarsa daha çok nesne birleştirmeden önce bileşik yolu ve dolgu kuralını kontrol edin. Özgün çokgensel örnek için kaydedilmiş dosya görevini tamamladık. Kesiciye aktarmadık, fiziksel çıktıyı test etmedik veya genel SVG uyumluluk garantisi oluşturmadık. ## Sık sorulan sorular **SVG'ye kesme uygulamak dış yollarını kalıcı siler mi?** Kesme, başvurulan geometriyi korurken renderı sınırlar. Kalıcı geometrik kırpma, uygun yol işlemi ve yalnızca sonuçları içeren çıktı gerektirir. **Önce şekilleri birleştirerek tüm renkleri kırpabilir miyim?** Tek birleşim, korumak istediğiniz ayrı dolgu bölgelerini kaybettirebilir. Bu örnek düz dolgulu her nesnenin kesişimini ayrı alır ve kaynağın boyama sırasını korur. **Daha küçük viewBox gizli çizimi kaldırır mı?** Görüntü alanı eşlemesini ve gösterilen bölgeyi değiştirir. Kendi başına o bölgenin dışındaki kaynak yollarını silmez. Önizlemeyle birlikte kaydedilmiş geometriyi de inceleyin. **Sonuç her kesim uygulamasında çalışır mı?** Bu tarayıcı testi bunu kanıtlamaz. Amaçlanan hedefte içe aktarılan geometriyi ve işlemleri inceleyin, ardından uygun üretim kontrolünü yapın. ## Kaynaklar 1. [MDN: SVG clipPath](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/clipPath) — Kesme, başvurulan öğenin geometrisini değiştirmeden renderı etkiler. 2. [Paper.js: PathItem](https://paperjs.org/reference/pathitem/) — Kesişim sonuçları ve alana dayalı Boolean seçenekleri. 3. [Paper.js: Project](https://paperjs.org/reference/project/) — SVG içe aktarma, proje içeriği, dışa aktarma sınırları ve sayısal hassasiyet. *** Yalnızca bitmap küçük resim kaynağından yollar mı gerekiyor? [SVG adayı hazırlayın](https://perfectvector.com/tr/clipart-to-svg), deliklerini ve dolgularını inceleyin; ardından ayrı çalışma kopyasını kırpıp teslimden önce kaydedilmiş sonucu yeniden açın. ## Explore - [Read the HTML article](https://perfectvector.com/tr/blog/permanent-crop-svg) - [SVG feComposite: in, out ve xor Çizimlerini Karşılaştırın](https://perfectvector.com/tr/blog/svg-composite-artwork.md) - [SVG z-index çalışmıyor mu? Yol sırasını düzeltin](https://perfectvector.com/tr/blog/svg-z-index-order.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)