48 saatlik araştırmadan sonra, orantılı ölçeklendirme elde etmek için bunu yaptım:
NOT: Bu örnek React ile yazılmıştır. (: Değişim yani bunu kullanmıyorsanız, tire için deve vaka şeyler geri değiştirmek backgroundColoriçin background-colorve stil değiştirmek Objectbir için arkasını String).
<div
style={{
backgroundColor: 'lightpink',
resize: 'horizontal',
overflow: 'hidden',
width: '1000px',
height: 'auto',
}}
>
<svg
width="100%"
viewBox="113 128 972 600"
preserveAspectRatio="xMidYMid meet"
>
<g> ... </g>
</svg>
</div>
Yukarıdaki örnek kodda neler olduğu aşağıda açıklanmıştır:
ViewBox
MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
min-x, min-y, genişlik ve yükseklik
ie: viewbox = "0 0 1000 1000"
Viewbox önemli bir özelliktir, çünkü temel olarak SVG'ye hangi boyutta ve nerede çizileceğini söyler. SVG 1000x1000 piksel yapmak için CSS kullandıysanız ancak görünüm kutunuz 2000x2000 ise, SVG'nizin sol üst çeyreğini görürsünüz .
İlk iki sayı, min-x ve min-y, SVG'nin görünüm kutusunun içinde dengelenip dengelenmeyeceğini belirler.
SVG'm yukarı / aşağı veya sola / sağa kaydırmalı
Şunu inceleyin: viewbox = "50 50 450 450"
İlk iki sayı SVG'nizi 50 piksel ve 50 piksel yukarı kaydırır ve ikinci iki sayı görüntüleme kutusu boyutudur: 450x450 piksel. SVG'niz 500x500 ise ancak üzerinde fazladan dolgu varsa, bu sayıları "görünüm kutusu" içinde hareket ettirmek için değiştirebilirsiniz.
Bu noktada amacınız bu sayılardan birini değiştirmek ve ne olduğunu görmektir.
Görünüm kutusunu tamamen atlayabilirsiniz, ancak daha sonra milajınız o anda sahip olduğunuz diğer tüm ayarlara bağlı olarak değişir. Deneyimlerime göre, görünüm kutusu en boy oranını tanımlamaya yardımcı olduğu için en boy oranını koruma ile ilgili sorunlarla karşılaşacaksınız.
EN BOY ORANINI KORU
MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
Araştırmamı temel alarak, birçok farklı en boy oranı ayarı var, ancak varsayılan olanı çağırılıyor xMidYMid meet. Kendime açıkça hatırlatmak için benimkini koydum. xMidYMid meetorta nokta X ve Y'ye göre orantılı olarak ölçeklendirir. Bu, görünüm kutusunda ortalanmış olarak kaldığı anlamına gelir.
GENİŞLİK
MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/width
Yukarıdaki örnek koduma bakın. Sadece genişliği nasıl ayarladığımı fark ettim, yükseklik yok. % 100'e ayarladım, böylece içinde bulunduğu kabı dolduruyor. Muhtemelen bu Yığın Taşması sorusunu cevaplamaya en çok katkıda bulunan şey budur.
İstediğiniz piksel değerine değiştirebilirsiniz, ancak maksimum boyuta kadar şişirmek ve daha sonra üst konteyner aracılığıyla CSS ile kontrol etmek için yaptığım gibi% 100 kullanmanızı öneririm. Bunu tavsiye ederim çünkü "uygun" kontrol elde edersiniz. Medya sorgularını kullanabilir ve çılgın JavaScript olmadan boyutu kontrol edebilirsiniz.
CSS İLE ÖLÇEKLEME
Yukarıdaki örnek koduma tekrar bakın. Nasıl bu özelliklere sahip dikkat edin:
resize: 'horizontal', // you can safely omit this
overflow: 'hidden', // if you use resize, use this to fix weird scrollbar appearance
width: '1000px',
height: 'auto',
Bu ek bir konudur, ancak uygun en boy oranını korurken kullanıcının SVG'yi yeniden boyutlandırmasına nasıl izin vereceğinizi gösterir. SVG kendi en boy oranını koruduğundan, yalnızca ana kapta genişliği yeniden boyutlandırmanız gerekir ve istendiği gibi yeniden boyutlandırılır.
Yüksekliği yalnız bırakıyoruz ve / veya otomatik olarak ayarlıyoruz ve yeniden boyutlandırmayı genişlikle kontrol ediyoruz. Genişliği seçtim, çünkü duyarlı tasarımlar nedeniyle genellikle daha anlamlı.
Kullanılan bu ayarların bir görüntüsü:
Bu sorudaki her çözümü okuduysanız ve hala karıştıysanız veya neye ihtiyacınız olduğunu tam olarak göremiyorsanız, buradaki bağlantıya göz atın. Çok yararlı buldum:
https://css-tricks.com/scale-svg/
Bu büyük bir makale, ancak bir SVG'yi CSS ile veya CSS olmadan manipüle etmek için mümkün olan her yolu yıkıyor. Bir kahve içerken veya seçtiğiniz sıvıları seçerken okumanızı tavsiye ederim.
