Question

我想创建一个始终具有相同固定高度（以我的情况为40px）但具有相对宽度的SVG。我怎样才能做到这一点？调整浏览器大小时，它始终会更改高度。

我尝试将saveAspectRatio设置为多个变体，但我可能不太了解。

以下是显示我要完成的任务的摘要

<table border="1">
  <thead>
    <th>
      Header one
    </th>
      <th>
      h2
    </th>
      <th>
      Header three 333
    </th>
      <th>
      h4444
    </th>
  </thead>
  <tbody>
    <td>
      <svg viewBox="0 0 400 40" version="1.1" preserveAspectRatio="none">
        <rect x="0" y="0" rx="10" ry="10" width="80%" height="40px" fill="#000" /> 
      </svg>
    </td>
    <td>
      <svg viewBox="0 0 400 40" version="1.1" preserveAspectRatio="none">
        <rect x="0" y="0" rx="10" ry="10" width="80%" height="40px" fill="#000" /> 
      </svg>
    </td>
    <td>
      <svg viewBox="0 0 400 40" version="1.1" preserveAspectRatio="none">
        <rect x="0" y="0" rx="10" ry="10" width="80%" height="40px" fill="#000" /> 
      </svg>
    </td>
    <td>
      <svg viewBox="0 0 400 40" version="1.1" preserveAspectRatio="none">
        <rect x="0" y="0" rx="10" ry="10" width="80%" height="40px" fill="#000" /> 
      </svg>
    </td>
  </tbody>
</table>

我希望每列的高度都是固定的（大约40px），但是它会根据列的重量进行调整。谢谢！

Answer 1

我将视图框的宽度更改为％单位： <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100% 40" version="1.1" preserveAspectRatio="none"> <rect x="0" y="0" rx="10" ry="10" width="80%" height="100px" fill="#000" /> </svg>

如何制作具有固定高度和相对宽度的SVG？

1 个答案: