第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會有你想問的

為什么當(dāng)父 div 大小 < 14px 時(shí) svg 對齊方式會發(fā)生變化？

為什么當(dāng)父 div 大小 < 14px 時(shí) svg 對齊方式會發(fā)生變化？

幕布斯7119047 2023-10-04 15:50:11
我希望 svg 與父 div 具有相同的寬度/高度。我在下面創(chuàng)建了一個(gè) div 內(nèi)的簡單 svg 的簡化測試用例：<div class="box">  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"       viewBox="0 0 50 50">    <rect width="50" height="50"/>  </svg></div>更改父級寬度/高度將更改 svg 的大小：.box {  width: 20px;  height: 20px;  background-color: red;}當(dāng)父 div 寬度/高度小于 14px 時(shí)，svg 不再在 div 內(nèi)對齊。為什么會這樣呢？
查看完整描述

1 回答

?
烙印99

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超13個(gè)贊

要了解問題，請?jiān)谄渲刑砑右恍┪谋静⑹褂貌煌淖煮w大?。?/p>

.box {

  height: 30px;

  display:inline-block;

  vertical-align:top;

  background-color: red;

  margin:5px;

}

svg {

  width:20px;

}

<div class="box">

  A

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

       viewBox="0 0 50 50">

    <rect width="50" height="50"/>

  </svg>

</div>


<div class="box" style="font-size:30px;">

  A

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

       viewBox="0 0 50 50">

    <rect width="50" height="50"/>

  </svg>

</div>


<div class="box" style="font-size:40px;">

  A

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

       viewBox="0 0 50 50">

    <rect width="50" height="50"/>

  </svg>

</div>

您可以清楚地看到 SVG 與文本的基線對齊，如果字體大小增大，則會出現(xiàn)溢出。如果我們保持相同的字體大小并減小高度，則邏輯相同：

.box {

  height: 40px;

  display:inline-block;

  vertical-align:top;

  background-color: red;

  margin:5px;

}

svg {

  width:40px;

}

<div class="box">

  A

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

       viewBox="0 0 50 50">

    <rect width="50" height="50"/>

  </svg>

</div>


<div class="box" style="height:20px;">

  A

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

       viewBox="0 0 50 50" style="width:20px;">

    <rect width="50" height="50"/>

  </svg>

</div>


<div class="box" style="height:10px;">

  A

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

       viewBox="0 0 50 50" style="width:10px;">

    <rect width="50" height="50"/>

  </svg>

</div>

如果刪除文本，行為將保持不變，因?yàn)榛€不會改變：

.box {

  height: 40px;

  width:40px;

  display:inline-block;

  background-color: red;

  margin:5px;

  padding:2px;

}

<div class="box">

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

       viewBox="0 0 50 50">

    <rect width="50" height="50"/>

  </svg>

</div>


<div class="box" style="height:20px;width:20px;">

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

       viewBox="0 0 50 50">

    <rect width="50" height="50"/>

  </svg>

</div>


<div class="box" style="height:10px;width:10px;">

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

       viewBox="0 0 50 50">

    <rect width="50" height="50"/>

  </svg>

</div>


<div class="box" style="height:5px;width:5px;">

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

       viewBox="0 0 50 50">

    <rect width="50" height="50"/>

  </svg>

</div>

為了避免這種情況，只需調(diào)整對齊方式并使其與基線不同：

.box {

  height: 20px;

  width:20px;

  display:inline-block;

  background-color: red;

  margin:5px;

  padding:2px;

}


svg {

 vertical-align:top;

}

<div class="box">

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

       viewBox="0 0 50 50">

    <rect width="50" height="50"/>

  </svg>

</div>


<div class="box" style="height:10px;width:10px;">

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

       viewBox="0 0 50 50">

    <rect width="50" height="50"/>

  </svg>

</div>


<div class="box" style="height:5px;width:5px;">

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

       viewBox="0 0 50 50">

    <rect width="50" height="50"/>

  </svg>

</div>

或者將字體大小重置為 0：

.box {

  height: 20px;

  width:20px;

  display:inline-block;

  background-color: red;

  margin:5px;

  padding:2px;

  font-size:0;

}

<div class="box">

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

       viewBox="0 0 50 50">

    <rect width="50" height="50"/>

  </svg>

</div>


<div class="box" style="height:10px;width:10px;">

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

       viewBox="0 0 50 50">

    <rect width="50" height="50"/>

  </svg>

</div>


<div class="box" style="height:5px;width:5px;">

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

       viewBox="0 0 50 50">

    <rect width="50" height="50"/>

  </svg>

</div>


查看完整回答
反對 回復(fù) 2023-10-04
  • 1 回答
  • 0 關(guān)注
  • 112 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號