Kvadrat svg'ni ekranning markaziga joylashtiring, uni ekranning kengligi va balandligini bir necha cheklovlar bilan taqqoslash uchun kattalashtiring

Aftali savol va ehtimol dupe bo'lib tuyuladi, lekin men bir muncha vaqt uchun yaxshi echim topa olmadim.

I want to place an element inside an html document and satisfy the following requirements:

  1. Image is placed as an html5 element, not an external svg-file. (Actually, I want to dynamically generate it with D3.js.)
  2. Image is placed in the center of the screen, both vertically and horizontally.
  3. Actual size of the image should not exceed some predefined value (like 15cm × 15cm).
  4. If either current screen's width or height is less then 15cm, image should be scaled (preserving aspect ratio) in such a way it fit to screen. No parts of the image should be clipped. Image should be placed in the center.

Bu asosan ushbu maqolada tavsiflangan talablarga javob beradi. >. Men buni preserveAspectRatio = "xMidYMid" dan foydalanishim kerakligini aytadi, lekin buni qanday qilish haqida hech qanday misol ko'rsatmaydi va maqolada tasvirlangan boshqa fokuslarga qanday mos keladi. Ushbu maqola preserveAspectRatio = "xMidYMid meet" ni taklif qiladi, lekin yana barcha talablarga javob berish uchun taqdim etilgan misollarni qayta yaratolmadim.

Mening joriy kodim shu kabi, lekin u balandlikka mos emas va vertikal markazda emas.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.svg-container { height:100%; width:100%; max-height:15cm; max-width:15cm; margin: 0 auto; }
<div class="svg-container">  

  </div>
</div> </div>

10
Oldin tomonning nisbatlarini oldindan bilasizmi? Ya'ni, viewBox <// a> SVG berilganmi?
qo'shib qo'ydi muallif Just a student, manba

6 javoblar

Ushbu CSS-ni sinab ko'ring:

#picture {
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  position: absolute;
  max-height:15cm;
  max-width:15cm;
  width: 80%;
  height: 80%;
}

here is the result: https://jsfiddle.net/twe9jfkf/

Siz erishmoqchi bo'lgan narsa shu?

5
qo'shib qo'ydi
Bu SVG elementining muayyan o'lchamdagi nisbati bo'lishi shart emas. SVG ning mazmuni, odatda, asl qiymati bo'yicha asl nisbiyatni saqlab qoladi, shuning uchun u hali ham ishlaydi. Pokiza!
qo'shib qo'ydi muallif Just a student, manba

SVG ning eng boshliq nisbati berilgan bo'lsa quyidagi ishlar. Agar SVG formatining dinamikligi dinamik bo'lsa, JavaScript-ni ishlatishingiz kerak.

Ushbu snippet zamonaviy brauzerlarda ishlaydi va nisbatan yangi vmin dan to'liq foydalanadi ko'rinishdagi foizlar uzunligi . Brauzerni qo'llab-quvvatlash juda yaxshi . Landshaft va vertikal markazlashtirish uchun flexbox tartib-rejimi quvvatlanadi. Shunga qaramay, brauzerni qo'llab-quvvatlash noreferrer"> juda yaxshi .

Bu hodisa shundan iboratki, SVG o'lchamlari ekranning kengligi yoki balandligi bilan belgilanadi, qaysi biri eng kichik bo'lsa. Bu shuni anglatadiki, biz uni 100vmin deb belgilashimiz mumkin bo'lsa ham, SVG ekranga (lekin juda kam) mos keladi. Maksimal o'lchamlarni bajarish uchun yaxshi eski max-width va max-height ishlatiladi.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

html, body {
  /* ensure that all of the viewport is used */
  width: 100%;
  height: 100%;
  /* ensure that no scrollbars appear */
  margin: 0;
  padding: 0;
  
  /* center SVG horizontally and vertically */
  display: flex;
  align-items: center;
  justify-content: center;
}

#picture {
  /* ensure 1:1 aspect ratio, tweak 50 to make SVG larger */
  width: 50vmin;
  height: 50vmin;  
  /* set some maximum size (width and height need to match
   * aspect ratio, 1:1 in this case */
  max-width: 200px;
  max-height: 200px;
}
 

 
</div> </div>
4
qo'shib qo'ydi
Rahmat, vmin va flex haqida bilmagan.
qo'shib qo'ydi muallif Ilya V. Schurov, manba

CSS-dan farqli o'laroq, svg kengligi/balandligini ishlatishingiz mumkin va viewBox getBBox () Asosiy misol quyida keltirilgan:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

<!DOCTYPE HTML>

<html>

<body>
 
 

<script>
//--onload, onresize----
function sizeSVG()
{
        var mySVG=document.getElementsByTagName("svg")[0]

        var svgW=window.innerWidth
        var svgH=window.innerHeight

    var bb=mySVG.getBBox()
        var bbx=bb.x
        var bby=bb.y
        var bbw=bb.width
        var bbh=bb.height

    mySVG.setAttribute("viewBox",bbx+" "+bby+" "+bbw+" "+bbh )
    mySVG.setAttribute("width",svgW)
    mySVG.setAttribute("height",svgH)
}

document.addEventListener("onload",sizeSVG(),false)
window.onresize=sizeSVG
</script>

</body>

</html>
</div> </div>
2
qo'shib qo'ydi
Rahmat. Ushbu yondashuvni sinab ko'rdim va u ishlaydi. Hali sof CSS-ni topish umidida (CSS bilan hal etilishi mumkin bo'lgan sodda muammoga ishonaman).
qo'shib qo'ydi muallif Ilya V. Schurov, manba

Flexbox halim mening birinchi tanlovim edi. Bu fikr bilan boshqalar allaqachon javob bergani uchun, men bu turli yondashuv bilan tanishdim.

Asosan, bu mutlaq markazlashtiruvchi texnikasi va mutlaq pozitsiya va avtotasharga asoslanib elementni markazlashtiradi.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

body {
  height: 100vh;
  margin: 0;
}

svg#picture {
  max-height: 15cm;
  max-width: 15cm;
  height:100%;
  width:100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin:auto;
}
 

 
</div> </div>
1
qo'shib qo'ydi

Hali ham vertikal aligment istaysizmi? Buni qarang

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.vertical-align {
        height:1000px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.svg-container {
        max-height:15cm;
        max-width:15cm;
        height: 100%;
        width: 100%;
}
<div class="vertical-align">
        <div class="svg-container">  
         

 
        </div>
</div>
</div> </div>
0
qo'shib qo'ydi

Rasmni svg-konteyneringiz uchun fon sifatida qo'shishga harakat qildingizmi?

.svg-container {
  height:100%;
  width:100%;
  max-height:15cm;
  max-width:15cm;
  margin: 0 auto;
  background-image:url('yourSVG.svg');
  background-repeat: no-repeat;
  background-size: contain;
}
0
qo'shib qo'ydi
Rahmat! Men svg kodini elementiga joylashtirishni xohlayman (aslida men tasvirni yaratish uchun D3.js ni ishlataman), tashqi fayllarni joylash uchun emas, shuning uchun bu men uchun ishlamaydi.
qo'shib qo'ydi muallif Ilya V. Schurov, manba
Men ... qiziqarli bir muammo. Yechimni kutmoqdamiz.
qo'shib qo'ydi muallif zJorge, manba