Question

我已阅读了许多帖子，这些帖子回答了如何删除.svg文件下的空间。我试图使用＆＃34; display：block;＆＃34;没有运气。我认为这是因为我不确定在何处放置代码以使其工作。

我的js小提琴的链接如下：[我在哪里将显示块放在.svg doc中] [1]

  [1]: https://jsfiddle.net/bethabernathy/gsarhk4c/

非常感谢任何帮助。谢谢，贝丝

Answer 1

您的主要问题是您的viewBox错误。

如果您希望圆圈填充给予SVG的区域，则viewBox必须与圆的尺寸相匹配。您的圆圈的宽度和高度为75，但您的viewBox描述了135宽和高的区域。

为了避免将来使用Illustrator，您应该：

缩放图像以使其填充画板，或
Uncheck the "Use artboards" option when saving as SVG.

第二个问题（display:block修正）只有在您修复viewBox问题后才会显现。

看看以下示例。在<div>中包含三个版本的SVG：

您原来的SVG。我已经简化了SVG以删除此演示所需的一些图标。我还删除了SVG内联时不需要的SVG样板。
固定viewBox的SVG。请注意SVG与<div>底部之间的小间隙。
与＃2相同，但display: block应用于SVG。请注意，底部的差距现已消失。

div {
  border: solid 1px grey;
  width: 300px;
  float: left;
  margin-right: 10px;
}

#example3 svg {
  display: block;
}

<div id="example1">

  <svg  viewBox="0 0 135 135">
    <style type="text/css">
      .st0{fill:#398439;}
    </style>
    <circle class="st0" cx="37.5" cy="37.5" r="37.5"/>
  </svg>

</div>


<div id="example2">

  <svg  viewBox="0 0 75 75">
    <style type="text/css">
      .st0{fill:#398439;}
    </style>
    <circle class="st0" cx="37.5" cy="37.5" r="37.5"/>
  </svg>

</div>


<div id="example3">

  <svg  viewBox="0 0 75 75">
    <style type="text/css">
      .st0{fill:#398439;}
    </style>
    <circle class="st0" cx="37.5" cy="37.5" r="37.5"/>
  </svg>

</div>

删除svg图标下的空间 - 在哪里添加＆＃34; display：block;＆＃34;在svg代码中

1 个答案: