inline svg sprite white space issue

78
11

В Chrome и Firefox (еще не тестировались в другом месте), я вижу большой кусок белого пространства выше и ниже моего svg.

Я использую встроенный лист спрайтов svg (построенный с помощью gulp svgstore) и ссылающийся на svg по идентификатору символа

HTML

<svg style="display: none;" xmlns="http://www.w3.org/2000/svg"><symbol id="test" viewBox="0 0 111.2 33"><g></g><g>  <rect x="0" y="0" fill="#843B8F" width="111.2" height="33"/></g></symbol></svg>

<svg class="sym">
<use xlink:href="#test"></use>
</svg>

Вот пример:

http://codepen.io/magicspon/pen/dPVKZm

Как удалить это пробел?

Есть идеи

благодаря

спросил(а) 2021-01-25T20:11:05+03:00 4 месяца, 2 недели назад
1
Решение
63

Форма вашего вида viewBox не соответствует форме, в которой она отображается. Форма, в которой он отображается, составляет 300 x 150, поскольку вы не предоставили никаких измерений этому объекту <svg> (тот, у которого есть атрибут class= "sym"),,

Таким образом, вы могли бы

    укажите, что ширина и высота элемента <svg> с соотношением сторон 111.2: 33 или добавить атрибут preserveAspectRatio = "none" в элемент <symbol>

в зависимости от того, что вы хотите отобразить

ответил(а) 2021-01-25T20:11:05+03:00 4 месяца, 2 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема