在 SVG 元素中拟合多边形答案

【问题标题】：Fit polygon in SVG element在 SVG 元素中拟合多边形
【发布时间】：2020-02-12 12:26:04
【问题描述】：

我的 svg 元素有问题：我无法将多边形放入 SVG 元素中。我在 SVG 元素中使用多边形元素制作了一系列六边形，但如果您播放下面的 sn-p，您会注意到多边形在 SVG 的上部之前有一个空白。

HTML 代码没有空格，我尝试将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>

【问题讨论】：

设置显示：flex;到 #hexagons 和 flex-wrap: wrap;然后您可以使用边距调整 .hex 元素的位置
在@TemaniAfif 的回答中使用viewBox="0 2 30 26"as 就可以了。你也经常重复自己。您可能希望使用 <use> element 重用多边形

标签： html css svg polygon

【解决方案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>')
}

&lt;div id="hexagons"&gt;&lt;/div&gt;

也是这样的：

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

&lt;div id="hexagons"&gt;&lt;/div&gt;

【讨论】：

这就是我要寻找的！我只添加了viewBox 属性，效果很好。但是您是如何理解距顶部 2 个像素的距离的呢？
@MarDenDev 如果您阅读多边形，您将看到顶部的两个点8,2 23,2。你会注意到2