SVG kabıyla aynı boyutta bir dikdörtgen şekli olduğunu varsayalım. Buna kontur eklediğinizde, gördüğünüz dikdörtgenin kenarlığı gerçek genişliğinin yalnızca yarısı kadar olur.
<svg viewBox="0 0 10 10">
<rect
width="10"
height="10"
fill="none"
stroke="#38c2"
/>
</svg>Diğer yarısı SVG’nin görünür alanının dışındadır ve kırpılır. Bunu ortaya çıkarmak için overflow özelliğini değiştirebilirsiniz.
<svg overflow="visible">
...
</svg>Dikdörtgeni tamamen görünür alana yerleştirmek için, ya dikdörtgeni yeniden konumlandırıp boyutunu küçültün ya da viewBox değerini aşağıda gösterildiği gibi ayarlayın.
<svg viewBox="-.5 -.5 11 11">
...
</svg>stroke-align
Geçen gün SVG Çalışma Taslağında yeni bir özellik olan stroke-align‘ın iyi bir şekilde belgelendiğini öğrendiğimde çok sevindim. Sağladığı inset değeri tam olarak aradığım şey.
<rect stroke-align="inset" ... />Kötü haber şu ki, tarayıcıda ne zaman kullanıma sunulacağını bilmiyoruz.
Dolgu (Padding)
I then revisited the viewBox property and tried to find a way to simplify its modification. One idea was to extend the viewBox value to support padding.
viewBox="0 0 10 10 padding .5"
/* translates to */
viewBox="-.5 -.5 11 11"Bu yaklaşım okunabilirliği artırır ve ayrıca hata ayıklamayı kolaylaştırır. Test sırasında viewBox dört değerini değiştiriyordum, şimdi yalnızca birini değiştiriyorum.
Daha iyi anahtar kelime?
Genişletme gibi alternatif anahtar kelimeler daha kesin olsa da, viewBox içeriğe uyacak şekilde değiştirmek görsel olarak CSS dolguları eklemeye benzediğinden, padding adı web geliştiricileri için daha anlaşılırdır.
Örnek
Burada, tüm şekillerin SVG’nin görüntülenebilir alanı içinde tam olarak yer almasını sağlamak için dolgu kullanımına bir örnek verilmiştir.
svg {
viewBox: 0 0 10 10 padding .2;
stroke: #000;
stroke-width: .4;
stroke-linecap: round;
line*10x10 {
x1, y1, x2, y2: @p(
@nx(-1) @ny(-1) @nx @ny,
@nx @ny(-1) @nx(-1) @ny,
@nx @ny(-1) @nx @ny
);
}
}