[5/16] "background-position" для SVG и поведение оси "Y" с положительным значением

В задании мы с помощью “background-position” управляем частью изображения, которое отобразится в блоке меньшего размера.

Когда значение “Y” = 15рх(прим. первый и второй элемент), то изображение (его часть где текст) съезжает вниз а пространство вверху закрашивается в цвет фона.
Мне думалось, что точка отсчета должна бы сместиться на 15рх вниз от верхней границы. И скорее всего дело в том, как работает SVG графика.

Поэтому буду невероятно благодарен, если кто-то сможет прояснить такое поведение изображения!

а вопрос-то какой? у вас есть изображение, оно больше блока, в котором отображается, дефолтно верхняя левая точка изображения и блока совпадают. когда вы задаете координаты, они соответствуют точке изображения, которая помещается в верхний левый угол блока. мы видим ровно столько, сколько позволяют размеры блока.
цвет фона регулируется background-color, svg тут работает как объект с прозрачным фоном. если бы это был непрозрачный фон, то вы бы увидели границы изображения при перемещении.

Спасибо большое за быстрый ответ!
Так и мне казалось, что есть базовая точка отсчета (левый верхний угол), а дальше координатами мы “задаем новую точку” на изображении и все что влезло в видимую область, то мы и увидим. Такое поведение отмечено желтым цветом на скриншоте.
Я специально сделал новый див с изображением, чтобы увидеть его в развернутом виде. И как мы видим, его приблизительный вьюпорт обведен красным.
Так вот, судя по скриншоту, задав 15рх по оси Y мы сместились не на заданое значение по телу изображения, а по сути сместили всю картинку (левый верхний угол), а пространство сверху естественно закрасилось фоном.
Вопрос таков, это поведение исключительно SVG или так будет происходить и с “не бесконечными” изображениями? Ведь в таком случае область сверху не сможет закраситься фоном.

ну все правильно, также происходит и внутри маленького вьюпорта. просто SVG сам по себе прозрачный и фон существует отдельно от SVG.

абстрактно объясню: просто представьте, что блок - это лист бумаги, в котором вырезали квадратик. вот этот лист не двигаем.
под ним на уровне нашего “окошка”, на прозрачной пленке есть буква, нарисованная в SVG белым цветом. пленка имеет форму квадратика чуть больше чем вырезанный на бумаге.
а под пленкой уже есть листок цветного картона, он бесконечно большой, как скажем Родина =)

когда мы задаем background-position - мы двигаем пленку под бумагой (вниз, это +y, вправо это +x). и если бы она была непрозрачной, то мы бы видели цвет пленки. а если задать слишком большие координаты в абсолютном значении (больше размера окошка), то пленка уедет далеко от вьюпорта и выпадет из него и у нас останется только цветной картон, т.е. фон (background-color) внутри вьюпорта.

нам не важно SVG это или нет. все 3 конструкции существуют одновременно. т.е. даже когда есть background-image, под ним есть background-color.

Спасибо большое за прекрасную аналогию :slightly_smiling_face::+1:
Теперь я понял, что каждый раз мы двигаем картинку (прозрачную пленку из вашего примера) за базовую точку отсчета (левый верхний угол), а в случае если в видимой области окажется зона без этой пленки, то она окрасится в цвет свойства background-color (или если такое не задано явно, то в значение по-умолчанию)
Надеюсь понял верно.
Еще раз спасибо за ваше время!