1

Here is my code:

<!DOCTYPE html>
<html>

<body>
  <div align="center" style="width:100%; height:100%; padding: 0px; margin: 0px;">
    <svg height="500" version="1.1" width="1000" xmlns="http://www.w3.org/2000/svg" id="raphael-paper-0" style="overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; cursor: default; position: relative; background-color: rgb(255, 255, 255);">
      <circle cx="500" cy="250" r="100" stroke="green" stroke-width="4" fill="yellow" />
    </svg>
  </div>
</body>

</html>

I get the computed dimension of SVG as 1000 X 500 but the computed dimension of DIV is 1264 X 504.

Width of DIV - 1264px is the width of page as it is provided as 100%, i.e., understood, but why the height is 504px whereas the SVG height is 500px?

Thanks in Advance.

andreas
  • 16,357
  • 12
  • 72
  • 76
Arnab003
  • 345
  • 1
  • 11

1 Answers1

4

It's because <svg> is an inline element - setting it to display: block; will remove those effects e.g. caused from a line-height.

svg {
  display: block;
}
<!DOCTYPE html>
<html>

<body>
  <div align="center" style="width:100%; height:100%; padding: 0px; margin: 0px;">
    <svg height="500" version="1.1" width="1000" xmlns="http://www.w3.org/2000/svg" id="raphael-paper-0" style="overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; cursor: default; position: relative; background-color: rgb(255, 255, 255);">
      <circle cx="500" cy="250" r="100" stroke="green" stroke-width="4" fill="yellow" />
    </svg>
  </div>
</body>

</html>
andreas
  • 16,357
  • 12
  • 72
  • 76