Cytoscape.js SVG Düğüm Görselleri: Sığdırma ve Boşluk
Çalışan bir örnekle özel SVG çizimini Cytoscape.js düğümlerine sığdırın. Kaynak boşluğunu, contain ve cover'ı karşılaştırın; yüklemeyi ve etiket yerleşimini kontrol edin.
Bu sayfada
Düğümün background-image stilinde bir SVG görsel URL'si kullanın, ardından göstermek istediğiniz çizim için sığdırma biçimini seçin. Amblem yükleniyor ancak küçük görünüyorsa graf düğümünü büyütmeden önce SVG görüntü alanındaki boşluğu inceleyin. Uçları kayboluyorsa görselin oranlarını düğümle karşılaştırıp kırpmayı kontrol edin.
Cytoscape.js, contain, cover ve none sığdırmaları dâhil SVG düğüm arka planlarını belgeler. Bu kılavuz, kaynak sınırlarını graf stilinden ayırmak için özgün, tek yollu bir amblem kullanır. Düzenlenebilir çizim ana dosyasını graf yapılandırmasının yanında saklayın.
Kaynak görseli graf düğümünden ayırın
İncelenecek üç kutu vardır: çizimin çizilmiş sınırları, SVG görselinin görüntü alanı ve düğüm gövdesi. SVG viewBox, görüntü alanına eşlenen kaynak koordinat dikdörtgenini tanımlar. Görünür çizimden çok daha fazla alan içerebilir.
Sıkı sınırlı kaynağımız 120 × 60'tır; mercan rengi amblem x=6'dan x=114'e, y=6'dan y=54'e uzanır. Ortadaki açıklık aynı yolun bir parçasıdır:
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg>
<svg xmlns="http://www.w3.org/2000/svg"
width="120" height="60" viewBox="0 0 120 60">
<path fill="#f36f59" fill-rule="evenodd"
d="M6 30L30 6H90L114 30L90 54H30Z M50 20H70V40H50Z"/>
</svg>Boşluklu varyant yalnızca dış SVG boyutlarını ve viewBox değerini değiştirir:
<svg xmlns="http://www.w3.org/2000/svg"
width="200" height="140" viewBox="-40 -40 200 140">Aynı başlığı, yolu ve kapanış etiketini koruyun. İki dosya da özdeş yol koordinatlarını çizer. İkincisi bunların etrafına daha fazla boş kaynak alanı koyar. Bu boşluk görselle birlikte ölçeklendiğinden arka plan sığdırmasını değiştirmek, uygun kaynak sınırları seçmenin yerini güvenilir biçimde tutamaz. Dosyanın görüntü alanı ve görünür çizim uyuşmadığında SVG sınırlama kutusu kılavuzu yardımcı olur.
Dört durumlu örneği çalıştırın
Cytoscape.js 3.34.3 sürümünü, yerel sunulan resmî ve sürümü sabitlenmiş tarayıcı paketiyle sınadık. Bu sürüm etiketindeki paketi, aşağıdaki example.html dosyasının yanına cytoscape-3.34.3.min.js olarak kaydedin. Klasörü örneğin python3 -m http.server 8000 ile yerel HTTP üzerinden sunun ve http://localhost:8000/example.html adresini açın.
Örnek, özgün SVG'yi veri URI'sine kodlar. encodeURIComponent(), dolgu rengimizdeki # dâhil URI karakterlerini kaçış dizileriyle kodlar. Kütüphanenin SVG rehberi, Base64 yerine bu kodlamayı ve burada gösterilen XML başlığını önerir. Bu, harici yazı tipi veya görsel içermeyen, kendi kendine yeterli tek amblemdir.
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>SVG node fit comparison</title>
<style>
body { font: 16px system-ui; margin: 20px; }
#cy { width: 1100px; height: 250px; border: 1px solid #ddd; }
#status { white-space: pre-wrap; }
</style>
<div id="cy"></div>
<pre id="status">Loading images</pre>
<script src="cytoscape-3.34.3.min.js"></script>
<script>
const header = '<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg>';
const path = 'M6 30L30 6H90L114 30L90 54H30Z M50 20H70V40H50Z';
function artwork(padded) {
const width = padded ? 200 : 120;
const height = padded ? 140 : 60;
const viewBox = padded ? '-40 -40 200 140' : '0 0 120 60';
return header + `<svg xmlns="http://www.w3.org/2000/svg"
width="${width}" height="${height}" viewBox="${viewBox}">
<path fill="#f36f59" fill-rule="evenodd" d="${path}"/></svg>`;
}
const cases = [
['tight contain', false, 'contain'],
['tight cover', false, 'cover'],
['padded contain', true, 'contain'],
['padded cover', true, 'cover']
].map(([label, padded, fit]) => ({
label, fit,
image: 'data:image/svg+xml;utf8,' + encodeURIComponent(artwork(padded))
}));
Promise.all(cases.map(item => new Promise((resolve, reject) => {
const image = new Image();
image.onload = () => resolve({
label: item.label,
width: image.naturalWidth,
height: image.naturalHeight
});
image.onerror = () => reject(new Error(item.label + ' failed to load'));
image.src = item.image;
}))).then(loaded => {
cytoscape({
container: document.getElementById('cy'),
elements: cases.map((item, index) => ({
data: { id: 'n' + index, ...item },
position: { x: 110 + index * 260, y: 95 }
})),
style: [{ selector: 'node', style: {
width: 120, height: 80, padding: 0, shape: 'rectangle',
'background-color': '#f1f3f5',
'background-image': 'data(image)',
'background-fit': node => node.data('fit'),
'background-width': 'auto', 'background-height': 'auto',
'background-width-relative-to': 'inner',
'background-height-relative-to': 'inner',
'background-position-x': '50%', 'background-position-y': '50%',
'background-repeat': 'no-repeat', 'background-clip': 'node',
'border-width': 1, 'border-color': '#222',
label: 'data(label)', 'text-valign': 'bottom',
'text-halign': 'center', 'text-margin-y': 10, 'font-size': 12
}}],
layout: { name: 'preset', fit: false },
zoom: 1, pan: { x: 0, y: 0 },
userZoomingEnabled: false, userPanningEnabled: false,
boxSelectionEnabled: false
});
document.getElementById('status').textContent =
'Cytoscape ' + cytoscape.version + '\n' +
JSON.stringify(loaded, null, 2);
}).catch(error => {
document.getElementById('status').textContent = error.message;
});
</script>
</html>Durum bloğu, graf başlatılmadan önce önceden yüklenen görsellerin boyutlarını bildirir. naturalWidth, MDN'nin açıkladığı gibi görselin içsel, yoğunluğa göre düzeltilmiş genişliğini CSS pikseli cinsinden okur. Bu testte sıkı sınırlı görseller 120 × 60, boşluklu görseller 200 × 140 bildirdi. Bunlar mercan rengi yolun ölçümleri değil, görsel boyutlarıdır.
Aynı düğüm boyutunda neyin değiştiğini karşılaştırın
Dört model düğümünün tamamı, sıfır düğüm iç boşluğuyla 120 × 80'dir. Özgün testi Chrome'da graf yakınlaştırması 1 ve 1,5 iken inceledik. Düğüm stili 120 × 80 kaldı; bildirilen işlenmiş boyutları 1,5'te 180 × 120 oldu. Bu, o tarayıcıdaki sabit karşılaştırmadır; uyumluluk veya yakınlaştırma performansı ölçütü değildir.
| Kaynak ve sığdırma | Bu testte gözlenen görünüm |
|---|---|
| Sıkı sınırlı, contain | Sivri uçları görünür, eksiksiz amblem |
| Sıkı sınırlı, cover | Sol ve sağ uçları düğümde kırpılan daha büyük amblem |
| Boşluklu, contain | Büyük miktarda boş alanla çevrili daha küçük amblem |
| Boşluklu, cover | Boşluklu contain'den biraz büyük, sıkı sınırlı durumlardan hâlâ çok küçük |
Sıkı sınırlı kaynağın görsel oranı 2:1, düğümün oranı ise 1,5:1'dir. 120 × 60 görselin tamamını 120 × 80 içine sığdırmak dikey boşluk bırakır. Düğümü kaplamak, görseli kırpmadan önce 160 × 80'e ölçekler; böylece yatay uçları gövdenin dışına uzanır.
Boşluklu kaynakta kullanılabilir görsel dikdörtgeni her yanda 40 birim ek alan içerir. Contain sığdırmada ölçek 120/200 yerine 80/140 ile sınırlanır. Bu nedenle genişliği değişmeyen 108 birimlik amblem yaklaşık 62 model birimi kaplar. Bu sayı, ekran görüntüsünün piksel ölçümü değil, belirtilen boyutlardan yapılan hesaptır.
Sığdırmayı çizim sınırlarını inceledikten sonra seçin
Amblemin tamamı önemliyse sıkı sınırlı kaynak ve contain ile başlayın. Görünür kalması gereken kontur veya efektler için yeterli kaynak payı bırakın. Görüntü alanını fazla daraltmak gerekli çizimi kırpabilir; bu, her kenar boşluğunu kaldırma talimatı değildir.
Kenar kırpması tasarım için kabul edilebilirse cover kullanın. Örneğimizde sivri uçları gizler; dolayısıyla bu uçlar amblemin kimliğini belirliyorsa kötü bir seçimdir. Daha geniş düğüm sığdırma oranını değiştirip uçları gösterebilir, ancak graf düzenini de değiştirir. İki boyutu orantılı büyütmek aynı kırpmayı korur. Hangi kısıtı değiştirmek istediğinize karar verin.
Bu karşılaştırma için background-width ve background-height değerlerini auto tutun. Açık değerler, sığdırma için kullanılan görsel boyutlarını geçersiz kılabilir. Düğüm padding değeri başka ayrı bir girdidir; kütüphane arka plan boyutlandırmasının bunu içerip içermediğini veya iç gövdeyi kullanıp kullanmadığını belgeler. Bu denetimleri eklemeden önce background-image başvurusuna bakın. Sıfır iç boşluklu testimiz önce kaynak boşluğunu yalıtır.
SVG düzeyindeki meet, slice ve hizalama kararları için preserveAspectRatio kılavuzuyla devam edin. SVG'nin iç sığdırmasını değiştirmek ve Cytoscape'in arka plan sığdırmasını değiştirmek ayrı işlemlerdir.
Kırpmayı tanılamadan önce yüklemeyi tanılayın
Durum bir yükleme hatası bildiriyorsa sonraki adım contain'i cover yapmak değildir. Görsel kaynağını tek başına açın, URL'sini ve belirtilen boyutlarını kontrol edin, ardından yukarıdaki yalnızca yoldan oluşan bağımsız ambleme indirgeyin. Veri URI'sinde ham işaretleme veya kaçış uygulanmamış renk değeri birleştirmek yerine SVG dizgesinin tamamını kodlayın.
Görsel olarak kullanılan SVG, belge olarak açılan SVG'den farklı kısıtlamalara sahiptir. MDN'nin görsel olarak SVG kılavuzu, görsel bağlamında betik ve harici kaynak kısıtlamalarını açıklar. Harici stil sayfasına veya yazı tipine bağımlı çizim dosyası ayrı bir teslim testi gerektirir. Bu örnek bağımlılıklardan kaçınır ve graf etiketlerini SVG dışında tutar.
Görsel yükleniyorsa belirgin biçimde geniş bir şekille sığdırmayı ve düğüm kırpmasını inceleyin. Ardından gerçek çiziminizi, uygulamanızın desteklediği düğüm boyutunda ve tarayıcı ortamlarında sınayın. Cytoscape belgeleri tarayıcıya özgü SVG hususlarına dikkat çeker; bu Chrome gözlemi Firefox veya diğer tüm motorlar için bunları çözmez.
Etiketleri ve düzenlenebilir çizimi ayrı tutun
Örnek, graf etiketleri için label: 'data(label)' kullanır ve SVG metni içermez. Amblemi yeniden oluşturmadan bu ifadeleri değiştirebilirsiniz. Graf, düğüm kimliğini, yerleşimini ve ilişkilerini yönetirken SVG yolu kaynak ana dosyasında kalır.
İncelenen test Canvas yüzeylerine çizim yaptı. Orada SVG arka plan görmek, onun iç yollarını ayrı düzenlenebilir graf öğelerine dönüştürmez. Açıklığı, silueti veya renkleri değiştirmeniz gerektiğinde ana dosyayı koruyun. Graf dışa aktarımı kendi seçilmiş dışa aktarıcısı ve teslim testi gereken ayrı bir iş akışıdır; bu kılavuz dışa aktarılan grafın düzenlenebilir amblem yollarını koruyacağını vaat etmez. Graphviz çizim kılavuzu, farklı bir diyagram işleyicisinin görsel başvurusu aktarımını inceler.
Özel ambleminiz yalnızca PNG veya JPG olarak mevcutsa bu kaynağı vektör çizime dönüştürün, ardından SVG sınırlarını ayarlamadan önce silueti, açıklığı ve küçük ayrıntıları inceleyin. PerfectVector düzenlenebilir kaynak geometrisini geri kazanmaya yardımcı olabilir. Arka plan stili, düğüm etiketleri ve graf dışa aktarımı ayrı adımlar olarak kalır. Uygun mevcut SVG doğrudan sığdırma kontrollerine geçebilir.
Sık sorulan sorular
SVG düğüm görselim cover kullanırken bile neden küçük? Kaynak görsel, yolunun etrafında büyük miktarda boş görüntü alanı içerebilir. Graf düzenini değiştirmeden önce aynı düğüm boyutlarında sıkı sınırlı kopyayla karşılaştırın.
Özel amblem için contain mi cover mı kullanmalıyım? Amblemin tamamı önemliyse contain seçin. Cover'ı yalnızca gözlenen kenar kırpması tasarımınız için kabul edilebilirse seçin ve kendi kaynağınızla düğüm şeklinizde doğrulayın.
SVG düğüm arka planı düzenlenebilir graf yolları oluşturur mu? Sınanan Canvas örneği SVG'yi görsel boyaması olarak kullanır. Yol düzenlemesi için çizim ana dosyasını saklayın; iç konturları bu örnekte ayrı graf düğümleri veya kenarları değildir.
Etiketleri SVG'ye koyabilir miyim? Bu örnek etiketleri graf verilerinde tutar ve yalnızca yollardan oluşan çizim kullanır. SVG metni, yazı tipleri ve görsel bağlamı bağımlılıkları kendi tarayıcı ve teslim kontrollerini gerektirir.
Kaynaklar
- Cytoscape.js — Arka plan görseli — görsel URL stili, sığdırma, boyut geçersiz kılmaları, iç boşluk referansları ve SVG hususları.
- Cytoscape.js — v3.34.3 sürümü — özgün test için kullanılan sabitlenmiş sürüm.
- Cytoscape.js — v3.34.3 tarayıcı paketi — tarayıcı testi için yerel sunulan resmî etiketli uygulama.
- MDN — viewBox — kaynak koordinat dikdörtgeni ve görüntü alanı eşlemesi.
- MDN — encodeURIComponent — SVG veri URI bileşenini kaçış dizileriyle kodlama.
- MDN — naturalWidth — yol sınırlarından farklı olan yüklenmiş görsel boyutları.
- MDN — Görsel olarak SVG — görsel bağlamı kısıtlamaları ve bağımlılık kontrolleri.
Ambleminiz raster olarak başlıyorsa düzenlenebilir SVG ana dosyası oluşturun, konturlarını ve kaynak sınırlarını inceleyin, ardından kendi düğüm düzeninizde contain ile cover'ı karşılaştırın.
Bloga daha fazlası
Leaflet SVG İşaretçileri: Ucu iconAnchor ile Hizalayın
Görünür ucu iconAnchor'a eşleyerek Leaflet'te özel SVG işaretçilerini konumlandırın. viewBox boşluğunu, en boy oranı sığdırmasını ve simge boyutu değişikliklerini hesaba katın.
Ölçeği karıştırmadan SVG yol uzunluğunu ölçün
SVG yollarını tarayıcı kullanıcı birimlerinde ölçün, dönüşümleri ve nominal boyutu hesaba katın; kontur toplamını pathLength kalibrasyonundan ve makine hareketinden ayırın.
