Вставить многоугольник в элемент SVG - PullRequest
Новая
       21

Вставить многоугольник в элемент SVG

0 голосов
/ 12 февраля 2020

У меня проблема с элементом svg: я не могу вписать многоугольник в элемент SVG. У меня есть серия шестиугольников, сделанных с элементами многоугольников внутри элементов SVG, но если вы сыграете фрагмент ниже, вы заметите, что у многоугольника есть пробел перед собой в верхней части SVG.

The * В коде 1013 * нет пробела, и я попытался установить 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>

1 Ответ

1 голос
/ 12 февраля 2020

В дополнение к 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>
...