Как подогнать блок SVG к блоку USE по размерам?

Question

[Aspirant555]

В общем блок SVG всегда больше блока USE. Никак не могу подогнать размер.
https://codepen.io/papagis/pen/XWaprKz

Answer 1

[Максим]

Так как у вас ваш SVG прямоуголный то вписывается он только в партретном режиме а во всех других случаях вылазиет а спасает нас если написать в .bbb вот это preserveAspectRatio="none" viewBox="0 0 24 24"

То есть вот так:

<svg class="bbb" preserveAspectRatio="none" viewBox="0 0 24 24" style="max-height: 99vh;display: block; margin: auto;">
         <use xlink:href="#filtra1"  />
       </svg>

Comments

[Aspirant555]

Не то, Это просто вписывает SVG в DIV. А надо обернуть USE в SVG. Но избытков действительно нет, правда с третьим уровнем как-то костыльно получается. И игнорирует высоту в 100% для SVG, т.е. вылазит за рамки DIV. А избытки за счёт margin гасятся... Не то.

[Максим]

aspirantes, что значит обернуть use в svg ? покажите пример кода или скриншот

[Aspirant555]

Brasileiro, Чтобы размер SVG соответствовал размеру USE.

[Максим]

aspirantes, ну я же так и написал, надо что бы в усе и в теге свг стояли одинаковые вьюбоксы, понимаете ? Всё остальное декорация

[Aspirant555]

Brasileiro, это перекидывает обертку на DIV, который так же не может обернуть SVG, как SVG не может обернуть USE

[Aspirant555]

Brasileiro, Не знаю почему, но удалив размер у DIV, viewBox="0 0 24 24" для SVG даёт нужный результат... Но это как-то не логично и непонятно почему работает именно так. И получилась новая система координат внутри другой системы координат... Очень костыльно.

[Максим]

aspirantes, хотя use это дубликат то есть мы таким образом создаём дубликат объекта ...а если по просту дублируем

Answer 2

[Dpy3b]

.bbb {
  height: 100px;
  width: 100px;
};

И удали всю дичь что написал до этого

Comments

[Aspirant555]

USE под SVG встаёт без проблем, нужно наоборот.

[Dpy3b]

aspirantes, так не бывает

[Aspirant555]

Dpy3b, есть стиль max-width: max-content;

но он по какой-то причине не работает. Вот и ищу способ подогнать. Должен ведь быть способ.

[Dpy3b]

aspirantes, что это за стиль? В том что ты там написал отсутствует всякий смысл

[Dpy3b]

aspirantes, что тебе нужно сделать-то??

[Aspirant555]

Dpy3b, Нужно обернуть SVG вокруг USE, с динамичным размером.

[Dpy3b]

aspirantes, вряд ли такое возможно

[Aspirant555]

Dpy3b, может SVG по другому вставить?

Answer 3

[Froggyweb]

<svg class="icon_userpic" viewBox="0 0 32 32">
svg:not(:root) {
    overflow: hidden;
}

Прямо на этом сайте можно глянуть

Comments

[Aspirant555]

На каком сайте? Думаю можно присвоить ViewBox SVG боксу, но его так же надо будет в бокс вложить, но, что-то подсказывает, что этот бокс так же будет больше.

[Froggyweb]

aspirantes,
как-то так

[Aspirant555]

Froggyweb, Нет, здесь просто SVG вписан в class="user-panel__avatar"
который меньше самого SVG