CODEWITHSUNDEEP
htmlcsssvg
user2233706
user2233706

Reputation: 7207

Scale SVG to fill parent div/td

I want the SVG to completely fit the containing TD. The SVG's proportions don't have to be preserved. Instead, the SVG's height is the same as its width when the height should be larger than it's width. There is padding below and above the SVG. Here's what I have:

<html>
<head>
  <style>
table {
  border-collapse:collapse;
}

.td-svg {
  padding: 0px;
  display: block;
}

.div-svg {
  height: 100%;
  display: block;
}
  </style>
</head>

<body>
  <table>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
    <tr>
      <td class='td-svg'>
        <div class='div-svg'>
          <svg viewBox='0 0 100 100' preserveAspectRatio="none"></svg></div></td>
      <td>col 2</td>
      <td>col 3<br/>continued<br/>continued<br/>continued<br/>continued</td>
    </tr>
  </table>
    
</body>
</html>

I thought the reason the SVG was not filling the entire cell was because the DIV was not filling the parent TD, but if I remove the DIV, I get the same results.

What seems to be happening is that the browser is scaling the SVG to be in proportion to the viewBox dimensions. Right now in the code above, the SVG element is 70x70. If change the viewBox to viewBox='0 0 100 50', the SVG element is 70x35. The TD is 70x92, so I want the SVG to also be 70x92.

By the way, the SVG is positioned differently in the code snippet output versus if you copy the code into a file and run it.

Upvotes: 2

Views: 2264

Answers (1)

Bobby Orndorff
Bobby Orndorff

Reputation: 3335

By default, element is displayed as an inline element aligned to the text baseline. This results in a small amount of space between the bottom of the element and the bottom of its parent. This space is reserved for text characters that descend below the baseline.

In your example, you can solve your problem by setting display="block" on the element. For example...

<svg viewBox='0 0 100 100' display="block" preserveAspectRatio="none"></svg>

Upvotes: 1

Related Questions