HTML кнопки элемент - SVG изображение внутри - странный разрыв и позиционирование

У меня есть следующий HTML:HTML кнопки элемент - SVG изображение внутри - странный разрыв и позиционирование

<button class="button"> 
    <img src="img/menu-2.svg"> 
</button>

И это CSS:

.button { 
    padding: 0; 
    height: 44px; 
    border: none; 
    background: none; 
}

Когда я инспектировать кнопку с Firebug я могу видеть, что по-прежнему существует какой-то странный разрыв между изображением и границей кнопки. Есть ли способ удалить это? Я хотел бы, чтобы изображение заполнило кнопку как можно больше или, по крайней мере, было сосредоточено.

Вот скриншот: enter image description here

Или, может быть, его что-то с файлом SVG? Это SVG-код, который должен влиять на позиционирование:

x="0px" y="0px" width="44px" height="44px" viewBox="0 0 44 44" enable-background="new 0 0 16 16"

Что поражает меня enable-background, но я не знаю, что он делает & удаление не сделал ничего.

источник

2013-10-27 Sven

У вас есть изображение SVG где-то в сети? –

@OlafDietsche Конечно, его значок меню из набора «Пакет» Адама Уиткрофта. Я вложил его в скрипку: http://jsfiddle.net/WhLDT/ (обратите внимание, как я изменил 48px на 48px во время отладки). – Sven

Когда вы сохранили ваши файлы svg, вы сохранили пробел на холсте или размер холста, содержащий только значок и ничего больше? –

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

http://healthbenefitsohio.com/images/svg_whitespace.jpg

Основываясь на изображении выше, вы бы иметь дополнительный интервал вверху, слева и снизу, которые бы вызвать некоторые неудобный интервал.

http://healthbenefitsohio.com/images/svg_nospace.jpg

На рисунке выше показан правильный способ сохранить и SVG, чтобы предотвратить нежелательный интервал при использовании изображения для Интернета.

Я рад, что смог помочь и удачи в вашем проекте!

источник

2013-10-28 13:49:37

HTML кнопки элемент - SVG изображение внутри - странный разрыв и позиционирование

ответ

Смежные вопросы