2015-09-28 3 views
0

У меня есть простой значок svg, который я использую. Я установил его высоту и ширину 16px. Когда я проверяю элемент svg, это 16px. Однако он выглядит немного меньше, чем другие значки, которые нужно сгруппировать.Путь не заполняет полный размер элемента SVG

Когда я проверяю единственный «путь» в svg, это размер 15.625px.

Вот SVG:

<svg height="16px" style="enable-background:new 0 0 512 512;" 
    version="1.1" viewBox="0 0 512 512" width="16px" xml:space="preserve" 
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <path d="M456,506H56c-27.617,0-50-22.393-50-50V56 C6,28.383,28.383,6,56,6h400c27.618,0,50,22.383,50,50v400C506,483.607,483.618,506,456,506z M214.213,259.408 c0-0.762-0.195-1.475-0.224-2.227l98.73-54.814c9.649,8.135,21.953,13.232,35.576,13.232c30.655,0,55.498-24.843,55.498-55.488 c0-30.654-24.843-55.498-55.498-55.498c-30.654,0-55.498,24.844-55.498,55.498c0,2.832,0.43,5.557,0.84,8.272l-94.922,52.705 c-10.097-10.537-24.248-17.168-40-17.168c-30.644,0-55.488,24.844-55.488,55.488c0,30.654,24.844,55.498,55.488,55.498 c15.264,0,29.073-6.172,39.102-16.142l95.176,52.851c1.035,29.736,25.312,53.565,55.302,53.565 c30.655,0,55.498-24.844,55.498-55.499c0-30.644-24.843-55.488-55.498-55.488c-17.08,0-32.177,7.891-42.353,20.03l-92.1-51.133 C213.93,261.849,214.213,260.668,214.213,259.408z" id="share_1_" style="fill-rule:evenodd;clip-rule:evenodd;fill:grey;"/> 
</svg> 

Как сделать элемент пути такого же размера, как SVG элемента он содержится в?

ie. Если svg 16px * 16px, тогда путь должен быть 16px * 16px - не 15.625px * 15.625px.

Прости меня, если это глупый вопрос, но я в общей сложности начинающий .... SVG

Вы можете увидеть его здесь в plnkr: http://plnkr.co/edit/0XBHg89HbUoPdDL22GSF

+1

Отрегулируйте параметры viewBox, чтобы содержимое выглядело больше или меньше. –

ответ

1

Согласно комментатора Роберт Лонгсон, я фиксированной это путем регулировки высоты и ширины Viewbox используя следующий расчет:

(15,625/16) * 512 = 500

окно видимости, то выглядит следующим образом:

viewBox="0 0 500 500" 

Исправлена ​​проблема!

Спасибо, Роб!

1

Это потому, что размер элемента пути на самом деле: 15.625px X 15.625px,

, если вы хотите изменить его, вы можете изменить значок в редакторе SVG как Inkscape.

Если вы это сделаете, вы увидите небольшой запас по краям значка, а затем, щелкнув по нему, вы увидите фактический размер его, просто измените его на 16 пикселей x 16 пикселей.

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