@CityzenUNDEAD

Как сделать, что бы svg-изображение внутри контейнера svg всегда было по центру?

Всем здаров!
У меня есть тег svg, внутри которого код картинки, мне нужно что бы контейнер svg, и изображение были размером 75x22, но при таких размерах картинка отображается где-то в нижней правой части svg-контейнера. Я знаю, что есть атрибут viewBox, но я чет не понял как он работает.
Кто-нибудь подскажите, как можно сделать, что бы svg изображение всегда было по центру svg контейнера?
Меня в частности интересует, почему если у svg тега из моего примера сбросить размеры и вьюбокс, изображение находится по центру, хотя должно находится в левом верхнем углу?
https://codepen.io/_web_spider_/pen/zYYabjb
  • Вопрос задан
  • 854 просмотра
Решения вопроса 2
У меня есть тег svg

И для тега <svg> задан размер 75x22

внутри которого код картинки

Код не совсем картинки. С помощью svg-путей (кривых линий) написан текст "pink"

мне нужно что бы контейнер svg, и изображение были размером 75x22

Проблема в том, что текст нарисован с помощью абсолютно указанных координат. И начинается это рисование с отступом в ~70px по оси X и ~18px по оси Y. Естественно, при холсте всего в 72x22px кривые будут выходить за рамки холста.

почему если у svg тега из моего примера сбросить размеры и вьюбокс, изображение находится по центру

Я так понимаю, под "сбросить" подразумевается "не указывать вообще"?
Потому что по умолчанию, svg-элемент имеет размеры 300x150px и при таких размерах нарисованные с помощью абсолютно заданных координат кривые видны.

UPDATE:
как можно сделать, что бы svg изображение всегда было по центру svg контейнера?

Не проще ли сделать нужный контейнер через HTML, а внутри него уже позиционировать SVG-элемент с фиксированными размерами?
Также, я изменил принцип рисования этого слова, чтобы оно не отступало 75px слева
Пример:
https://codepen.io/hisbvdis/pen/jOOKRNv

5dc722c933c1f679231808.png
Ответ написан
delphinpro
@delphinpro Куратор тега CSS
frontend developer
  1. Откройте в Иллюстраторе.
  2. Перейдите на вкладу монтажных областей.
  3. Задайте размеры, например, 128х128 пикселей (это будет viewBox)
  4. Задайте смещение по горизонтали на половину ширины (64пикс), по вертикали наполовину высоты отрицательно (-64пикс)
  5. Перейдите на вкладку со слоями
  6. Выделите всю иллюстрацию.
  7. В верхней панели задайте положение по X = 64 (половина ширины), по Y = 64 (половина высоты)
  8. Там же включите сохранение пропорций и выставьте размеры. Если картинка квадратная, то одинаковые значения ширины и высоты по размеру монтажной области (128пикс). Если картинка прямоугольная, то задаем размер равный монтажной области только по большей стороне, меньшая скорректируется благодаря сохранению пропорций.
  9. Сохраните в формате SVG.

Теперь можете задавать для изображения любые размеры в стилях — картинка будет по центру вьюбокса.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы