3

Как правильно встроить svg?

Встраиваю так:

<div class="icon-svg">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="32" height="17" viewBox="0 0 32 17">
        <defs>
            <style>
                .cls-1 {
                    fill: #000;
                    filter: url(#gradient-overlay-1);
                    fill-rule: evenodd;
                }
            </style>

            <filter id="gradient-overlay-1" filterUnits="userSpaceOnUse">
                <feImage x="0" y="0" width="32" height="17" preserveAspectRatio="none" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMTciPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSI1LjUwMyIgeTE9IjE3IiB4Mj0iMjYuNDk3Ij4KICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNkOTFlOGQiLz4KICA8c3RvcCBvZmZzZXQ9IjAuNTYiIHN0b3AtY29sb3I9IiMxMDk4ZDQiLz4KICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMzNWI4MWUiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIvPjwvc3ZnPg=="/>
                <feComposite operator="in" in2="SourceGraphic"/>
                <feBlend in2="SourceGraphic" result="gradientFill"/>
            </filter>
        </defs>
        <path d="M23.984,14.731 L23.984,15.568 C23.984,16.358 23.324,17.000 22.513,17.000 L9.487,17.000 C8.676,17.000 8.016,16.358 8.016,15.568 L8.016,14.731 C3.207,12.935 -0.000,8.414 -0.000,3.381 L-0.000,0.944 C-0.000,0.423 0.435,-0.001 0.971,-0.001 L31.029,-0.001 C31.565,-0.001 32.000,0.423 32.000,0.944 L32.000,3.381 C32.000,8.414 28.792,12.935 23.984,14.731 ZM8.955,15.568 C8.955,15.854 9.194,16.086 9.487,16.086 L22.513,16.086 C22.806,16.086 23.045,15.854 23.045,15.568 L23.045,15.050 L8.955,15.050 L8.955,15.568 ZM31.061,0.944 C31.061,0.927 31.047,0.913 31.029,0.913 L0.971,0.913 C0.953,0.913 0.939,0.927 0.939,0.944 L0.939,3.381 C0.939,8.137 4.035,12.396 8.642,13.981 C8.730,14.012 8.804,14.067 8.858,14.136 L23.142,14.136 C23.196,14.067 23.270,14.012 23.358,13.981 C27.965,12.396 31.061,8.137 31.061,3.381 L31.061,0.944 ZM28.863,5.239 C28.915,4.992 29.163,4.833 29.418,4.883 C29.672,4.934 29.836,5.175 29.784,5.423 C29.329,7.581 28.143,9.574 26.442,11.036 C26.353,11.113 26.242,11.151 26.131,11.151 C26.001,11.151 25.872,11.099 25.779,10.996 C25.607,10.807 25.626,10.518 25.820,10.351 C27.369,9.020 28.450,7.204 28.863,5.239 ZM29.526,3.838 C29.267,3.838 29.057,3.634 29.057,3.381 L29.057,2.406 C29.057,2.154 29.267,1.949 29.526,1.949 C29.786,1.949 29.996,2.154 29.996,2.406 L29.996,3.381 C29.996,3.634 29.786,3.838 29.526,3.838 ZM9.153,13.031 C9.101,13.031 9.048,13.023 8.997,13.005 C7.041,12.332 5.347,11.119 4.100,9.497 C3.944,9.295 3.987,9.009 4.194,8.858 C4.402,8.706 4.696,8.748 4.852,8.950 C5.988,10.426 7.529,11.530 9.310,12.143 C9.554,12.227 9.683,12.488 9.596,12.726 C9.528,12.914 9.347,13.031 9.153,13.031 ZM3.548,8.224 C3.376,8.224 3.211,8.132 3.128,7.973 C2.957,7.642 2.802,7.299 2.669,6.952 C2.578,6.716 2.701,6.452 2.944,6.364 C3.187,6.275 3.457,6.395 3.548,6.631 C3.670,6.947 3.811,7.260 3.967,7.561 C4.084,7.786 3.991,8.061 3.759,8.175 C3.691,8.208 3.619,8.224 3.548,8.224 Z" class="cls-1"/>
    </svg>
</div>

Иконка обрезается справа:

введите сюда описание изображения

Указание ширины в рх не помогает.

UPD

Так и не удалось выяснить причину.

SVG странно себя ведет - когда страница загрузилась, я убираю у svg display: blok, и появляется все что скрыто. Но если совсем убрать display: blok и снова перезагрузить страницу, то все опять обрезается...

1
  • Выложите полный код и стили окружающих элементов, чтобы вопроизвести проблему. Иконка сама по себе отображается корректно
    – while1pass
    30 дек 2016 в 23:03

3 ответа 3

3

Странно, но приведенный код корректно отображает иконку

Вы привели только код svg-элемента, для точного ответа на вопрос нужно было привести еще код элемента "Посуда", элементы-родители и их стили, чтобы воспроизвести проблему у себя.

Если же действительно проблема в иконке, вам необходимо обратить внимание на атрибут svg-элемента viewBox

 viewBox="min-x, min-y, width, height"

который управляет контейнером svg (указывает начальное положение координат и размер элемента-контейнера).

Уже решал схожую проблему Обрезка svg-изображения

3

Измените первый параметр - viewBox="0 0 32 34. Положительное значение сдвигает изображение влево по горизонтали - viewBox="5 0 32 34". Отрицательное вправо. Второй параметр viewBox сдвигает изображение по вертикали. Подробнее здесь.

1

Проблема явно не в иконке: codepen

Скорее всего у вас класс icon-svg имеет ширину меньше, чем данная иконка, и поэтому обрезает её.

2
  • это очень странно, т.к. у класса icon-svg не указана ширина...
    – siberian
    22 ноя 2016 в 16:00
  • @MarinaVoronova, возможно, класс выше? Смотрите классы выше, или выложите пример с ошибкой на тот же codepen :) 23 ноя 2016 в 9:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.