Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Отцентрировать "дырку" в SVG-маске (https://javascript.ru/forum/xhtml-html-css/77459-otcentrirovat-dyrku-v-svg-maske.html)

Alessio18911 07.05.2019 23:48

Отцентрировать "дырку" в SVG-маске
 
Сломал голову, никак не получается отцентрировать дырку в маске относительно всей фото - несмотря на все ухищрения, дырка остаётся прижатой к левому верхнему углу. Подскажите, пожалуйста, как это можно сделать. Вот ссылка на песочницу: https://thimbleprojects.org/alessio18911/682509

Aetae 08.05.2019 00:32

В простейшем случае transform="translate(x,y)" на polygon, где x и y вычисляются от размера самого polygon и viewbox.

Alessio18911 08.05.2019 22:23

Aetae, Спасибо, что не прошли мимо :) Единственное, я не совсем понял ответ - т.е. просто "на глазок" задать % смещения по осям? А можно как-то сделать, чтобы автоматически центрировалось идеально?

Aetae 08.05.2019 22:44

Можно использовать проценты, но суть в том что система не знает и знать не хочет какого размера у вас на самом деле полигон - потому что это сложная фигура.
Можно поменять его координаты так чтобы он рисовался из середины - влево/вверх минусовые - вправо/вниз плюсовые, после чего поместить его ровно на 50% 50%.

Alessio18911 09.05.2019 00:03

Теперь понятно. Спасибо большое!


Часовой пояс GMT +3, время: 09:51.