Question 194052 in Html Question posted in
Some basic documentation can be found here.

Html – How to get SVG to stretch to table cell vertically?

I have a simple table with SVG in its table cell:

<html>
<body>
<table style="width: 8em;">
<tr>
<td style="border: 1px solid black;">
<svg viewBox="0 0 1 1" style="width: 1.37em;" preserveAspectRatio="none">
<polyline points="0,0 1,0.5 0,1" style="fill: blue;"></polyline>
</svg>
</td>
<td style="border: 1px solid black;">Lorem ipsum dolor sit amet</td>
</tr>
</table>
</body>
</html>

As you can see, other cells in the row can be too long, and hence cause the row height to change from the default, introducing gaps between the SVG and its bounding upper and lower borders.

How can I get the SVG to automatically stretch or shrink to fill its cell vertically, without changing its horizontal size?

Tags:

2

Answers


  1. 0

    I tried beatiful solutions but they didn’t work, If you are open to hacky stuff…

       <html>
  <body>
<table style="width: 8em">
  <tr>
    <td style="border: 1px solid black; position: relative; width: 1.37em">
      <svg
        viewBox="0 0 1 1"
        style="width: 1.37em; height: 100%; position: absolute; top: 0"
        preserveAspectRatio="none"
      >
        <polyline points="0,0 1,0.5 0,1" style="fill: blue"></polyline>
      </svg>
    </td>
    <td style="border: 1px solid black">Lorem ipsum dolor ipsum dolor ipsum dolor ipsum dolor sit amet</td>
  </tr>
</table>
  </body>
</html>

    Position relative to the td so that the svg is contained inside it, because the svg is now position absolute so that it accepts height 100%, but position abosulte makes the element don’t ocupy space that why it’s needed to add width to the td

    Login or Signup to reply.
  2. 0

    One solution would be to make it a background image. You can either put the SVG code into a separate file, or you can percent-encode it to use in a data URI.

    <table style="width: 8em;">
<tr>
<td style="border: 1px solid black; width: 1.37em; background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1 1%22 preserveAspectRatio=%22none%22%3E%3Cpolyline points=%220,0 1,0.5 0,1%22 style=%22fill: blue;%22%3E%3C/polyline%3E%3C/svg%3E');"></td>
<td style="border: 1px solid black;">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</td>
</tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search