У меня есть значок меню гамбургера, созданный с использованием встроенного SVG, однако у меня возникают проблемы с его расположением, поскольку ограничивающая рамка SVG не совпадает с путями:
.menu-icon {
width:80px;
height:80ppx;
border:1px solid black;
}
.menu-toggle {
fill: #000;
pointer-events: all;
cursor: pointer;
}
.menu-toggle .bar {
-webkit-transform: rotate(0) translateY(0) translateX(0);
transform: rotate(0) translateY(0) translateX(0);
opacity: 1;
-webkit-transform-origin: 20px 10px;
transform-origin: 20px 10px;
-webkit-transition: -webkit-transform 0.4s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.4s ease-in-out, opacity 0.2s ease-in-out;
}
.menu-toggle .bar:nth-of-type(1) {
-webkit-transform-origin: 20px 10px;
transform-origin: 20px 10px;
}
.menu-toggle .bar:nth-of-type(3) {
-webkit-transform-origin: 20px 20px;
transform-origin: 20px 20px;
}
<div class="menu-icon">
<svg enable-background="new 0 0 32 22.5" version="1.1" viewBox="0 0 32 22.5" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<title>Mobile Menu</title>
<g class="menu-toggle">
<path class="bar" d="m20.945 8.75c0 0.69-0.5 1.25-1.117 1.25h-16.687c-0.617 0-1.118-0.56-1.118-1.25s0.5-1.25 1.118-1.25h16.688c0.616 0 1.116 0.56 1.116 1.25z">
</path>
<path class="bar" d="m20.923 15c0 0.689-0.501 1.25-1.118 1.25h-16.687c-0.618 0-1.118-0.561-1.118-1.25s0.5-1.25 1.118-1.25h16.687c0.617 0 1.118 0.561 1.118 1.25z">
</path>
<path class="bar" d="m20.969 21.25c0 0.689-0.5 1.25-1.117 1.25h-16.688c-0.617 0-1.118-0.561-1.118-1.25s0.5-1.25 1.118-1.25h16.688c0.617 0 1.117 0.561 1.117 1.25z">
</path>
</g>
</svg>
</div>
Как вы можете видеть, у меня есть пробелы со всех сторон значка между SVG и границей содержащего элемента. Я хочу, чтобы граница касалась краев путей SVG, чтобы я мог использовать отступы для создания пространства между рамкой. Как я могу решить эту проблему?