在 SVG 元素中适合多边形

Question

我的 svg 元素有问题：我无法将多边形放入 SVG 元素中。我有一系列由 SVG 元素内的多边形元素制成的六边形，但是如果您播放下面的片段，您会注意到多边形在 SVG 的上部有一个白色的 space。

HTML 代码没有 space，我尝试将 font-size: 0; 或 vertical-align 设置为多边形，但没有任何变化。

有什么建议吗？提前致谢

<html><head>
  <title>Hexagons</title>
 </head>
 <body>
  <div id="hexagons"><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg></div>
  
 
</body></html>

Answer 1

除了 vertical-align 之外，您还需要调整 SVG 的高度和视图框 height="26" viewBox="0 2 30 26"。路径高度只有 26 并且从顶部 2 开始

#hexagons {
  width:200px;
}
svg {
 vertical-align:top;
}

<div id="hexagons">
<svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="26" viewBox="0 2 30 26" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="26" viewBox="0 2 30 26" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="26" viewBox="0 2 30 26" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="26" viewBox="0 2 30 26" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="26" viewBox="0 2 30 26" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="26" viewBox="0 2 30 26" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="26" viewBox="0 2 30 26" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="26" viewBox="0 2 30 26" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="26" viewBox="0 2 30 26" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="26" viewBox="0 2 30 26" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="26" viewBox="0 2 30 26" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg><svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="26" viewBox="0 2 30 26" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg>
</div>

我怀疑你想要一个模式，所以你可以考虑背景：

#hexagons {
  width:calc(20*30px);
  height:calc(10*26px);
  background:url('data:image/svg+xml;utf8,<svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="30" height="26" viewBox="0 2 30 26" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg>')
}

<div id="hexagons"></div>

也喜欢这个：

#hexagons {
  width: calc(20*30px);
  height: calc(10*26px);
  background: 
   url('data:image/svg+xml;utf8,<svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="26" viewBox="0 2 30 26" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg>'),
   url('data:image/svg+xml;utf8,<svg class="hex" xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="26" viewBox="0 2 30 26" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="30,15 23,28 8,28 0,15 8,2 23,2"></polygon></svg>') 30px 13px
}

<div id="hexagons"></div>

在 SVG 元素中适合多边形

Fit polygon in SVG element

html

css

svg

polygon