Question

我对svg元素有问题：我无法在SVG元素中放入多边形。我在SVG元素内部有一系列由多边形元素组成的六边形，但是如果您播放下面的代码片段，您会注意到，多边形在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>

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

1 个答案: