Встроенные полосы SVG - ограничивающая рамка не выравнивается с контурами - PullRequest
0 голосов
/ 27 мая 2020

У меня есть значок меню гамбургера, созданный с использованием встроенного 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, чтобы я мог использовать отступы для создания пространства между рамкой. Как я могу решить эту проблему?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...