css 如何让SVG垂直拉伸到表格单元格？

hc2pp10m 于 2023-07-01 发布在其他

关注(0)|答案(3)|浏览(137)

我有一个简单的表格，表格单元格中有SVG：

<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>

正如您所看到的，行中的其他单元格可能太长，因此导致行高从默认值更改，从而在SVG及其上下边界之间引入间隙。
如何让SVG自动拉伸或收缩以垂直填充其单元格，而不更改其水平大小？

css

来源：https://stackoverflow.com/questions/76552360/how-to-get-svg-to-stretch-to-table-cell-vertically

3条答案

按热度按时间

aurhwmvo1#

一个解决方案是将其作为背景图像。您可以将SVG代码放入一个单独的文件中，也可以percent-encode它以在数据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>

赞(0）回复(0）举报 2023-07-01

ldxq2e6h2#

另一个解决方案是，相对于td的位置，这样svg就包含在其中，因为svg现在是绝对位置，所以它接受100%的高度，但是位置abosult使元素不占用空间，这就是为什么需要向td添加宽度

<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>

现在，为了允许文本在相同的td中，一种方法是使用一点JavaScript来计算高度。我做了一些研究，似乎使一个元素适合父高度归结为3 options，位置绝对值（前面的代码片段），显示Flex和显示网格，posititon绝对值将不允许在同一td中显示文本，显示Flex和网格将删除td的显示表单元格，这将扰乱表。因此，对于一些js，它看卢什像这样：

<html>
  <head>
    <style>
      table td {
        border: 1px solid black;
      }

      .svg-container {
        display: flex;
      }

      .svg-container svg {
        width: 1.37em;
        align-self: stretch;
      }

      .svg-container svg polyline {
        fill: blue;
      }

      .svg-container span {
        align-self: center;
      }
    </style>
  </head>

  <body>
    <table style="width: 8em">
      <tr>
        <td>
          <div class="svg-container">
            <svg viewBox="0 0 1 1" preserveAspectRatio="none">
              <polyline points="0,0 1,0.5 0,1"></polyline>
            </svg>
            <span>One</span>
          </div>
        </td>
        <td>Lorem ipsum dolor ipsum dolor ipsum dolor ipsum dolor sit amet</td>
      </tr>
      <tr>
        <td>
          <div class="svg-container">
            <svg viewBox="0 0 1 1" preserveAspectRatio="none">
              <polyline points="0,0 1,0.5 0,1"></polyline>
            </svg>
            <span>Two Here</span>
          </div>
        </td>
        <td>Lorem ipsum</td>
      </tr>
    </table>
  </body>

  <script>
    [...document.querySelectorAll(".svg-container")].forEach((container) => {
      const parentHeight = container.parentNode.getBoundingClientRect().height;
      container.style.height = `${parentHeight}px`;
    });
  </script>
</html>

如果JavaScript不是一个选项，那么我只能想到用div制作的“伪表”，但你必须手动控制列的宽度：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .pseudo-table {
        width: 200px;
        display: flex;
        flex-direction: column;
      }

      .pseudo-table .row,
      .pseudo-table .column {
        display: flex;
      }

      .pseudo-table .column {
        border: 1px solid black;
      }

      .after-svg {
        align-self: center;
      }

      .col1 {
        min-width: 65px;
      }

      .col2,
      .col3 {
        min-width: 100px;
      }
    </style>
  </head>
  <body>
    <div class="pseudo-table">
      <div class="row">
        <div class="column col1">
          <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>
          <span class="after-svg">One</span>
        </div>
        <div class="column col2">Lorem ipsum dolor meca vade Lorem ipsum dolor meca vade</div>
        <div class="column col3">Other colum</div>
      </div>

      <div class="row">
        <div class="column col1">
          <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>
          <span class="after-svg">Two here</span>
        </div>
        <div class="column col2">Lorem ipsum</div>
        <div class="column col3">Other colum with more</div>
      </div>
    </div>
  </body>
</html>

赞(0）回复(0）举报 2023-07-01

vhmi4jdf3#

您可以将SVG插入到背景中。在这里，我使用以下SVG文档的数据URI：

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" preserveAspectRatio="none">
  <polyline points="0,0 1,0.5 0,1" style="fill: blue;"/>
</svg>

svg {
  display: block;
}

.arrow {
  width: 2em;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgogIDxwb2x5bGluZSBwb2ludHM9IjAsMCAxLDAuNSAwLDEiIHN0eWxlPSJmaWxsOiBibHVlOyIvPgo8L3N2Zz4=');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

<table style="width: 8em;">
  <tr>
    <td class="arrow" style="border: 1px solid black;">
    </td>
    <td style="border: 1px solid black;">Lorem ipsum dolor sit amet</td>
  </tr>
</table>

我不知道表格有多重要，但这可以应用于任何元素，比如这里，一个段落：

svg {
  display: block;
}

p {
  width: 6em;
  padding-left: 2em;
  position: relative;
}

p:before {
  position: absolute;
  margin-left: -2em;
  content: "";
  width: 2em;
  height: 100%;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgogIDxwb2x5bGluZSBwb2ludHM9IjAsMCAxLDAuNSAwLDEiIHN0eWxlPSJmaWxsOiBibHVlOyIvPgo8L3N2Zz4=');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

<p>Lorem ipsum dolor sit amet</p>

赞(0）回复(0）举报 2023-07-01

我来回答

css 如何让SVG垂直拉伸到表格单元格？

3条答案

相关问题

热门标签

最新问答