周围的SVG空间

Question

我有一个svg图标，该图标由项目中使用的某些插件生成。我需要修改svg，因为它周围有一些空白。 如何解决这个问题？是什么原因导致空白？

option:first-letter {
  text-transform: uppercase; /* change first letter to uppercase */
}

Answer 1

也将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>

Answer 2

如果您希望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>