SVG пространство вокруг

Question

У меня есть значок SVG, который генерируется некоторым плагином, используемым в проекте.Мне нужно изменить svg, потому что вокруг него есть свободное пространство.Как это исправить?Что вызывает этот пробел?

[https://codepen.io/zoom/pen/NEObQB][2]

Answer 1

Если вы хотите, чтобы ваш SVG масштабировался в соответствии с высотой и шириной, установленными в родительском div, установите его следующим образом:

div {
  position: relative;
  background-color: #eee;
}

svg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.div1 {
  width: 60px;
  height: 30px;
}

.div2 {
  width: 400px;
  height: 300px;
}

<div class="div1">
  <svg id="svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 125 80" style="fill: rgb(255, 255, 255);  stroke-width: 0px;"><rect fill-rule="evenodd" clip-rule="evenodd" fill="none" width="125" height="80"></rect><polygon fill-rule="evenodd" clip-rule="evenodd" fill="red" points="53,22 53,58 79,40"></polygon></svg>
</div>

<div class="div2">
  <svg id="svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 125 80" style="fill: rgb(255, 255, 255);  stroke-width: 0px;"><rect fill-rule="evenodd" clip-rule="evenodd" fill="none" width="125" height="80"></rect><polygon fill-rule="evenodd" clip-rule="evenodd" fill="red" points="53,22 53,58 79,40"></polygon></svg>
</div>

Answer 2

Установите width и height также на svg вместо :

 x="8" y="22" viewBox="0 0 125 80"  style="fill: rgb(255, 255, 255);  stroke-width: 0px;"

<div>
  <svg id="svg"  width="125" height="60"><rect fill-rule="evenodd" clip-rule="evenodd" fill="none" width="125" height="60"></rect><polygon fill-rule="evenodd" clip-rule="evenodd" fill="red" points="53,22 53,58 79,40"></polygon></svg>
</div>