Почему мой SVG использует координаты исходного центра?

Question

Почему мои круги не начинаются в верхнем левом углу?Чего мне здесь не хватает?

Я не уверен, почему 0 оси X находится в центре чертежа.

Я схожу с ума?:)

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="20" viewBox="0 0 100 20">
	<svg x="0" y="0" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
		<circle cx="100" cy="100" r="100" />
	</svg>
	<svg x="20" y="0" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
		<circle cx="100" cy="100" r="100" />
	</svg>
	<svg x="40" y="0" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
		<circle cx="100" cy="100" r="100" />
	</svg>
	<svg x="60" y="0" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
		<circle cx="100" cy="100" r="100" />
	</svg>
	<svg x="80" y="0" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
		<circle cx="100" cy="100" r="100" />
	</svg>
</svg>

Answer 1

Вы используете viewBox="0 0 100 20" Это означает, что ширина в пользовательских единицах равна 100, а высота - 20. При этом вы используете width="150" height="20". Вы можете удалить атрибут высоты.В этом случае высота будет рассчитана таким образом, чтобы рапорт w / h оставался неизменным.Если вам нужно width="150" height="20", вы можете попробовать использовать другой viewBox="0 0 150 20".

Подробнее об атрибуте viewBox

svg{background:#d9d9d9}

<svg xmlns="http://www.w3.org/2000/svg" width="150"  viewBox="0 0 100 20">
	<svg x="0" y="0" viewBox="0 0 200 200" width="20" version="1.1" xmlns="http://www.w3.org/2000/svg">
		<circle cx="100" cy="100" r="100" />
	</svg>
	<svg x="20" y="0" viewBox="0 0 200 200" width="20" version="1.1" xmlns="http://www.w3.org/2000/svg">
		<circle cx="100" cy="100" r="100" />
	</svg>
	<svg x="40" y="0" viewBox="0 0 200 200" width="20" version="1.1" xmlns="http://www.w3.org/2000/svg">
		<circle cx="100" cy="100" r="100" />
	</svg>
	<svg x="60" y="0" viewBox="0 0 200 200" width="20" version="1.1" xmlns="http://www.w3.org/2000/svg">
		<circle cx="100" cy="100" r="100" />
	</svg>
	<svg x="80" y="0" viewBox="0 0 200 200" width="20" version="1.1" xmlns="http://www.w3.org/2000/svg">
		<circle cx="100" cy="100" r="100" />
	</svg>
</svg>