SVG gets nudged when height is about 10px

by Martin Capodici   Last Updated August 14, 2019 05:26 AM - source

With an SVG within a div with specified height, if the height is about 10px or less, the SVG element is moved down.

Example comparing 10px height to 20px height:

<div style="height:10px; background-color:red">
  <svg style="height:10px;">
    <rect x=0 y=0 width=10 height=10></rect>
  </svg>
</div>
<div style="height:20px" ></div>
<div style="height:20px; background-color:yellow">
  <svg style="height:20px;">
    <rect x=0 y=0 width=20 height=20></rect>
  </svg>
</div>

This happens in Chrome 76, FF 68 and Edge 42.

Is this a bug, or there a logical reason for this I haven't figured out?

Tags : svg


Related Questions