Привет, CSS, разве 0% это не 0?

[Malleys]

Обнаружил неочевидное поведение у CSS-свойства transform-origin...

<svg viewBox="0 0 300 150" width="3000">
<style>

#box {
	transform-origin: 100% 0;
	/* Чтобы увидеть дополнительные странности,
	попробуй в консоли поменять на 0% 0 и затем на 0 0,
	которые по-разному воспринимаются в Chrome! */
	
	transform: rotate(-20deg);
}
</style>

	<rect x="10" y="15" height="15" width="30" fill="teal"></rect>
	<rect x="10" y="15" height="15" width="30" id="box"></rect>
</svg>

Правда, если использовать 0% 0% или 100% 0%, то отображается, как должно быть! Но разве 0 в CSS должен отличаться от 0%?

[Rasy]

0 присваивается в стандартной единице измерения, т.е. в пикселях.

[Malleys]

Я не совсем понял смысл вашей реплики. Я думаю, что если ширина равна 0ch или 0vmin, то она равна 0 независимо от единиц измерения, поскольку разность одноимённых координат равна 0. "для нулевых длин единица измерения не является обязательной" (https://www.w3.org/TR/css3-values/#lengths)

P. S. Кстати в SVG используются не реальные пиксели. Они основаны на системе координат SVG, которая определяется в атрибуте viewBox.
Так что я могу масштабировать его и значение этих пикселей будет изменяться. Это по отношению к SVG я могу сказать, что там что-то равно 25. Я не должен сказать 25 пикселей. Это не имеет смысла. Но Chrome немного глючит, если я не использую px.

[Rasy]

Malleys,
Любую величину css св-ва без единицы измерения браузер трактует в пикселях по-умолчанию.